100% div layout

[Justin]

Hi,
Ich habe ein div in dem wiederrum 2 weitere divs sind.
Ein div ist links gefloatet und das andere rechts.
Ich will nun, dass das linke 300px feste Breite hat und das
rechte eine minimalbreite von 600px, das rechte soll aber
bis an den Fensterrand des Browsers gehen, aber wie geht das?
mit 100% macht der browser das rechte div auf 100% des ganzen
Fensters und nicht vom linken div bis zum rand.
kurz: 2 Spalten Layout, wobei das rechte div bis an den rand gehen
soll, wie?
Hoffe das hat jemand verstanden und ich habe dann
bald eine Lösung.

Und: bei bestimmten eigenschaften der divs, fahren diese ineinander,
das sieht auch blöd aus, wieso ist das so?
Und ist da eine Tabelle denn nicht besser? oder wieso
soll man eher mit divs anstatt tabellen arbeiten?

[Ashura]

Hallo Justin.

Ich habe ein div in dem wiederrum 2 weitere divs sind.

Wozu dient das äußere div-Element?

Ein div ist links gefloatet und das andere rechts.
Ich will nun, dass das linke 300px feste Breite hat und das
rechte eine minimalbreite von 600px, das rechte soll aber
bis an den Fensterrand des Browsers gehen, aber wie geht das?
mit 100% macht der browser das rechte div auf 100% des ganzen
Fensters und nicht vom linken div bis zum rand.

Lasse nur das erste div-Element floaten, verpasse diesem die notwendige Breite und setze den selben Wert als margin-left für das zweite div-Element.

Aber warum überhaupt eine unflexible Angabe in px? Warum nicht em oder %?

Und: bei bestimmten eigenschaften der divs, fahren diese ineinander,
das sieht auch blöd aus, wieso ist das so?

Weil das eine links und das andere rechts fließt. Wenn beide in die selbe Richtung fließen, wandert das zweite jeweils unter das erste.

Und ist da eine Tabelle denn nicht besser?

Nö, warum sollte sie?

oder wieso
soll man eher mit divs anstatt tabellen arbeiten?

Diese Glaubensfrage wurde hier schon oft gestellt und ebenso oft beantwortet. Das Archiv ist voll von solchen Threads.

Einen schönen Sonntag noch.

Gruß, Ashura

[Justin]

Ich hab hier jetzt ein große Probleme,
bitte schaut sich das mal jemand an, ich weis nicht wieso
das jetzt so komisch aussieht.
xhtml: http://home.arcor.de/kenibu1987/developer/index.html
css: http://home.arcor.de/kenibu1987/developer/files/style.css

[Justin]

xhtml: http://home.arcor.de/kenibu1987/developer/index.html
css: http://home.arcor.de/kenibu1987/developer/files/style.css

Ich hab ein paar probleme lösen können,
aber da wären immernoch welche:

• dem IE scheint min-width egal zu sein, er macht die Fenster immer kleiner.
• in der Navigationsleiste sollen die Links keine Hintergrundfarbe
  haben, sondern erst beim darüberfahren, wieso
  scheint der Hintergrund des divs indem die Links stehen
  nicht durch?
• Wie mach ich, dass das linke und rechte div in der Mitte
  gleich hoch bleiben?

[Ashura]

Hallo Justin.

xhtml: http://home.arcor.de/kenibu1987/developer/index.html
css: http://home.arcor.de/kenibu1987/developer/files/style.css

Dein Ansatz mit XHTML sieht recht gut aus, leidet aber momentan noch an Divitis. Dein Stylesheet erweckt den Eindruck, dass du schon länger damit arbeitest, aber auch hier findet man die von mir bereits bemängelten Maßeinheiten in px, welche für das flexible WWW denkbar ungeeignet sind. (Außer vielleicht bei Rahmenbreiten.)

Ich hab ein paar probleme lösen können,
aber da wären immernoch welche:

• dem IE scheint min-width egal zu sein, er macht die Fenster immer kleiner.

Richtig, der IE kennt diese Eigenschaft nicht, interpretiert dagegen width auf vergleichbare Art und Weise. Notiere erst min-width und danach mittels eines http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks nur für den IE width.

• in der Navigationsleiste sollen die Links keine Hintergrundfarbe
  haben, sondern erst beim darüberfahren, wieso
  scheint der Hintergrund des divs indem die Links stehen
  nicht durch?

Du hast folgendes Regelset:

a:link {  
 /* … */  
 color: #5575FF;  
}

Dieses überschreibst du jedoch weder in ul#navigation a noch in ul#navigation a:link. Bei ul#leftNav a:link tust du es dagegen.

• Wie mach ich, dass das linke und rechte div in der Mitte
  gleich hoch bleiben?

Grundsätzlich kannst du beiden div-Elementen eine Höhe von 100% geben, aber für dich dürfte interessanter sein, was im SELFHTML Aktuell Weblog zum Thema „Grundlagen für Spaltenlayout mit CSS“ steht.

Einen schönen Sonntag noch.

Gruß, Ashura

[Ashura]

Hallo Ingrid.

Dein Ansatz mit XHTML sieht recht gut aus, leidet aber momentan noch an Divitis.

Verlinken wollte ich es noch.

Du hast folgendes Regelset:

a:link {

/* … */
color: #5575FF;
}

  
Und ich lasse das relevante weg …  
  
~~~css
a:link {  
 /* … */  
 background-color: #FFF;  
 /* … */  
}

Einen schönen Sonntag noch.

Gruß, Ashura

[Justin]

Habe width gemacht, aber dann macht der IE das div
auf genau diese breite und nichtmehr bis an den Rand.
Mit em hab ich noch nicht gearbeitet,
hast du dazu vll einen Link?

[Ashura]

Hallo Justin.

Habe width gemacht, aber dann macht der IE das div
auf genau diese breite und nichtmehr bis an den Rand.

Allzu viel kannst du hier aber nicht ausrichten. Warum verzichtest du nicht einfach auf die min-width-Angabe? Lass deine Objekte doch frei skalierbar sein und gestatte dir selbst damit ein flexibleres Layout, was sich nahezu allen Umgebungen anpasst.

Mit em hab ich noch nicht gearbeitet,
hast du dazu vll einen Link?

Natürlich: http://1ngo.de/web/em.html

Einen schönen Sonntag noch.

Gruß, Ashura

[wahsaga]

hi,

• dem IE scheint min-width egal zu sein, er macht die Fenster immer kleiner.

Richtig, der IE kennt diese Eigenschaft nicht, interpretiert dagegen width auf vergleichbare Art und Weise.

Nein, daran ist immer noch nichts "vergleichbares".

Für height vs. min-height mag das zutreffen, für width vs. min-width aber nicht.
Und nein, es wird auch durch ständige Wiederholung nicht richtiger.

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

Für height vs. min-height mag das zutreffen, für width vs. min-width aber nicht.
Und nein, es wird auch durch ständige Wiederholung nicht richtiger.

Ja, ich weiß. Mein Fehler.

Das kommt davon, wenn man sich länger nicht mehr mit den Bugs und fehlenden Fähigkeiten des IE befasst.

Einen schönen Sonntag noch.

Gruß, Ashura