nicht angemeldet
Hallo,
ich möchte folgendes realisieren:
Die ganze Seite soll mit einer festen Grösse in der Mitte des Browserfensters dargestellt werden, das ganze soll vollständig mit CSS, ohne Tabellen oder Frames realisiert werden und muss leider auch im IE funktionieren!
Oben kommt eine Kopfzeile mit darüberliegender horizontaler Nav, dann kommt der Inhalt und unten eine feststehende Fusszeile.
Mein konkretes Problem ist, das ich die Nav nicht auf die Kopfzeile gelegt bekomme, sondern nur zwischen Kopf und Inhalt oder gar nicht sichtbar.
Vom Verständnis her:
Ich mache eine div#Seite mit einer festen Grösse die zentriert dargestellt wird und mit "position: relative" zum Elternelement für folgende div's gemacht wird.
Alle weiteren beziehen sich mit "position: absolute" und der Angabe von "top: YYYpx; left: XXXpx;" darauf und werden entsprechend dargestellt.
Mit "z-index" wird angegeben was vorne stehen soll.
Geht leider so nicht, entweder es wird immer links, oben dargestellt oder eben gar nicht :-(
Vielen Dank für Eure Tips,
Tschüß, Thorolf
Meine HTML:
---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Willkommen</title>
<link rel=stylesheet type="text/css" href="formate.css"></link>
</head>
<body>
<div id="Seite">
<div id="Kopfzeile">
<br>
</div>
<div id="Nav">
<ul id="Navigation">
<li><span>Über uns</span></li>
<li><a href="haupt.htm">Haupt</a></li>
<li><a href="presse.htm">Presse</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
</ul>
</div>
<div id="Inhalt">
<br>
<h1>Willkommen auf den Seiten von mir</h1>
Start Inhalt<br>
<br>
<br>
Ende Inhalt<br>
</div>
<div id="Fusszeile">
<br>
</div>
</div>
</body>
</html>
---------------------------------------
Meine CSS:
---------------------------------------
body {
color: #000000; background-color: #FFFFFF;
font-size: 100.01%;
font-family: Verdana,Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
position: relative
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px; height:600px;
padding: 0;
background: #FFFFFF;
border: 1px ridge silver;
z-index: 1;
}
html>body div#Seite {
border-color: white; /* Farbangleichung an den Internet Explorer */
z-index: 1;
}
div#Kopfzeile {
position: absolute;
top: 0px; left: 0px;
width: 800px; height:200px;
min-height:200px;
padding: 0;
background: #ffffff url(images/header.jpg) no-repeat;
z-index: 2;
}
#Nav {
position: absolute;
top: 160px; left: 100px;
width: 700px; height: 40px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
padding: 0;
background:transparent;
z-index:3;
}
ul#Navigation {
margin: 0; padding: 0;
top:0; left:0;
width: 100%;
background:transparent;
}
ul#Navigation li {
margin: 0.1em; padding: 0;
list-style: none;
display: inline;
}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 2em;
font-size: 70%; font-weight: bold;
color: white; background-color: transparent;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer spaetere Versionen korrigiert */
}
ul#Navigation span {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
ul#Navigation a:link {
text-decoration: none; font-weight: bold;
color: #253D6F; background-color: transparent;
}
ul#Navigation a:visited {
text-decoration: none; font-weight: bold;
color: #253D6F; background-color: transparent;
}
ul#Navigation a:hover {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
ul#Navigation a:active {
text-decoration: none; font-weight: bold;
color: #0071B5; background-color: transparent;
}
div#Inhalt {
position: absolute;
top: 200px; left: 100px;
width: 700px; height: 357px;
min-height: 357px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
background: #F2F8FB;
z-index: 2;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
margin-bottom: 0;
}
div#Inhalt h1 {
font-size: 1.0em;
margin: 0.2em 0;
color: navy;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
div#Fusszeile {
position: absolute;
top: 357px; left: 0px;
width: 800px; height: 43px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
padding: 0;
background: #305085 url(images/footer.jpg) no-repeat;
z-index: 2;
}
---------------------------------------
MudGuard