3-spaltiges Layout
Hallo
Ich will auf einer Seite ein 3 spaltiges Layout machen. (Menü, Inhalt, Menü) Allerdings will ich das ganze dynamisch machen, so dass es sich ans Browserfenster anpasst. Deshalb habe die Menüs jeweils eine Breitenangabe in Prozent. (17%) Wenn ich nun einen <div id="inhalt"></div> erstelle (float:links), gelingt es mir einfach nicht, dass dieser den gleichen Abstand von beiden Menü's hat. Wenn ich mir die theoretischen Maße ausrechne, stimmt es auch nicht. Kann mir jemand sagen wie ich es schaffe, dass der Inhalt schön zentriert zwischen den Menüblöcken ist? Im weitesten Sinn ist die Seite wie die hier aufgebaut: 3-spaltig Aber wie ihr seht ist der div-Container nicht zentriert. Ich hoffe jemand hat eine Lösung. Grüße, Rantanplan |
Zitat:
Du meinst wohl die dynamischen Abstände. Das liegt am BOX-Model, dieses sollte Dir unbedingt klar sein!! |
Hier noch ein LINK dazu, da ich ja gerade festellen mußte dass die SUCH-Funktion nicht die alten Einträge berücksichtigt.
:shock: http://www.xhtmlforum.de/forum/viewtopic.php?p=803 |
Danke dir. Im Link habe ich erfahren,was die reelle Breite (margin + padding + border + width) ist. Ich finde aber schon, dass das unlogisch ist.
Vorallem kann man somit nicht gut rechnen, da bei mir border angaben mit % nicht klappen. Ist es nicht möglich, dass ich einen container zwischen zwei container erstelle, der genau 5px Rand zu diesen hat? Rantanplan |
Zitat:
Zitat:
:lol: Da die relativen Angaben für margin, border und padding sich aus den Schriftgrößen des Containers errechnen. Na, noch lust...... :roll: :arrow: Aber es gibt Tricks. Setze die Container mit width und float entsprechen nebeneinander. (evtl. 20/60/20 % = 100%) :arrow: allerdings ohne weitere Angaben. Und in diese Container setzt Du einfach nochmal einen DIV-Container (jeweils). :idea: Diese allerdings ohne width-Angabe, aber dann mit margin, border und padding-Angaben (wie gewünscht). Da ein DIV-Element ein BLOCK-Element ist, es sei den Du änderst die Eigenschaft auf [display: inline;], wird die gesamte Breite des Eltern-Elements genutzt. :!: Und nicht mehr bzw. weniger. Viel Erfolg |
Der body hat aber "padding:1% 1% 1% 1%;". Außerdem haben der linke und der rechte div-Container (menüs) jeweils einen Rand.
Wenn ich nun logisch denke kann man dann allgemein sagen: Erzeugt man eine dynamische Website mit zB. 3 Spalten (Containern), muss die Gesamtbreite max. 100% betragen, da es sonst zu schweren Darstellungsfehlern kommt. Da aber nur "width" eine prozentuelle Angabe erlaubt und jeder Container in den meisten Fällen Informationen zu "margin" und "padding" enthält, sollte jeder Container in einem Muttercontainer sein. ^^ richtig? Also: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" Rantanplan |
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Zitat:
Ich habe aber trotzdem Fragen: Warum Schriftformatierung? (haben die geheime Auswirkungen, die ich nicht kenne?) Warum schreibst du den Style in einem HTML kommentar? hat das was mit xhtml zu tun? Wird mit width:60; das width:20; überschrieben? Warum wird es falsch dargestellt, wenn ich beim body padding:0; setze? Auf was bezieht sich die %-Zahl der spaltenangaben? Auf die body-width? Ich wäre sehr dankbar, wenn du auf die Fragen genau eingehst, denn ich finde das "Wesen der Container" zu verstehen gehört zum wichtigsten in morderner html/css-programmierung. Guten Rutsch wünscht ... ... Rantanplan |
body { font-size: 101% } beseitigt einen rundungs-bug in opera6, der dafuer sorgt, dass die schrift bei 100% zu klein dargestellt wird. die restlichen schriftformatierungen sind nur drin, weil ulle schwarze verdana mag ;)
ja, das width:60% ueberschreibt das width:20%. du kannst grundsaetzlich jede eigenschaft beliebig oft ueberschreiben. es gibt feste regeln, welche eigenschaft wann zaehlt. sofern sich alle auf klassen oder alle auf ids beziehen zaehlt die letzte. warum es bei body { padding:0; } falsch dargestellt wird kann ich dir nicht sagen, koennte aber evtl. ein rundungsproblem oder so sein. ich wuerde sowieso prinzipiell die summe der breiten auf 98% oder 99% beschraenken, da man bei 100% oft durch rundungsfehler horizontale scrollbalken kriegt. prozentuales padding will glaub ich der mozilla nicht richtig, ich meine mich zumindest zu erinnern, dass sich irgendwer auf ner mailing liste mal fuerchterlich drueber aufgeregt hat, dass es nicht so funktioniert, wie er es gern haette. die prozentanzahl der spalten bezieht sich auf die dem inhalt zur verfuegung stehende breite (width) des uebergeordneten containers. in diesem fall also body, was wiederum heisst: fensterbreite minus 2px (wegen des paddings). |
Alex hat es ja schon eingehend beantwortet :!:
nun in Kurzform :arrow: Warum schreibst du den Style in einem HTML kommentar? hat das was mit xhtml zu tun? Nein, gewohnheit bzw. kopiert, seit 100 Jahren, kann mich gar nicht erinnern es mal geschrieben zu haben. Wird mit width:60; das width:20; überschrieben? Ja, es gibt auch eine priorität, es wird nicht immer überschrieben, kommt auf die Wertigkeit des Selektors an, aber hier ist die Reihenfolge maßgebend. Warum wird es falsch dargestellt, wenn ich beim body padding:0; setze? Kommt auf die Breite des Eltern-Elements an, wenn die ungerade (zB. 773) in Pixeln ist gibt es Rundungsfehler und in unserem Fall ist das Eltern-Element der BODY bzw. das Browserfenster. Auf was bezieht sich die %-Zahl der spaltenangaben? Auf die body-width? Auf den verbleibenden Innenabstand des BODY, setze doch mal den BODY auf width: 100%, dann siehst Du wie BLOCK-Elemente ohne/mit width-Angabe arbeiten. Den der BODY ist auch ein BLOCK-Element. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 11:27 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023