3Spalten Layout Gleich anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
aufwendigen programmiersprachen
auto
beziehen
code
container
element
funktionieren
hintergrund
http
image
inhalt
justierung
orientieren
position
problem
prozent
richten
url
wachsen
-
Moin,
also ich hab folgendes Problem:
Ich hab ein 3 Spalten Layout (im übertragenen Sinne) rechts 2 haupt-divs mitte den content und links 1 div
nun möchte ich dass die Div's nicht 100% anpassen sondern an dem content orientieren und finde lustigerweise kein passendes tut nur wie man sie auf 100% bringt.
meine lösung war mit dem auflösung 100%:
position:absolute:
top:0;
bottom:0;
http://jay-fekt.lima-city.de/site/
schon mal danke im vorraus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die einfachste Methode nennt sich Faux Column.
-
Ich hatte mal so etwas in der Art:
<div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div>
Und die CSS-Eigenschaften:
#container{width: 1020px; left: 50%; top: 0; margin: 0 0 0 -510px; position: absolute;} #left {width: 10px; height: 100%; left: 0; position: absolute; #right {width: 10px; height: 100%; position: absolute; left: 1010px; #content {width: 1000px; height: 100%; min-height: 500px; position: relative; left: 10px; clear: left;
Das war dann ein Container der 1020px breit war, aufgeteilt in 3 Spalten: Left, Content, Right.
Left und Right haben sich immer der Höhe des Content angepasst, welche mindestens 500px war.
Ich hoffe sowas hast du gesucht...
Beitrag zuletzt geändert: 20.10.2010 19:51:01 von alfr3d -
leider funzt das nicht so wie ichs gehofft hab.
falls ich wie so oft xD nicht genau verstanden wurde. also nix böses^^
ich möchte die beiden divs links und rechts, gleich hoch wie den content haben, ich bin verzweifelt 0.0! -
hmm soll der Content immer gleich hoch sein?
Eigtl müsste das mit meiner Methode funktionieren, ich hab das 1 zu 1 aus meine Quelltext kopiert und da funkktioniert es... -
ne, soll alles dynamisch sein.
und da hats iwie nicht hingehauen, egal ob lokal oder auf lima -.- -
Also bei mir funktioniert es definitiv: http://alfr3d.lima-city.de/test/
Der Gelbe Kasten in der Mitte verändert seine Höhe mit dem Inhalt, und die Divs links und rechts sind immer gleich hoch wie der mittlere...
Ich hatte im CSS-File die schließenden geschungenen Klammer vergessen:
#container{width: 1020px; left: 50%; top: 0; margin: 0 0 0 -510px; position: absolute;} #left {width: 10px; height: 100%; left: 0; position: absolute;} #right {width: 10px; height: 100%; position: absolute; left: 1010px;} #content {width: 1000px; height: 100%; min-height: 500px; position: relative; left: 10px;}
Beitrag zuletzt geändert: 20.10.2010 20:22:32 von alfr3d -
das problem ist ja dass sich diese 100% auf die auflösung beziehn nicht aber auf den überfluss eines anderen divs.
vorallem versteh ich nicht warum den den content so umständlich mittig setzt wenn es auch so geht
margin:0 auto 0 auto;
aber das ist ne andere sache.
wenn ich die 100% einsätzte hab ich das problem dass das der weiße balken viel länger ist als der content und so will ich das nicht. es soll halt beides auf einer höhe liegen. egal welche auflösung, weil die site ja nicht statisch ist. und selbst der wrapper bzw. container. sich an die größe der benutzten fläche anpasst.
also entweder kann ich deiner methode nicht ganz folgen oder ich mach was verheerent falsch
aber vllt mach ich auch den fehler und denk an die auflösung 1024 x 768 aber selbst später wird, der inhalt ja mehr. und so was abgehakctes wie ich bisher hab ist nicht ganz so toll.
Beitrag zuletzt geändert: 20.10.2010 21:33:51 von jay-fekt -
Ich versteh dein Problem nicht, mein Content ist immer nur so hoch wie es der Inhalt benötigt, das hat nichts mit der Auflösung zu tun, und die Divs links und rechts passen sich der Höhe des Contents an, also auch dem Inhalt. Dynamischer geht es ja fast nicht mehr...
-
Edit: Warum habe ich zuerst nur die ersten drei Beiträge angezeigt bekommen?
alfr3d schrieb:
Tun sie eigentlich nicht, oder sollten sie bei dem Code zumindest nicht. Die höhe von 100% ist unsinn. 100% wovon denn? Auch deine Testseite siet bei mir (Firefox 3.6) nicht so aus, wie sie soll.
Left und Right haben sich immer der Höhe des Content angepasst, welche mindestens 500px war.
Werktags' Lösung ist die einzig gescheite. Nochmal die kurzform des Artikels:
Ein Wrapper-Div erstellen, indem du den Hintergund lädst. (Quasi den Hinterggrund für alle Divs.)
Darin dann die drei Divs erstellen. Der Wrapper ist so hoch wie das höchste der drei Divs. Also wird auch der Hintergun über die gesamte Höhe angezeigt, egal wie hoch das kleinere Div ist.
Gruß
Tim
Beitrag zuletzt geändert: 21.10.2010 0:35:12 von tibel -
Zum selben Thema, aber ein eigenes Problem:
Ich habe ebenfalls drei Elemente in einen Wrapper gepackt. Zur Justierung benutze ich dynamische Prozentangaben. Nun richten sich die Elemente jedoch nicht prozentual nach der Größe des Wrappers aus, sondern nach Bildschirmauflösung, obwohl im Grunde alles richtig verschachtelt ist.
Warum ist das so? -
createtheweb schrieb:
Weil es so gehört. Wie groß ist denn dein Wrapper? Sprich: Hat der eine absolute Höhenangabe? Wenn nicht, kann das ganze nicht funktionieren. Irgendworauf müssen sich die Prozent schließlich beziehen.
Zum selben Thema, aber ein eigenes Problem:
Ich habe ebenfalls drei Elemente in einen Wrapper gepackt. Zur Justierung benutze ich dynamische Prozentangaben. Nun richten sich die Elemente jedoch nicht prozentual nach der Größe des Wrappers aus, sondern nach Bildschirmauflösung, obwohl im Grunde alles richtig verschachtelt ist.
Warum ist das so?
-
ist echt mir ne unpassende lösung -.- find ich doof xD
können die divs mit den bilder in dem wrapper nicht so lang gezogen werden wie das längste div in dem wrapper? -
tibel schrieb:
Weil es so gehört. Wie groß ist denn dein Wrapper? Sprich: Hat der eine absolute Höhenangabe? Wenn nicht, kann das ganze nicht funktionieren. Irgendworauf müssen sich die Prozent schließlich beziehen.
Das Problem ist, dass der Content sich an dem jeweiligen Inhalt orientieren soll. Die Navigationen links und rechts sollen jeweils mitwachsen, je nachdem wie sich der Content verändert.
Wenn ich dem Wrapper nun eine fixe Höhe zuteile, und die Navigationen sind Teil des Wrappers, laufen die Navigationen nur bis ans Ende des Wrappers mit. Der Content aber fließt rüber, was den Navigationen mangels Inhalt aber nicht möglich ist. -
faux column passt das nicht zu mein problem.
da dort beschrieben wird wie man einen statischen bg einbaut.
ich aber möchte, das meine site sich dynamisch bewegen kann d.h. höhen und seiten sollen wachsen können.
Aber! die höhe der beiden divs mit den hintergrundbildern links und rechts sollen mindestens die fläche im browser ausfüllen und wenn dann das in der mitteliegende <div id="content"> größer als diese fläche ist sollen die beiden divs links und rechts mit wachsen.
das linke dann aber nur in der höhe
Hier eine Skizze zum Aufbau: http://yfrog.com/ndaufbauj
ich hab mir noch den code von alfr3d zu herzen genommen und die einfachen bg angelegt.
das problem ist jetzt nur ich kann mit position:relative nicht links und rechts angeben, da ich nen seitlichen overflow bekomme bei prozent angaben wie min-width:70 bei auflösung wie 1024x768
(uhh schreckliche wortwahl ich hoffe man verstehts)
also meine frage ist kann ich iwie bei position:relative links und rechts anwenden oder zumindest einen ähnlichen effekt erzielen?
body { background-color:#1f1f1f;} #wrapper{ position: absolute; top: 0; left:0; } #left { position:absolute; left:0; background-image:url(../../site/images/bg_left.jpg); background-repeat:repeat-y; width:331px; min-height:100%; } #right { background-image:url(../../site/images/bg_right.jpg); background-position:left; background-repeat:repeat-y; background-color:#FFF; position:absolute; right:0px; width:24px; padding-right:10%; min-height:100%; } #content { position: relative; left:331px; min-height:100%; width:70%; }
Beitrag zuletzt geändert: 22.10.2010 15:43:28 von jay-fekt -
createtheweb schrieb:
Richtig, so ist es, so soll es sein.
Wenn ich dem Wrapper nun eine fixe Höhe zuteile, und die Navigationen sind Teil des Wrappers, laufen die Navigationen nur bis ans Ende des Wrappers mit. Der Content aber fließt rüber, was den Navigationen mangels Inhalt aber nicht möglich ist.
Das Problem ist, dass der Content sich an dem jeweiligen Inhalt orientieren soll. Die Navigationen links und rechts sollen jeweils mitwachsen, je nachdem wie sich der Content verändert.
Das ist nunmal so nicht möglich. HTML und CSS sind keine aufwendigen Programmiersprachen, sondern nur einfach Scriptsprachen. Nehmt es hin, auch wenn es euch nicht passt.
jay-fekt, werd nicht frech, nur weil du die Lösung nicht verstehst!
Was an deiner Skizze soll denn mit fauxcolumn nicht machbar sein? Gibst du dem Wrapper halt min-height:100% (also Bildschirmhöhe) und background-repeat:repeat-y, dann passt das doch.
Noch mehr kleinkauen werd ich jetzt nicht. Probiert doch einfach rum und kommt mit konkreten Fragen wieder.
...Tim, der auch mal klein angefangen hat und auch heute noch das Eine oder Andere googlen muss, aber keine fertigen Lösungen erwartet. -
wenn ich frech geworden bin entschuldige ich mich hier bei allen, das war absolut nicht meine Absicht. im gegenteil ich bin sogar dankbar für die lösungen nur, kann mir den aufbau nicht ganz vorstellen.
der content passt sich am inhalt an und rechts und links sollen sich von der höhe an den content anpassen.
hmm ich will mal probieren, die beiden einfachen bgs im wrapper zu floaten und für das logo und den oberen bg-left ein div zu mahcne und drüber zu legen so sollte es doch gehn oder irre ich mich da? -
tibel schrieb:
Das ist nunmal so nicht möglich. HTML und CSS sind keine aufwendigen Programmiersprachen, sondern nur einfach Scriptsprachen.
Okay. Ich kenne jetzt einige Seiten, bei denen es so aussieht, als ob es möglich wäre. Wie wird da getrickst?
tibel schrieb:
Nehmt es hin, auch wenn es euch nicht passt.
Höflich ist das aber auch nicht gerade.
-
Also bitte. Werktags und die anderen haben komplett Recht mit der Faux-Variante.
Es ist eigentlich relativ simple.
Man erstelle einen Wrapper/Container.
In diesen Container packt man drei weitere <div>'s (z.B. classe="left,middle,right" oder so).
In den mittleren <div> die mit float: left/right oder display: inline-box; nebeneinander ausgerichtet werden, steht der Inhalt.
(Also z.B. in dem linken die navigation)
Der Wrapper/Container bekommt eine feste Breite und lässt sich dann mit margin:0 auto; zentriert auf der Seite ausrichten.
Desweiteren ist nur der Wrapper/Container für den Hintergrund zuständig. Das heißt man schneide eine schmale Spur an Hintergrundbild, dass für den gesamten Wrapper gelten soll, zurecht und setze es als Hintergrund für den Wrapper.
Da der Wrapper sich dynamisch an das höchste/längste <div> anpasst, wird der Hintergrund immer genau bis dorthin fortgesetzt und dargestellt.
Ich hoffe das ist als Erklärung etwas hilfreicher und ausführlicher.
MfG
karlsve -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
