[HTML/CSS] Box-model: DIVs und relative Größenangaben?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_css_box-model_divs_und_relative_groeszenangab_116668/page_1 - zur Vollversion wechseln!

Mr. Zet schrieb am 08.06.2004 um 16:43

Folgendes Szenario:
-)"klassische" Dreiteilung eines Bereiches in "Header" (oben), "Menü" (links) und "Content" im Restlichen Bereich.
weiters:
-) Header und Menü mit fixen größenangaben (in pixel)
-) Content soll die restliche fläche einnehmen und genau darin liegt das problem.

Mit DIVs bekomme ich das einfach nicht so hin, wie ich es mir vorstelle
Der "Container" in dem sich das ganze construct befindet, soll nämlich unabhängig von der Größe des Browserfensters/Bildschirmauflösung immer den ganzen contentbereich des Browsers füllen. DIVs sollten zwar default den ganzen Raum der im elternelement zur verfügung steht ausfüllen, tun dies aber nicht, sie sind nur so groß wie ihr inhalt + padding,border,margin.

weil aber eben die größe exkl. padding,border,margin ist, komm ich mit relativen angaben nicht sehr weit - ein "100% minus 5px" gibt es leider nicht.

Selfhtml und die w3 seiten zum boxmodel helfen mir nicht mehr weiter, daher wende ich mich jetzt verzweifelt an euch.

ok, "was faselt der da" werdet ihr euch jetzt denken, also um es verständlicher zu machen:

So sieht es jetzt aus
was passt nicht?
-)"bottom" ist kein 5px margin um den container.

-)obwohl theoretisch ja nur genau die vorhandene fläche genutzt werden soll (außer der content teil geht sich nicht aus), tauchen trotzdem scrollbars auf, weil das konstrukt größer wird als eben 100%
egal wie ich versuche den rand zu erzeugen, aufgrund der exklusivität in bezug auf die angegebenen width/height werte, wird es immer mehr als 100%

-) "content" bereich füllt den vorhandenen raum nicht auf (sehr leicht am linken border zu erkennen). ein "height="100%" bringt aber aufgrund des kaputten box-models im IE mehr probleme, als es löst.

pfad der css datei:
http://stud4.tuwien.ac.at/~e0226304/test/coconet.css

kurz um ich weiß nicht mehr weiter, und hab schon so viel daran herumprobiert, dass ich "vor lauter bäumen den wald nicht mehr sehe"

Also falls jemand da weiterweiß und/oder zufällig links zu Lösungen der problematik hat, wäre ich echt dankbar

PS: dem ersten, der mir den renderingerror im IE auf contact.html erklären kann, dem spendier ich aufm nächsten forumstreffen ein bier oder so
( http://stud4.tuwien.ac.at/~e0226304...ender_error.jpg für alle die keinen IE haben)

flaimo schrieb am 08.06.2004 um 17:33

ich schenk dir einen link:

http://www.thenoodleincident.com/tu...sson/boxes.html

vielleicht hilf das weiter

Rektal schrieb am 09.06.2004 um 00:31

Zitat
PS: dem ersten, der mir den renderingerror im IE auf contact.html erklären kann, dem spendier ich aufm nächsten forumstreffen ein bier oder so
( http://stud4.tuwien.ac.at/~e0226304...ender_error.jpg für alle die keinen IE haben) [/B]

Peek-A-Boo-Bug, siehe http://www.positioniseverything.net...r/peekaboo.html

Rektal schrieb am 09.06.2004 um 00:37

Zitat von Mr. Zet
Zitat von xdfk
der neue apple airport accesspoint hat so ein feature eingebaut. preis: sicher unverschaemt teuer (keine ahnung )

Bester Link den ich kenne ist http://www.quirksmode.org/css/100percheight.html , die verbundene Problematik damit vor allen auch in anderen Browser. Ich kenne noch keinen ders geschafft hat, dass ueberall gleich zu implementieren.

Zitat
weil aber eben die größe exkl. padding,border,margin ist, komm ich mit relativen angaben nicht sehr weit - ein "100% minus 5px" gibt es leider nicht.

So sieht es jetzt aus
was passt nicht?
-)"bottom" ist kein 5px margin um den container.

Und einfach nicht 100% sondern weniger nehmen ist anscheinend keine Option, weils dann net gleich aussieht .. ?

Zitat
-) "content" bereich füllt den vorhandenen raum nicht auf (sehr leicht am linken border zu erkennen). ein "height="100%" bringt aber aufgrund des kaputten box-models im IE mehr probleme, als es löst.

Das kannst einfach fixen mit einem weiteren verschachteltem Block-Element dass die margin/paddings setzt, auf jedenfall eben nicht das Objekt, dass die width/height setzt.

