PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS Fragen - float left? float right

/dev/NULL
2005-10-16, 18:13:42
Ich hab auch mal ne CSS Frage:

Ich möchte eine Navigationsleiste bauen die links 5 Punkte hat und rechts auch noch 3.. dadrunter soll ein Navigationspfad (wo bin ich) sein.

Wie mache ich das am geschicktesten?

Mein Versuch bisher (nur relvante Snippets):

div.navigation{
display:block;
border: solid blue 3px;
background:gray;
}

div.clink a {
padding: 5px;
border-width:0 3px;
margin: 0px 0px 2px;
text-align: center;
text-decoration: none;
}

div.clink a:hover {
border-right:#313131 3px solid;
border-left: #313131 3px solid;
}

.floatleft{
float:left;
}
.floatr{
float:right;
}




<div class="navigation">
<!-- Navigationsleiste -->
<div class="clink floatleft">
<a href="home.html">links</a>
<a href="links1.html">links1</a>
<a href="links2.html">links2</a>
<a href="links3.html">links3</a>
<a href="links4.html">links4</a>
</div>
<div class="clink">
<a href="agb.html">AGB</a>
<a href="impressum.html">IMPRESSUM</a>
<a href="kontakt.html">KONTAKT</a>
</div>
</div>
<!-- Pfadleiste -->
<div class="navigation_pfad">
--&gt; Home
</div>


So sind die ganzen Menüpunkte in einer Zeile die Pfadleiste brav drunter.. aber alle Menüelemente sind nebeneinander. gebe ich dem 2. clink block noch einen floatr, sind die Elemente zwar rechts, aber die Pfadleiste rutscht hoch und hängt irgendwo dazwischen.. Hätte jetzt gedacht dadurch das ich da nen div drum mache spielt sich alles innerhalb des divs ab (und die Pfad navigation ist dadrunter) aber das ist wohl nen Denkfehler gewesen..
Nase
2005-10-16, 21:10:32
Du musst einfach nach dem floatr-Container noch einen Container mit clear: both; setzen.
/dev/NULL
2005-10-16, 22:07:56
Jup.. das scheint zu gehen.
Aber: warum sind dann die beiden clinks nicht in dem umspannenden div (navigation), ich hätte vermutet das sie den grauen Hintergrund des umspannenden div bekommen.. Hier nochmal ne komplette Page..

Nimmt man das floatr raus ist zwar der Pfad drunter, aber halt die rechten drei sind nicht daneben.. nimmt man es rein ist die Navigation ok, aber der Hintergrund stimmt nicht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />
<style type="text/css"><!--

div.navigation{
display:block;
border: solid blue 3px;
background:gray;
}

div.clink a {
padding: 5px;
border-width:0 3px;
margin: 0px 0px 2px;
text-align: center;
text-decoration: none;
}

div.clink a:hover {
border-right:#313131 3px solid;
border-left: #313131 3px solid;
}

.floatleft{
float:left;
}
.floatr{
float:right;
}

div.clear{
clear: both;
}
//--></style>
</head>
<body>
<div class="navigation">
<!-- Navigationsleiste -->
<div class="clink floatleft">
<a href="home.html">HOME</a>
<a href="links1.html">Ganz tolle Link</a>
<a href="links2.html">Toller Text</a>
<a href="links3.html">Blup</a>
<a href="links4.html">bla</a>
</div>
<div class="clink floatr">
<a href="agb.html">AGB</a>
<a href="impressum.html">IMPRESSUM</a>
<a href="kontakt.html">KONTAKT</a>
</div>
</div>
<!-- Pfadleiste -->
<div class="clear">
<div class="navigation_pfad">
--&gt; Home
</div>
</div>
</body>
Nase
2005-10-16, 22:22:23
Ich meinte das eher so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />
<style type="text/css"><!--

div.navigation{
display:block;
border: solid blue 3px;
background:gray;
}

div.clink a {
padding: 5px;
border-width:0 3px;
margin: 0px 0px 2px;
text-align: center;
text-decoration: none;
}

div.clink a:hover {
border-right:#313131 3px solid;
border-left: #313131 3px solid;
}

.floatleft{
float:left;
}
.floatr{
float:right;
}

div.clear{
clear: both;
}
//--></style>
</head>
<body>
<div class="navigation">
<!-- Navigationsleiste -->
<div class="clink floatleft">
<a href="home.html">HOME</a>
<a href="links1.html">Ganz tolle Link</a>
<a href="links2.html">Toller Text</a>
<a href="links3.html">Blup</a>
<a href="links4.html">bla</a>
</div>
<div class="clink floatr">
<a href="agb.html">AGB</a>
<a href="impressum.html">IMPRESSUM</a>
<a href="kontakt.html">KONTAKT</a>
</div>
<div class="clear"></div>
</div>
<!-- Pfadleiste -->
<div class="navigation_pfad">
--&gt; Home
</div>
</body>
</html>
/dev/NULL
2005-10-16, 22:33:23
Ahh.. ändert aber nichts an meinem Problem: die Hintergrundfarbe bei den clinks ist dann transparent, nicht grau vom umfassenden Container.

Tips?
Nase
2005-10-16, 22:41:20
Ähm ... hä?

Ich hab hier nen div mit grauem Hintergrund und blauem Rahmen, in dem die Links stehen (auch in blauer Farbe). Beim hovern werden dann links und rechts graue Rahmen hinzugefügt. Das " --> Home" steht unter dem Navigationsdiv. Ist doch so, wie es sein sollte?
/dev/NULL
2005-10-16, 22:54:24
Oh.. ist bei mir im Opera und IE nicht so *gnarf*

Nachtrag: lesen sollte man können.. hab mein clear außerhalb des navigation divs gemacht... drinnen gehts.. ich danke!

Allerdings werde ich wohl noch oft wieder kommen: Wollte in nem header div nen background immage machen das zeigen Opera und FF auch wunderbar an, der IE sieht da nix *grumpf* naja erstmal auf Opera/FF optimieren danach IE.. werde mich also nochmal melden - aber das dauert muß ja tagsüber was tun ;-)

Danke Dir auf jedenfall!
Nase
2005-10-16, 23:57:17
Kein Problem, ich warte hier auf deine nächsten Fragen ;) :D
Misda
2005-10-17, 13:22:16
Ähm, warum machst du deine Navigation nicht mit semantisch korrekten Listen? :)