Hintergrund und Float

Status
Nicht offen für weitere Antworten.
js-mueller

js-mueller

Erfahrenes Mitglied
HI, ich hab ein Problem und zwar hab ich eine kleine Leiste oben auf der Webseite eingestellt als Hintergrund.
Dann wollt ich meinen Banner darüber bauen, welcher aus 2 teilen besteht. Aber sobald ich die beiden Teile per float: left; und float: right zusammen füge wird am ende des banners ( Nach 930px) die Hintergrundleiste auch abgeschnitten. Woran mag das liegen?

Code: 
<?xml version="1.0" encoding="iso-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-stricht-dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <link rel="stylesheet" type="text/css" href="css/roemms_aufbau.css" />
    </head>
    <body>
        <div style="width: 100%; background: url('grafiken/index/kopf_leiste.png'); background-position: top; background-repeat: repeat-x;">
            <div style="width: 930px;">
                <div style="width: 653px; height: 248px; background: url('grafiken/index/kopf.png'); float: left;">
                </div>
                <div style="width: 277px; height: 248px; background: url('grafiken/index/kopf_mitglied.png'); float: right;">
                </div>
            </div>
        </div>
    </body>
</html>


edit: Bei 2 mal float: left; passier das selbe
 
Bei mir wird das äussere DIV in keinem Browser 'abgeschnitten' :confused:

Damit in den non-IE-Browsers (FireFox, Mozilla, Netscape, Opera) die floatenden DIVs innerhalb des Parent-DIVs angezeigt werden, ist nach den floatenden DIVs ein Element mit der CSS-Eigenschaft clear:both erforderlich:

Code: 
<div style="width: 100%; background: url('grafiken/index/kopf_leiste.png'); background-position: top; background-repeat: repeat-x; border: 1px solid #000;">
            <div style="width: 930px; border: 1px solid #000;">
                <div style="width: 653px; height: 248px; background: url('grafiken/index/kopf.png'); float: left;">banner 1</div>
                <div style="width: 277px; height: 248px; background: url('grafiken/index/kopf_mitglied.png'); float: right;">banner 2
                </div>
                <div style="clear:both; height: 0; font-size:0; margin: 0; padding: 0;"></div>
            </div>
        </div>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Ah neues entdeckt ;-)
Die Hintergrundgrafik wird einfach nicht mehr angezeigt. Der Div wird nicht abgeschnitten sondern die Leiste ist einfach nicht mehr zu sehen. Woran mag das liegen?
 
Kannst du die Seite mal online stellen, damit wir das vermeintliche Darstellungsproblem sehen können? Vielen Dank ;)
 
Probier's mal so:

HTML: 
<div style="width: 100%; background: url('grafiken/index/kopf_leiste.png'); background-position: top; background-repeat: repeat-x; border: 1px solid #000;">
            <center><div style="width: 930px;">
                <div style="width: 653px; height: 248px; background: url('grafiken/index/kopf.png'); float: left;"></div>
                <div style="width: 277px; height: 248px; background: url('grafiken/index/kopf_mitglied.png'); float: left;"></div>
                <div style="clear:both; height: 0; font-size:0; margin: 0; padding: 0;"></div>
            </div></center>
        </div>
 
Den Grund dafür weiss ich auch nicht so genau. Vermutlich hängt es aber mit der 100%-Weitenangabe für das DIV zusammen.

Anmerkung: in meiner Signatur findest du noch einen Tipp. Vielen Dank ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück