Frage stellen
Mein Ziel ist es eine Website zu erstellen welche aus vier horizontalen streifen besteht.
-oben.gif (Grafik 1024x129px)
-mitte.gif (Grafik 1024x446px) hier befindet sich die Navigation, daher die Höhe.
-inhalt.gif (Grafik 1024x1px)
-unten.gif (Grafik 1024x105px)
und wichtig, hier liegt auch mein Problem,
-logo.png (Grafik 326x89px)
Ich habe nun vor die "logo.png" im Bereich der "oben.gif" zu platzieren.
Das gelingt mir leider nicht. Das Logo liegt immer ganz oben im Bereich der "mitte.gif".
Was habe ich gemacht:
HTML
- Code: Alles auswählen
<!-- Branding Start -->
<h1 class="logo">ff ff ff ff ff</h1><!-- Mittels text-indent: -9999px; ausgeblendet -->
<blockquote class="info">
<p>text text text text</p><!-- Mittels text-indent: -9999px; ausgeblendet -->
</blockquote>
<!-- Branding Ende -->
CSS
- Code: Alles auswählen
/*importiert normalisierung.css*/
@import url("norm.css");
/*Seitenbreite fixieren und Seite zentrieren*/
body {
position: relative;
margin: 0 auto; /*Aussenabstand oben & unten ist null*/
text-align: center;
width: 1024px;
border: 1px solid #cd5c5c;
font-size: 100.01%;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
background: black;
color: white;
}
/*_+++ Kopf Grafik +++ */
div#oben {
background:url(../images/layout/oben.gif) no-repeat center top;
position: relativ;
width: 1024px;
height: 129px;
}
/*_+++ Mittel Grafik +++ */
div#wrapper {
background:url(../images/xmitte.gif) repeat-y center;
position: relative;
width: 1024px;
text-align: left;
}
h1.logo {
background:url(../images/layout/logo.png) no-repeat; /*Hintergrundgrafik mit Logo*/
text-indent: -9999px;
/*Der Text wird weit außerhalb des Browser Fensters angezeigt,
dafür wird die Hintergrundsgrafik plaziert*/
width: 326px;
height: 89px;
position: relative;
left: 680px;
}
Ich habe keine Idee wo hier mein Fehler liegt.
Es wäre schön wenn mit jemand einen Tipp geben könnte.
MfG
Nero
