Schönen guten...Abend, Community.
ich bastel seit geraumer Zeit an einem Speziellen Layout rum, bekomm' das aber nicht so hin, wie ich's gern hätte...
also hier erstmal eine Grafik dazu:
http://sephcom.se.funpic.de/pagelayout.png
So...jetzt zur Erklärung:
Das ganze soll natürlich mit DIVs geregelt werden...
so und nun zu den einzelnen DIVs...
Header:
Der Header hat keinen Abstand zum oberen Rand.
Im Header-DIV wird ein Bildangezeigt mit den Maßen 325x182, und muss zentriert angezeigt werden.
Mehr gibts dazu nicht zu sagen...
Infobar:
Die darunterliegende Infobar muss genau am Header-Anschließen (also 0px Rand zum Header)
Sie darf nur 20px hoch sein und muss etwa 15% vom linken und rechten Rand entfernt sein.
Nav1:
Die Nav1 muss 3% vom linken Rand entfernt sein und überlappt über Infobar und ein Stück über Header (also etwa 120px vom Bildschirm-Rand entfernt)
Der Text darin muss zentriert sein
Nav2:
Die Nav2 muss parallel zur Nav1 sein, also 3% vom rechten Rand, sonstiges genauso.
Content:
Der Content soll einige Pixel (10 etwa) unter der Infobar sein, aber ebenfalls vom linken und rechten rand 15% entfernt sein.
Da der Text sich sonst hinter Nav1 und Nav2 verbirgt, muss der Innere Rand (padding) nochmals so sein, dass der text NICHT unter Nav1 bzw Nav2 verschwindet.
Footer:
Jetzt das ding, was mir die Probleme bereitet..
Dieses Teil muss relativ zum Conten ausgerichtet werden,
Es soll etwa 10px unter Conten angezeigt werden, sodass bei höherer Auflösung der Footer "verschwindet" und sich nicht über den Content legt (also beim Runterscrollen sichtbar wird)
Ich hoffe ihr wisst, was ich meine...ich bekomme das allerdings nicht so hin...
mein CSS-Code sieht derzeit so aus:
ich bastel seit geraumer Zeit an einem Speziellen Layout rum, bekomm' das aber nicht so hin, wie ich's gern hätte...
also hier erstmal eine Grafik dazu:
http://sephcom.se.funpic.de/pagelayout.png
So...jetzt zur Erklärung:
Das ganze soll natürlich mit DIVs geregelt werden...
so und nun zu den einzelnen DIVs...
Header:
Der Header hat keinen Abstand zum oberen Rand.
Im Header-DIV wird ein Bildangezeigt mit den Maßen 325x182, und muss zentriert angezeigt werden.
Mehr gibts dazu nicht zu sagen...
Infobar:
Die darunterliegende Infobar muss genau am Header-Anschließen (also 0px Rand zum Header)
Sie darf nur 20px hoch sein und muss etwa 15% vom linken und rechten Rand entfernt sein.
Nav1:
Die Nav1 muss 3% vom linken Rand entfernt sein und überlappt über Infobar und ein Stück über Header (also etwa 120px vom Bildschirm-Rand entfernt)
Der Text darin muss zentriert sein
Nav2:
Die Nav2 muss parallel zur Nav1 sein, also 3% vom rechten Rand, sonstiges genauso.
Content:
Der Content soll einige Pixel (10 etwa) unter der Infobar sein, aber ebenfalls vom linken und rechten rand 15% entfernt sein.
Da der Text sich sonst hinter Nav1 und Nav2 verbirgt, muss der Innere Rand (padding) nochmals so sein, dass der text NICHT unter Nav1 bzw Nav2 verschwindet.
Footer:
Jetzt das ding, was mir die Probleme bereitet..
Dieses Teil muss relativ zum Conten ausgerichtet werden,
Es soll etwa 10px unter Conten angezeigt werden, sodass bei höherer Auflösung der Footer "verschwindet" und sich nicht über den Content legt (also beim Runterscrollen sichtbar wird)
Ich hoffe ihr wisst, was ich meine...ich bekomme das allerdings nicht so hin...
mein CSS-Code sieht derzeit so aus:
Code:
@charset "utf-8";
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-color: #FFFFCC;
}
a {
text-decoration:none;
}
a:link {
color:#6699FF;
}
a:visited {
color:#6699FF;
}
a:hover {
color:#FF99FF;
}
#header {
top: 0px;
right: 0px;
left: 0px;
text-align: center;
position: absolute;
z-index: 1;
}
#mailbar {
top: 182px;
left: 15%;
right: 15%;
height: 20px;
padding-top: 3px;
border-width: thin;
border-style: solid;
border-color: #33CCFF;
background-color: #FFFFFF;
text-align: center;
position: absolute;
z-index: 1;
}
#content {
left: 15%;
right: 15%;
top: 215px;
height: 60%;
overflow: auto;
padding-left: 5%;
padding-right: 5%;
padding-top: 5px;
border-width: thin;
border-style: solid;
border-color: #33CCFF;
background-color: #FFFFFF;
position: absolute;
z-index: 1;
}
#navbar {
top: 120px;
left: 3%;
right: 82%;
border-width: thin;
border-style: solid;
border-color: #33CCFF;
background-color:#FFFFFF;
text-align: center;
position: absolute;
z-index: 2;
}
#statusbar {
top: 120px;
left: 82%;
right: 3%;
border-width: thin;
border-style: solid;
border-color: #33CCFF;
background-color:#FFFFFF;
text-align: center;
position: absolute;
z-index: 2;
}
#navpoint {
text-align: center;
text-decoration: underline;
font-weight: bold;
font-variant: small-caps;
background-color: #CCCCCC;
}
#footer {
top: 10px;
left: 0px;
right: 0px;
text-align: center;
position: absolute;
z-index: 1;
}
#lfloat {
float: left;
}
#rfloat {
float:right;
}
sieht genau so aus, wie ich es haben wollte 
