Hallo ich habe ein kleines Problem.
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
<!-- 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
/*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;
}Leider habe ich keine Idee wo hier mein Fehler liegt...
Es wäre schön wenn mit jemand einen Tipp geben könnte.
Ich habe ein abgeändertes Beispiel aus einem Buch, welches ich als Grundlage heranziehe, in meinen public Folder der Dropbox hoch geladen. Ziel ist es eben das Logo in die obere schwarze Grafik auszulagern.
http://dl.dropbox.com/u/6915032/beispiel.zip
MfG
mephisto2k