nicht angemeldet
"float: left" richtig genutzt?!?
hallo mal wieder,
ich schlage mich immer noch mit css rum, ich steig da erst so langsam hinter... ;)
folgendes möchte ich realisieren:
ich möchte ein farbiges rechteck haben, in dem meine n avigation angezeigt wird... dabei sollen die 6 menüpunkte in 3x2 aufgeteilt und linksbündig in dem genannten rechteck angezeigt werden...
so sollte es also aussehen:
-------------------------------------------------------------
| |
| menüpunkt1 menüpunkt2 menüpunkt3 |
| menüpunkt4 menüpunkt5 menüpunkt6 |
| |
-------------------------------------------------------------
also habe ich folgendes versucht:
[html]
<div class="box">
<a href="link.php">menüpunkt1</a>
<a href="link.php">menüpunkt2</a>
<a href="link.php">menüpunkt3</a>
<a href="link.php" class="clear">menüpunkt4</a>
<a href="link.php">menüpunkt5</a>
<a href="link.php">menüpunkt6</a>
</div>
[css]
div.box {
background-color: #194462;
color: #F5F5F5;
margin-top: 5px;
}
div.box a {
display: block;
float: left;
width: 100px;
color: #F5F5F5;
text-decoration: none;
text-align: right;
padding-left: 10px;
}
div.box a.clear {
clear: both;
}
folgendes funktioniert dabei aber nicht:
1. die navi sieht folgendermassen aus:
----------------------------------------------------------------------------------------
| |
| menüpunkt1 menüpunkt2 menüpunkt3 menüpunkt5 menüpunkt6 |
| menüpunkt4 |
| |
----------------------------------------------------------------------------------------
also nur der 4.menüpunkt, der "clear: both" im css hat, wird in die nächste zeile verschoben... sollte da nicht alles was nachfolgend ist auch gecleart werden?!? und wenn nicht, warum nicht?!?
2. was fast noch "schlimmer" ist... die hintergrundfarbe der div.box wird gar nicht angezeigt... warum das denn schon wieder?!?
muss ich etwa die menüpunkte 1&4 bzw. 2&5 und 3&6 noch mal in eigene divs packen, die ich dann komplett floate?!?
danke schon mal...
der paule
-
<div class="box">
<a href="link.php">menüpunkt1</a>
<a href="link.php">menüpunkt2</a>
<a href="link.php">menüpunkt3</a><br class="clear" />
<a href="link.php">menüpunkt4</a>
<a href="link.php">menüpunkt5</a>
<a href="link.php">menüpunkt6</a>
</div>[css]
div.box {
background-color: #194462;
color: #F5F5F5;
margin-top: 5px;
}
div.box a {
display: block;
float: left;
width: 100px;
color: #F5F5F5;
text-decoration: none;
text-align: right;
padding-left: 10px;
}
div.box a.clear {
clear: both;
}so sollte es funtionieren.
MfG
Klaus-
hi klaus,
danke dir schon mal, allerdings war's das nicht ganz:
so hat's gefunzt:
<div class="box">
<a href="link.php">menüpunkt1</a>
<a href="link.php">menüpunkt2</a>
<a href="link.php">menüpunkt3</a>
<br class="clear" />
<a href="link.php">menüpunkt4</a>
<a href="link.php">menüpunkt5</a>
<a href="link.php">menüpunkt6</a>
<br class="clear" />
</div>wenn ich das weglasse, wird der menüpunkt 4 nicht angezeigt (hab's jetzt nur im ie getestet...)
allerdings habe ich nun noch ein prob:
ich habe ja die links mit "width: 100px" definiert... wenn ich die links nicht floate, kann ich auch über die komplette breite auf den link klicken, nicht nur dort wo text ist...
in meinem fall geht das aber nur noch, wenn ich den ersten menüpunkt anklicke, bei allen anderen habe ich meinen eingebauten hover-effekt nur noch, wenn ich direkt auf den text zeige...ist das verständlich...?!?
;)und lässt sich das auch lösen?!?
danke!
paulbrause-
Wenn ich mich richtig erinnere ist dies ein IE-Problem.
Lösung - soweit ich weiß: kein
MfG
Klaus -
Hi,
zunächt mal zur Erklärung des Phänomens: Das Problem bereitet hier nicht float, sondern clear - siehe: http://www.1ngo.de/web/clear.html.
Der Trick mit dem clearenden <br> nd Leerzeichen funktioniert zwar, aber ist wohl für das Folgeproblem im IE verantwortlich. Abhilfe würde eine ganz andere Struktur schaffen, die ohne clear auskommt. In etwa so:
<div class="box">
<div>
<a href="link1.php">menüpunkt1</a>
<a href="link4.php">menüpunkt4</a>
</div>
<div>
<a href="link2.php">menüpunkt2</a>
<a href="link5.php">menüpunkt5</a>
</div>
<div>
<a href="link3.php">menüpunkt3</a>
<a href="link6.php">menüpunkt6</a>
</div>
<div class="clear"></div>
</div>und dazu im CSS das float nicht für a definieren, sondern:
div.box div { float: left; width:100px; }freundliche Grüße
Ingo-
danke dir erstmal für den tip, gebracht hat's trotzdem nix...
Der Trick mit dem clearenden <br> nd Leerzeichen funktioniert zwar, aber ist wohl für das Folgeproblem im IE verantwortlich.
ich glaube nicht, dass das clear den fehler im ie verursacht, sondern das float... denn ich habe mal deine struktur übernommen (vor dem "<div class="clear"></div>" musste ich allerdings auch hier ein " <br> " sezten, sonst wurde mir die hintergrundfarbe der box nicht angezeigt...), und anschliessend aus testzwecken mal das "<div class="clear"></div>" herausgenommen und es ging immer noch nicht...
hab das ganze auch mal hochgeladen, vielleicht hilft das irgendwie weiter:
http://www.christian-pawlak.de/test/index.php
http://www.christian-pawlak.de/test/styles/styles.cssgibt's denn ausserdem noch eine möglichkeit, das irgendwie in css zu lösen?!? es gibt diesen bug auch nur in dem verlixten ie, opera, netscaope und mozilla können's... bin schon wieder kurz davor auf tabellen zurückzugreifen...
:(
mfg,
paulbrause-
Hi,
ich glaube nicht, dass das clear den fehler im ie verursacht,
ich denke schon.
Wenn Du in deiner Testseite statt
<br>ein clearendes Element wie z.b.
<p style="margin:0; clear:left;"></p>(hier jetzt genommen, weil Du DIV ja mit etlichen Eigenschaften vordefiniert hast)
einstetzt, dann verschwindet das Problem.freundliche Grüße
Ingo-
ich sehe schon, mit dir sollte ich mich nicht anlegen...
;)tatsächlich, jetzt funktioniert es, so wie es soll...
ich danke dir!!!!
-
-
-
-
-