XHTMLforum - nach einem Menü soll eine Box kommen, doch das Menü ist in der Box

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - nach einem Menü soll eine Box kommen, doch das Menü ist in der Box (http://xhtmlforum.de/showthread.php?t=57719)

michi-muc

15.07.2009 15:43

nach einem Menü soll eine Box kommen, doch das Menü ist in der Box

Ich habe ein Menü erstellt, doch anschliessend soll unterhalb eine Box (#box) erscheinen, doch diese umschliesst alles einschliesslich das Menü!

Menü
----
Box

michi

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head><title>font-style</title>

<style type="text/css">

a.menue_main {        

width: 240px;

padding:7px 0px 7px 0px;                        

text-indent:40px;

float: left;

text-align:left;

font-weight: bold;

font-size: 13px;

text-decoration: none;

border-bottom: 1px solid #CCCCCC;

}

a.menue_main:hover{                           

text-indent:40px;

color:#4CA610;                                                                 

}



#box{

border: 1px solid #CCCCCC;

height:100px;

}



        



</style>

</head>

<body>



<a class="menue_main" href="link">link</a>

<a class="menue_main" href="link">link</a>

<a class="menue_main" href="link">link</a>

<div id="box">Inhalt</div>



</body></html>

heiko_rs

15.07.2009 16:06

Weil ihr clear: left; fehlt (siehe FAQ).

michi-muc

15.07.2009 16:22

Ok, verstehe (fast), aber die box greift doch nicht ganz. Mein Margin-top wird nicht erkannt? Oder bin ich da auch auf dem Holzweg?

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head><title>font-style</title>

<style type="text/css">

a.menue_main {        

width: 240px;

padding:7px 0px 7px 0px;                        

text-indent:40px;

float: left;

text-align:left;

font-weight: bold;

font-size: 13px;

text-decoration: none;

border-bottom: 1px solid #CCCCCC;

clear:left;

}

a.menue_main:hover{                           

text-indent:40px;

color:#4CA610;                                                                 

}



#box{

margin-top:20px;

clear:left;

border: 1px solid #CCCCCC;

height:100px;

}



        



</style>

</head>

<body>



<a class="menue_main" href="link">link</a>

<a class="menue_main" href="link">link</a>

<a class="menue_main" href="link">link</a>

<div id="box">Inhalt</div>



</body></html>

Praktikant

15.07.2009 16:32

Box brauchst das clear:left; nicht, die Links.

Übrigends gehören Navigationen in Listen ;)

heiko_rs

15.07.2009 16:33

Der margin-top wird immer erkannt, aber ohne clear beginnt er genau da, wo auch der float beginnt, und mit clear überlappt er den Float, wirkt also erst, wenn er größer ist als die Höhe des Floats (und auch dann logischerweise nur um die Differenz).

Der Float braucht margin-bottom, wenn ein Non-Float (bzw. ein Element, das keinen neuen Block-Formatting-Context erzeugt) nach unten geschoben werden soll.

michi-muc

15.07.2009 17:07

Fast verstehe ich es jetzt, ich habe nun um die Links eine zweite Box gelegt, so das sie jetzt eigentlich untereinander erscheinen sollten.

Code:

a.menue_main {        

width: 240px;

padding:7px 0px 7px 0px;                        

text-indent:40px;

float: left;

text-align:left;

font-weight: bold;

font-size: 13px;

text-decoration: none;

border-bottom: 1px solid #CCCCCC;

clear:left;

}

a.menue_main:hover{                           

text-indent:40px;

color:#4CA610;                                                                 

}



#box{

border: 1px solid #CCCCCC;

margin-bottom:20px;

}        



#box1{

border: 1px solid #CCCCCC;

height:100px;

clear:left;

}

Wenn im Inhalt <br><br><br> steht funktioniert es

<div id="box"><br><br><br></div>
<div id="box1">Inhalt</div>

Wenn ich allerdings die Link reinmache, geht es nicht mehr

<div id="box">
<a class="menue_main" href="link">link</a>
<a class="menue_main" href="link">link</a>
<a class="menue_main" href="link">link</a>
</div>
<div id="box1">Inhalt</div>

fricca

15.07.2009 17:15

Das Element #box schließt die Floats nicht ein, es hat die Höhe Null. Deshalb siehst du auch nichts von dem unteren Margin.
Warum floatest du überhaupt deine Links, wenn du sie doch untereinander haben willst?

Nochmal der Hinweis: Eine Navigation gehört in eine Liste, schließlich ist es eine Auflistung von Links.
Und bevor du jetzt weiter mit Float und Clear herumstocherst empfehle ich, zuerst die Artikel unter FAQ Punkt 2 zu studieren. Das Thema ist alles andere als banal -- und du solltest dich zunächst in die Grundlagen einlesen.

Und bitte: Poste nie Schnipsel, sondern immer vollständigen Code. Niemand hat Zeit herumzubasteln. Am besten ist immer noch ein Link zum Problem.

Alle Zeitangaben in WEZ +2. Es ist jetzt 15:23 Uhr.