Oder du nimmst IE7 zur Hilfe, ich glaub der fixt auch den box-model bug -> http://dean.edwards.name/IE7/

Kurzum, das einzige was ich (*) kenne was sicher funktioniert ist table height 100% im BackCompat-Mode oder Frames.

(*) Muss net unbedingt was heissen

Mr. Zet schrieb am 09.06.2004 um 19:55

1) thx flaimo, hilft mir zwar nicht direkt, ist aber sicher gut um später mal bei Bedarf nachzuschlagen

2) Rektal ich schulde dir ein Bier

3) auch an dich thx für die Links, mal schaun was sich da machen lässt.
Danke auch für den Tipp mit dem weiteren Block-Element für den content, auf die Idee bin ich nicht gekommen (sag ja, ich hab vor lauter bäumen den wald nichtmehr gesehen )

Frames und Tables möchte ich eigentlich vermeiden, es muss doch gutes Webdesign auch ohne diesem alten "Müll" möglich sein (siehe Mozilla.org, imho sehr schönes, klares Design)

und bezüglich "weniger als 100%" sicher geht das, aber dann ist der Rahmen ja wieder variabel je nach Auflösung und nicht fix wie ich es eigentlich wollte. Naja, wenn ich es nicht hinbekomme, dann muss ich wohl eh das ganze mit relativen Werten annähern.

PS: ich wollt eigentlich eh ein bisschen anders, aber meinem Vater hats nicht gefallen...

Rektal schrieb am 09.06.2004 um 20:26

Zitat von Mr. Zet
Zitat von d3cod3
Abstyler is jetzt sein 2taccount

Definiere "gutes Design"? <critism> Ohne dir auf den Schlips zu treten, aber wer bist du, dass du sagst, das ist gutes Design? </critism>

Mein Senf dazu: ein gutes Design im Bereich Web hat nicht unbedingt etwas nur mit dem rein visuellen Aspekt zu tun. Ein gutes Design hat was mit Kenntniss des Medium Web (z.B. Anpassung an die limitationen der Browser) und guter Useability zu tun, nur um wenige der Faktoren zu nennen.

Was ich damit sagen will: deine Beurteilung ist _sehr relativ_ ;-)

Hoffe auf jedenfall du erreichst etwas mit den Links.

Mr. Zet schrieb am 09.06.2004 um 20:48

nana, Misverständnis!

Ich habe keineswegs gemeint, das die Seiten an denen ich Arbeite "gutes Design" sind.
Was ich sagen wollte ist viel mehr, dass es doch möglich sein muss, Webseiten mit den Mitteln zu gestalten, die vom W3C dafür vorgesehen sind. Also ohne Tables zu misbrauchen oder auf die _imho_ ungeeigneten Frames zurückgreifen zu müssen.

Hoffe das geklärt zu haben

Rektal schrieb am 09.06.2004 um 22:13

Genau dazu gehoert es, sich anzumassen, die in deinem Fall gewuenschte Kontrolle ueber den Browser zu haben (immmer volle Widnow Viewport) einzunehmen.

Mr. Zet schrieb am 10.06.2004 um 00:30

:confused: irgendwie entgeht mir der kontext, in dem dein post steht / stehen soll, is wohl zu spät, ich schau dass ich ins bett komm
gn8

Mr. Zet schrieb am 10.06.2004 um 11:58

ah toll, anscheinend beziehen sich größenangaben in % immer auf die gesamtfläche des viewports, anstatt auf das elternelement. :rolleyes:

edit: doch nicht, jetzt kenn ich mich gar nimmer aus

gut, damit ist der ganze entwurf hinfällig, trotzdem thx an alle

edit2: also dein quirksmode link bestätigt mich jetzt noch mehr: es geht ned so wie ichs mir vorstell. jetzt verstehe ich auch, warum es immer mehr flash seiten gibt... da muss man sich nicht mit den unzulänglichkeiten von html rumärgern :mad:

Rektal schrieb am 10.06.2004 um 15:41

Nicht aufgeben. Es ist eben nicht jedes Design fuer derartige Umsetzungen geeignet. Das ist eines der Probleme, wenn man keine Erfahrung hat, tut man sich schwer abzuschaetzen, was ich mich HTML/CSS jetzt eigentlich machen kann und was nicht.

Einige Dinge gehen nicht mit purer Umsetzung, dafuer oeffnen sich neue Moeglichkeiten.

Niemand aber sagt du musst nur die pure Umsetzung mit CSS-Only machen. Ich habs zwar geschafft in den letzten 1 1/2 Jahren die Designs ohne Tabelle fuer das grobe Layout umzusetzen, aber gerade bei Forumularen greife ich dann doch wieder darauf zurueck.