XHTMLforum - divs nebeneinander - float stimmt nicht

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

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

- - divs nebeneinander - float stimmt nicht (http://xhtmlforum.de/showthread.php?t=63571)

divs nebeneinander - float stimmt nicht

Hi,

ich hab ne einfach Frage bezüglich des floatens. Leider fehlt mir die Erfahrung um den dummen Fehler alleine zu finden.

Mein Inhaltsbereich besteht aus 3 divs und daneben sollen rechts weitere Kästen floaten. Ich krieg die Box aber nicht an die gewünschte Stelle außer ich geh ihr ein margin-top: -282px; aber das ist ja nicht so ganz zweckmäßig !?

Wäre euch für Hilfe sehr dankbar :o

http://dl.dropbox.com/u/1653709/float1.jpg

http://dl.dropbox.com/u/1653709/float2.jpg

der blaue div rechts soll an diese Stelle

HTML-Code:

#container {margin: auto; width: 730px; height: 536px;}



#header {width: 730px; height: 136px; background:url(images/header.jpg);}



#content_head {background:url(images/content_head.png); width: 578px; height: 16px; margin-top: 42px;}



#content_main {background:url(images/content_main.png); width: 559px; padding: 10px;}



#content_footer {background:url(images/content_footer.png); width: 578px;  height: 13px; }



#wetter_head {background:url(images/wetter_head.png); width: 147px;  height: 16px; float: left; }



</style> 

 

</head>



<body>

        <div id="container">

                <div id="header"></div>

                        

                

                <ul id="navi">

                        <li><a class="startseite" href="#"></a></li>

                        <div id="trenner"></div>

                        <li><a class="ferienhaus" href="#"></a></li>

                        <div id="trenner"></div>

                        <li><a class="buchung" href="#"></a></li>

                        <div id="trenner"></div>

                        <li><a class="umgebung" href="#"></a></li>

                        <div id="trenner"></div>

                        <li><a class="platzhalter" href="#"></a></li>

                </ul>

                

        <div id="content_head"></div>

        <div id="content_main">blindtext</div>



<div id="content_footer"></div>



<div id="wetter_head"></div>

Woran erkennt man bei dir eine blaue Färbung?

Wieso ist dein HTML-Code noch so fehlerhaft? Tipp: zwischen <ul> und </ul> darf nur <li> direkt vorkommen, kein <div>.

Ja sorry das Bild war weg.

Gut das du das mit dem <div> in der Liste ansprichst. Die hab ich da drinne wegen den Trennstrichen, die 2px Breite Grafiken sind, wie löst man das denn geschickter ?

Sowas könntest Du als <div> oder <img> innerhalb der <li> lösen. Das CSS musst Du dann natürlich entsprechend anpassen.

Ok danke. Kannst du mir auch sagen warum ich den blauen div nicht an die gewünschte Position bekomme ? :(

Float lässt nachfolgende Inhalte ausweichen, nicht vorhergehende.

Aber: Bereits in deinem letzten Thread schrieb hubspe:

Zitat:

Nie leere divs für Grafiken und Linien etc. hernehmen

Genau das machst du noch immer.
Das gilt sowohl für "Spalten" im Layout als auch für deine Navigation. Deine Trennlinie kannst du mit border machen, dafür brauchst du kein leeres Element!

Dir wurde doch bereits Little Boxes empfohlen. Arbeite es komplett durch, dann bekommst du ein Grundverständnis für Float (und Clear). Deine diversen Ziergrafiken (und damit alle leeren Elemente!) lass erstmal beiseite. Die kann man später ganz anders unterbringen, als du jetzt noch glaubst.

Und bevor du irgendwas weiterfragst, lies und beachte bitte die Hinweise für Fragende. Keine unvalidierten Codeschnipsel -- immer einen Link angeben.

Selbst mit Bild ist mir anhand des HTML-Codes völlig unklar, welcher Bereich davon nun problematisch ist. Stell das Ganze mal unter einer URL zur Verfügung, so dass man es sich angucken kann.

Ich habe das ganze hochgeladen: H A M I

Es sollen doch nachfolgende Inhalte ausweichen ..und zwar nach rechts..

Wenn ich border benutze dann habe ich eine durchgezogene Linie das möchte ich aber nicht , ich möchte einfach einen Trennstrich dazwischen, da liegt genau der Unterschied. :(

Muss ich denn immer Abstriche machen, nur damit das ganze valide wird oder fehlt mir nur das Know-how ? Damit mein ich das es genauso die jetzige Form kriegt und nicht irgendwie abgespeckt und ähnlich.

Okay little boxes muss ich echt mal durcharbeiten...

Tut mir leid, dass ich mich nicht an die Regeln gehalten hab :|

Zitat:

Zitat von newbe (Beitrag 485905)

Es sollen doch nachfolgende Inhalte ausweichen ..und zwar nach rechts..

Nachfolgende Inhalte weichen dem Float aus. Nicht umgekehrt. Und auch nicht das Float vorhergehenden.

Zitat:

Wenn ich border benutze dann habe ich eine durchgezogene Linie

Das kommt darauf an, welche Dimensionen deine Elemente haben. Das legst du schließlich fest.
Davon abgesehen: Wenn du Grafiken für deine Links verwendest, dann mal einfach die Linie in die jeweilige Link-Grafik mit rein.
Was gar nicht geht sind leere Links. Wie man eine benutzbare grafische Navigation erstellt erklärt Heiko in den FAQ. Bevor du dich an sowas wagst brauchst du aber erstmal Grundlagenwissen.

Zitat:

Muss ich denn immer Abstriche machen, nur damit das ganze valide wird oder fehlt mir nur das Know-how ?

Letzteres.

Zitat:

Okay little boxes muss ich echt mal durcharbeiten...

Tu das.
Es hat wirklich keinen Sinn, herumzuraten. Das führt zu nichts.