sancho2412
Neues Mitglied
Hallo,
ich arbeite gerade an meiner ersten Homepage.
Ich habe eine externe css-Style-Datei eingebunden.
Im allgemeinen Besteht die Seite aus drei Spalten und einer Kopf- und Fußzeile.
Als Hintergrundbild habe ich ein jpg Bild verwendet. Dieses Bild visualisiert die drei Spalten (dunkel - hell - dunkel).
Nun möchte ich erstens: Das Bild soll immer komplett gestreckt werden, sowohl waagerech als auch senkrecht.
Zweitens: Die drei Spalten sollen auf die Ausdehnung angepasst werden.
Mein Willkommenseite sieht so aus:
Die Kopfzeile sieht so aus:
und die Fußzeile so:
und das Navigationsmenü so:
Die css-Datei sieht so aus:
Wie bekomme ich es jetzt hin, dass sich das Hinzergrundbild immer streckt und dass sich zum Beispiel die Breite des Navigationsmenüs dynamisch anpasst?
ich arbeite gerade an meiner ersten Homepage.
Ich habe eine externe css-Style-Datei eingebunden.
Im allgemeinen Besteht die Seite aus drei Spalten und einer Kopf- und Fußzeile.
Als Hintergrundbild habe ich ein jpg Bild verwendet. Dieses Bild visualisiert die drei Spalten (dunkel - hell - dunkel).
Nun möchte ich erstens: Das Bild soll immer komplett gestreckt werden, sowohl waagerech als auch senkrecht.
Zweitens: Die drei Spalten sollen auf die Ausdehnung angepasst werden.
Mein Willkommenseite sieht so aus:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<!-- BEGIN: head -->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Willkommen[Gast]</title>
<!-- Style einbinden -->
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<!-- BEGIN: body -->
<body>
<!-- Kopfzeile einbinden -->
<?php include("kopfzeile.shtml"); ?>
<!-- Navigationsmenü einbinden -->
<?php include("navigation.shtml"); ?>
<!-- BEGIN: Inhalt -->
<div id="Inhalt">
<h2>Willkommen</h2>
<p>Das ist der Gastzugang</p>
<!-- END: Inhalt -->
</div>
<?php include("../fusszeile.php"); ?>
</body>
</html>
HTML:
<div id="Kopfzeile">
<h1>Internetauftritt von Daniel</h1>
</div>
HTML:
<p id="Fusszeile">
<!-- Laufschrift als Fusszeile einbinden -->
<marquee scrollamount="3" scrolldelay="1">
<b>Die Seite ist noch im Aufbau</b>
</marquee>
</p>
HTML:
<!-- Navigationsmenüeinträe erstellen -->
<ul id="Navigation">
<li><a href="willkommen.php">Willkommen</a></li>
<li><a href="gast.php">Gastzugang</a></li>
<li><a href="contactform.php">Kontakt</a></li>
</ul>
HTML:
body {
MARGIN-TOP: 10px;
BACKGROUND: #154D72 url(backgrounds/background.jpg) repeat-x top;
MARGIN-BOTTOM: 10px;
COLOR: #333333;
TEXT-ALIGN: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#Kopfzeile h1{
BACKGROUND: #154D72 url(backgrounds/background_kopfzeile.jpg) repeat-x top;
border-width: medium;
border-style: ridge;
border-color: white;
color: white;
font-size: 1.5em;
margin: 0 0 1.0em 0; padding: 0.7em;
text-align: center;
}
ul#Navigation {
BACKGROUND: #154D72 url(backgrounds/background_nav.jpg) repeat-x top;
border-width: medium;
border-style: ridge;
border-color: white;
font-size: 0.83em;
float: left;
width: 21%;
margin: 0 0 1.2em;
padding: 0;
background-color: gray;
background-repeat: no-repeat;
line-height: 2em;
display: block;
color: #0d2474;
text-decoration: none;
text-align: center;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: black; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Info {
color: white;
border-width: medium;
border-style: ridge;
border-color: white;
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.5em; padding: 0;
background-color: gray;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
align: justify;
color: white;
margin: 0 12em 1em 18em;
width: 52%;
padding: 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
BACKGROUND: #154D72 url(backgrounds/background_fusszeile.jpg) repeat-x top;
border-width: medium;
border-style: ridge;
border-color: white;
color: white;
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #006600;
}