Gefloatete Bilder überschwemmen die ganze Seite

[malte]

Moin Moin,
erstmal Danke für die schnelle Beantwortung meiner Frage beim letzten Mal!

Und hier ist schon wieder ein Problem, bei dem ich durch Recherche und endloses Rumprobieren nicht weiterkomme.
wie ihr auf (http://mapo.zzl.org/html/) sehen könnt wird der Header zwar korrekt dargestellt aber seine Bestandteile setzen sich munter über den Rest der Seite und interessanterweise auch dahinter fort.
Da dieses Problem aufgetreten ist, nachdem ich die Navi-Liste erstellt und mit Float versehen habe, und weil sich der Fehler scheinbar anhand des übergeordneten (wrapper bzw. hg) Tags ausbreitet vermute ich, dass es mit Float bzw. Clear zu tun hat, aber ich komm einfach nicht dahinter.

Da die übergeordneten Elemente auch eine Rolle zu spielen scheinen, hab ich den Code nur leicht gekürzt, in der Hoffnung man möge mir das ausnahmsweise einemal verzeihen.

Mit freundlichen Grüßen, Malte

<div id="wrapper">

<div id="header-oben"></div>
<div id="header-links"></div>
<div id="header-navi">
<ul>
<li id="malerei"><a href="#">Malerei</a></li>
<li id="zeichnungen"><a href="#">Zeichnungen</a></li>
<li id="fotografie"><a href="#">Fotografie</a></li>
<li id="komdes"><a href="#">Kommunikationsdesign</a></li>
</ul>
</div>
<div id="header-rechts"></div>

<div id="content">
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte...</p>
</div>

<div id="footer-links"></div>
<div id="footer-navi"></div>
<div id="footer-rechts"></div>
<div id="footer-unten"></div>

</div>

body {
background-image: url(../bilder/hg/rapport-hg.jpg);
background-repeat: repeat;
position: absolute;
overflow: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 120%;
color: #000;
}
#wrapper {
position: relative;
width: 1024px;
margin-top: 150px;
margin-right: auto;
margin-bottom: 150px;
margin-left: auto;
}
#header-oben {
background-image: url(../bilder/leinwand/header-oben_s1.png);
height: 11px;
width: 1024px;
float: left;
background-repeat: no-repeat;
}
#header-links {
background-image: url(../bilder/leinwand/header-links_s1.png);
height: 145px;
width: 20px;
top: 12px;
float: left;
background-repeat: no-repeat;
}
#header-rechts {
background-image: url(../bilder/leinwand/header-rechts_s1.png);
height: 145px;
width: 33px;
top: 12px;
left: 971px;
float: left;
background-repeat: no-repeat;
}
#header-navi {
height: 145px;
width: 971px;
top: 11px;
left: 20px;
float: left;
}
#malerei {
float: left;
height: 145px;
width: 259px;
text-indent: -9999px;
background-repeat: no-repeat;
background-image: url(../bilder/navi/navi-malerei_s1.jpg);
left: 20px;
}
#zeichnungen {
background-image: url(../bilder/navi/navi-zeichnungen_s1.jpg);
background-repeat: no-repeat;
float: left;
height: 145px;
width: 231px;
text-indent: -9999px;
left: 279px;
}
#fotografie {
background-image: url(../bilder/navi/navi-fotografie_s1.jpg);
height: 145px;
width: 224px;
float: left;
background-repeat: no-repeat;
text-indent: -9999px;
left: 510px;
}
#komdes {
background-image: url(../bilder/navi/navi-komdes_s1.jpg);
background-repeat: no-repeat;
float: left;
height: 145px;
width: 257px;
text-indent: -9999px;
left: 734px;
}

#content {
width: 1024px;
background-image: url(../bilder/leinwand/rapport-leinwand_s1.png);
background-repeat: repeat-y;
top: 156px;
clear: left;
}

#content p {
padding-right: 40px;
padding-left: 20px;
padding-top: 100px;
}
#footer-links {
background-image: url(../bilder/leinwand/footer-links_s1.png);
height: 148px;
width: 20px;
float: left;
}
#footer-navi {
height: 213px;
width: 987px;
left: 4px;
float: left;
}
#footer-rechts {
background-image: url(../bilder/leinwand/footer-rechts_s1.png);
height: 148px;
width: 33px;
left: 991px;
float: left;
}
#footer-unten {
background-image: url(../bilder/leinwand/footer-unten_s1.png);
height: 49px;
width: 1024px;
clear: left;
}

[sejuma]

Du hast die sich wiederholende Grafik hier eingebunden:

Code: Alles auswählen

* {
   margin:0px;
   padding:0px;
   background-image: url(../bilder/navi/navi-komdes_s1.jpg);
}

Der * ist ein Universalselektor und seine Inhalte gelten folglich für sämtliche anderen Elemente.
Nimm also hier die Hintergrundgrafik raus.

[malte]

Danke, Sejuma!
Ich muss zugeben, dass mir die Aktion ein wenig peinlich ist. Ich weiß zwar, was ein Universalselektor ist und wie man ihn anwendet aber das hilft scheinbar auch nicht gegen Sekundenschlaf, infolgedessen mein Kopf auf die Tastatur geknallt und genauso über die Tasten gerollt sein muss, dass der korrekte Pfad zur Grafik dabei rauskam (Ich arbeite mit Dreamweaver und setzte die Links per Drag and Drop, wahrschienlich ist der Corsor vorher verrutscht). Und wie das halt so ist, sieht man Dinge, die leicht zu entdecken sind einfach nicht. Die ersten 10 Zeilen hab ich mir nie wieder angesehen, nachdem ich sie geschrieben hatte.
Also Danke für die fixe Antwort und auch dafür, dass es tatsächlich Leute gibt, die sich immer wieder mit fleischgewordenen Bugs wie mir rumschlagen!

[sejuma]

Null Problem. Vier Augen sehen eben mehr als zwei.
Das geht doch mir und jedem anderen genauso.