positionierung ie vs. firefox

[vetinari]

schon wieder mal eine von den "im einen browser geht's im anderen nicht" fragen ...
hier der link:
http://kamasha.de/cms/front_content.php
habe im layout zei <div> container untereinander gesetzt. der firefox stellt sie aber nebeneinander.

gruss, martin

[Jonathan]

Hallo vetinari,

hier der link:
http://kamasha.de/cms/front_content.php
habe im layout zei <div> container untereinander gesetzt. der firefox stellt sie aber nebeneinander.

Deine Navigationselemente sind gefloatet, die Navigation hat somit eine Höhe von Null und die Tabelle fängt also ganz oben an und quetscht sich rechts neben die gefloateten Elemente.

Gib entweder der Navigation overflow:auto um zu verhindern, dass die floats außerhalb wirksam werden, oder gib dem #content clear:both;

Jonathan

[vetinari]

hallo jonathan,

Gib entweder der Navigation overflow:auto um zu verhindern, dass die floats außerhalb wirksam werden, oder gib dem #content clear:both;

danke, das hat geholfen!

gruss, martin

[vetinari]

... aber irgendwie kapiere ich das wohl doch noch nicht so ganz mit der positioniereung der <div> container :-(

habe jetzt mal folgendes tabellenfrei gecodet:

<div id="top">
    <div id="navi_block">
        <ul id="main_navi">
            <li><a href="http://kamasha.de/cms/front_content.php?idart=208&idcat=109">Beratungs-<br>Hotline</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=&idcat=109">Katalog<br>anfordern</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=&idcat=109">Kamasha<br>Magazin</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=&idcat=109">Aktuelle<br>Angebote</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=&idcat=109">H&auml;ndler-<br>Bereich</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=209&idcat=109">Kamasha<br>Partner</a></li>
            <li><a href="http://kamasha.de/cms/front_content.php?idart=&idcat=109">Infos zu den<br>Produkten</a></li>
        </ul>
    </div>

<div id="content">
        <br><container id="20" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container><br>
        <div types="Navigation"><br>
            <a href="http://www.seminarort-lebensquelle.de/Kamasha/termine_versand.php">Termine</a><br />
            <a href="http://www.kamasha.de/energie.php">Energiekarte des Tages</a>
        </div>
        <div>
            <container id="12" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
            <container id="14" name="Text" types="Content" default="">Content 1</container>
            <container id="16" name="Text" types="Content" default="">Content 2</container>
        </div>
    </div>
</div>

<div align="center">
    <container id="30" name="Bottomnavigation" types="Navigation" default="">Bottomnavigation</container>
</div>

die <container> mit ihren id's hängen mit dem cms contenido zusammen in dem das ganze läuft ...

das ergebnis:
http://kamasha.de/cms/front_content.php
sieht aber so aus, dass die zwei <div>'s in div#content untereinander auftauchen statt nebeneinander.

wie muss ich coden wenn <div> container nebeneinander stehen sollen und wie, damit sie untereinander angeordnet sind?

gruss, martin

[Harlequin]

Yerf!

wie muss ich coden wenn <div> container nebeneinander stehen sollen und wie, damit sie untereinander angeordnet sind?

Divs stehen, wie auch alle anderen Blockelemente, immer untereinander. Sollen sie Nebeneinander stehen, so müssen sie entweder in Inline-Elemente gewandelt werden (geht aber nur wenn sie einzeilig sind[1]) oder aber mit float behandelt werden. dadurch ordnen sie sich ebenfalls neben anderen Elementen an.

In deinem Fall wäre ein float:left für das erste Div wohl die beste Lösung.

Gruß,

Harlequin

[1] Die Variante inline-block, die auch mehrzeilige Blöcke nebeneinander erlaubt kann noch nicht jeder Browser.

[vetinari]

danke!
habe mal diesen artikel gefunden:
http://www.thestyleworks.de/tut-art/layout_flexible.shtml
und das problem mit position: relative gelöst.

gruss, martin

[Harlequin]

Yerf!

habe im layout zei <div> container untereinander gesetzt. der firefox stellt sie aber nebeneinander.

Hm, was hier passiert ist wohl folgendes: Der erste DIV ist 0px hoch, da er nur gefloatete Elemente (die <li>s) enthält. Dadurch wandert der 2. Block nach oben und die Tabelle wird rechts neben den gefloateten <li>s angeordnet. Ein clear:left für das 2. Div (content) hilft.

Noch ein paar Anregungen: die Struktur deines Quelltextes ist nicht ganz ideal. Wird für das erste Menü noch eine Liste verwendet, so ist das 2. nur noch eine Ansammlung bedeutungsloser Divs. Auch nicht schön ist, dass die Seite keine "richtige" Überschrift (am besten als <h1>) hat, sondern das ganze nur als Hintergrundbild dargestellt wird (egal ob jetzt Textbrowser, User die sich keine Bilder anzeigen lassen oder Suchmaschinen: alle 3 werden das nicht besonders mögen). Und Tabellen zu Layoutzwecken sollten im Zeitalter von CSS eigentlich überflüssig sein.

Gruß,

Harlequin

[Christoph Schnauß]

hallo,

habe im layout zei <div> container untereinander gesetzt. der firefox stellt sie aber nebeneinander.

Du hast sie eben _nicht_ untereinandergesetzt. Und deine Seite ist geradezu ein Paradebeispiel dafür, wie man es nicht machen sollte - du vermischst DIVs und deine Tabellen, schachtelst sie ineinander ein. Wenn du ganz und gar auf die Tabelle verzichten würdest, kämest du weiter. Der Fehler liegt in deiner Verschachtelungsstruktur. Bisher hast du da stehen:

<div id="top">  
    <div id="navi_block">  
        <ul id="main_navi">  
            <li><a href="http://kamasha.de/cms/front_content.php?idart=208&idcat=109">Beratungs-<br>Hotline</a></li>  
            ...  
        </ul>  
    </div>  
  
    <div id="content">  

Dadurch wirkt "top" als Rahmen, in dem "navi_block" und "content" nebeneinander stehen.

Du kannst das beheben, indem du "top" rechtzeitig schließt, wodurch dann "top" und "content" tatsächlich untereinander stehen - beide sind ja auch 1010Pixel breit. Also so:

<div id="top">  
    <div id="navi_block">  
        <ul id="main_navi">  
            <li><a href="http://kamasha.de/cms/front_content.php?idart=208&idcat=109">Beratungs-<br>Hotline</a></li>  
            ...  
        </ul>  
    </div>  
</div>  
  
<div id="content">  

Mit CSS allein ist dein Problem nicht zu beheben. Du solltest dir deine HTML-Struktur genau anschauen und übrigens auch berücksichtigen, was der Validator sagt. Außerdem passiert auch genau das, was eben bei einem "klassischen" Pixellayout passiert. Deine 1010Pixel führen zum Beispiel bei mir zwingend zu Scrollbalken.
Und es wäre wohl auch zu überlegen, ob du tatsächlich so viele "IDs" brauchst, oder ob es nicht sinnvoller ist, nur bestimmten "großen" Containern wie "top" und "content" eine ID zu geben, allen Elementen, die dann innerhalb dieser Container angeordnet werden sollen, dafür Klassennamen zuzuweisen - das ergibt zumindest mehr Übersichtlichkeit. Außerdem macht es keinen Sinn, wenn du schon eine zentrale CSS-Datei hast, ins HTML selbst auch nochmal CSS-Angaben zu schreiben.

Und noch ein kleiner Tip: wenn du glaubst, daß irgendwas mit deinen Container nicht korrekt ist, dann setze mal während der Entwicklung einfach ein border: 1px solid red dazu.

Grüße aus Berlin

Christoph S.

[Harlequin]

Yerf!

Hier muss ich mal kurz meinen Senf dazugeben:

Du hast sie eben _nicht_ untereinandergesetzt.

Doch, hat er.

Dadurch wirkt "top" als Rahmen, in dem "navi_block" und "content" nebeneinander stehen.

Wieso sollten 2 Divs nebeneinander stehen? Die werden weder gefloatet noch sonstwie umformatiert.

Du kannst das beheben, indem du "top" rechtzeitig schließt, wodurch dann "top" und "content" tatsächlich untereinander stehen - beide sind ja auch 1010Pixel breit. Also so:

Hast du das ausprobiert? Ich kanns grad nicht testen, bezweifle aber dass das hilft. Das Problem ist, dass der obere Div keine Höhe hat, da sein Inhalt gefloatet ist. Daran änder auch ein früheres schließen des div "top" nichts.

Und noch ein kleiner Tip: wenn du glaubst, daß irgendwas mit deinen Container nicht korrekt ist, dann setze mal während der Entwicklung einfach ein border: 1px solid red dazu.

Damit sieht man auch wunderbar, dass der div "content" über die volle Breite geht, also unter dem div "navi_block" ist. Aber man sieht auch, das die Liste sich innerhalb diese Blocks befindet und der Div "navi_block" keine Höhe hat.

Gruß,

Harlequin

PS: die Vermischung von Table und Div zu Layout-Zwecken ist natürlich trotzdem "suboptimal". Besser sinnvoles Markup mit Divs nur zum Gruppieren verwenden.

[Christoph Schnauß]

hallo,

Du kannst das beheben
Hast du das ausprobiert?

Selbstverständlich.

Grüße aus Berlin

Christoph S.

[Harlequin]

Yerf!

Du kannst das beheben
Hast du das ausprobiert?

Selbstverständlich.

Ok, du gewinnst. Aber nur, weil div#top eine min-height von 187px hat... Hm, sollte dadurch nicht der Inhalt zu weit nach unten rutschen? ich glaub ich muss das doch mal genauer durchtesten...

Unabhängig davon hilft aber auch das clearen des floats.

Gruß,

Harlequin

[Christoph Schnauß]

hallo,

Unabhängig davon hilft aber auch das clearen des floats.

Das wäre ja richtig - ich habe bloß nirgends ein "float" gefunden.

Grüße aus Berlin

Christoph S.

[vetinari]

hallo,

danke für eure diskussion. habe ja vor kurzem schon mal ein ähnliches thema gepostet, weiß also bereits worauf es ankommt.
ich hatte das layout auch schon tabellenfrei und der css code im html ist nur eine temporäre korrektur gewesen ...

habe jetzt mal das div#top so geschlossen wie christoph es vorschlägt. das hatte ich bereits ausprobiert, aber der effekt im firefox ist folgender:
http://kamasha.de/cms/front_content.php
nur weil sich der gesamte folgende block content nicht nach oben 'verschieben' ließ, habe ich es mit den tabellen versucht ...
es soll so aussehen wie im ie 6.

gruss, martin