Seitenaufbau mit div's - wo steckt der Fehler? :-)

martinfre

Erst mal der bisherige Quellcode:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/view.css" />
<title>WORKBUS MASK</title>
</head>


<body>
<div style="width:977px">
    <div style="position:relative; clear:both;">
        <img src="images/banner.jpg" width="977" height="175" alt="banner" />
    </div>
    <div style="text-align:right; width:auto; line-height:40px; position:absolute; vertical-align:middle; color:#E66D10; clear:both;">
        <span style="margin-right:20px; text-decoration:underline;">Startseite</span>
        <span style="margin-right:20px;">Neuer Auftrag</span>
        <span style="margin-right:20px;">Profil</span>
        <span style="margin-right:20px;">Firmenadministratio</span>
        <span style="margin-right:20px;">Abmelden</span>
        <span>(Manfred Muster)</span>
    </div>
    <div style="width:auto; border:1px solid #000000; clear:both;">
        <div style="width:732px; line-height:30px; position:absolute; vertical-align:middle; background-image:url(images/grey_row.png); background-repeat:no-repeat; margin-top:40px; float:left;">
            <span style="text-decoration:underline; margin-left:15px; float:left;">Aktuelle Auftr&auml;ge</span>
            <span style="margin-right:15px; float:right;">Abgeschlossene Auftr&auml;ge</span>
        </div>
        <div style="width:245px; float:right; margin-top:40px;">
            <img src="images/froebus_logo.jpg" width="239" height="159" alt="froebus_logo" />
        </div>
    </div>
    <div></div>
</div>
</body>
</html>

Alles anzeigen

So sieht das ganze nun im Browser aus:
http://easycaptures.com/0814491235

Was ich nicht verstehe ist folgendes:
Man sieht direkt unter dem Header-Bild eine schwarze Linie. Das ist wohl das "border:1px solid #000000;". Wieso aber wird dies direkt unter dem Bild angezeigt. Laut Code dürfte das div doch erst nach dem Menü (Startseite, Neuer Auftrag, etc) kommen. Und eigentlich schließt das div ja noch weitere div's ein. Dh eigentlich müsste doch ein schwarzes Viereck zu sehen sein, in dem die beiden unteren div's plaziert sind.

Ich hoffe, dass mir jmd weiter helfen kann.

Danke schon mal im voraus!

Afrael

Ich kann dir nicht auf Anhieb helfen, aber vielleicht hilft es, wenn du dir das Web Developer-Addon für Firefox runterlädst und dir da unter Information "Display Div Order" anzeigen lässt.
Ansonsten könntest du das border:1px solid #000000; ja testweise rausnehmen und gucken, ob es wirklich daran liegt.

Jericho

Es wäre besser, wenn du ne URL statt nem Bild posten würdest...dann kann man sich das Verhalten der einzelnen Divs direkt angucken und muss net rumraten...

martinfre

Das FF Addon nutze ich, jedoch hilft es mir gerade leider nicht weiter.
Habe den ganzen Kram lokal liegen und kann daher keine URL posten.

Ich fange mal etwas grundlegender an. Verstehe nicht wo ich nen Fehler mache.

Code

<div style="width:800px;">
    <div style="width:auto; height:100px; background-color:green; clear:both;">header</div>
    <div style="clear:both; width:auto; background-color:blue;">nav</div>
    <div style="clear:both; width:auto; background-color:grey;">main
        <div style="float:left; width:200px; height:300px; z-index:3; background-color:black;">col1</div>
        <div style="float:right; width:200px; height:300px; z-index:5; background-color:red;">col2</div>
    </div>
</div>

Müssten in diesem Fall die beiden letzten div's (col1 und col2) nicht innerhalb des grauen div's liegen?

chris90night

Du hast vergessen, zu clearen: "Wo gefloatet wird, muss auch gecleart werden."

Also nach den zwei Containern einfach noch ein

Code

<div style="clear:both;"></div>

einfügen.
Und wo wir schon dabei sind: Du musst nicht jedes Mal ein "clear:both;" angeben, wenn du den Container erst in der nächsten Zeile haben willst.
Das funktioniert automatisch, da <div> ein Block-Element ist und automatisch die maximal verfügbare Breite annimmt, wenn nicht anders definiert.

MfG, Chris

martinfre

Ich hab einfach zwischenzeitlich überall ein clear reingepackt, weil ich am verzweifeln bin. Eigentlich hatte ich noch nie Probleme mit div's, aber gerade komme ich kein Stück weiter.

Welche Stelle meinst du mit "nach dem zweiten Container"?

Meinst du nach
<div style="clear:both; width:auto; background-color:blue;">nav</div>
folgendes einfügen?
<div style="clear:both;"></div>

Jericho

Er meint:

HTML

<div style="width:800px;">
    <div style="width:auto; height:100px; background-color:green; clear:both;">header</div>
    <div style="clear:both; width:auto; background-color:blue;">nav</div>
    <div style="clear:both; width:auto; background-color:grey;">main
        <div style="float:left; width:200px; height:300px; z-index:3; background-color:black;">col1</div>
        <div style="float:right; width:200px; height:300px; z-index:5; background-color:red;">col2</div>
        <div style="clear:both"></div>
    </div>
</div>

Du musst wenn 2 oder mehrere Elemente in einem Anderen floaten, nach den Floats clearen, weil sich wie in deinem Fall das äußere Div nicht um seinen Inhalt rum spannt...

chris90night

Genau. Danke Jericho!

Des Weiteren würde ich dir empfehlen, dass du die Farbcodes verwendest, statt ihre Trivialnamen. Dann hast sowieso mehr Auswahl

Jericho

Das wichtigste wäre wohl, keine Inline-Styles, mach ne externe CSS Datei und schmeiß die ganzen überflüssigen clears raus

Tags