Layout mit %
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alten fluid
blinden tabelle
browser
container
design
fenster
fluid
http
layout
nachfolgender inhalt
plazieren
schau
tabelle
trick
unsichtbare tabelle
url
weben
zelle
zweite zelle
zweiten zelle
-
Hallo, ich möchte in meinem Browser ein Fenster (A) mit der breite und höhe von 90% und einem Seitenabstand (margin-left, margin-right) von je 5% haben, das ganze ist fixiert (position:fixed). Darin soll es nun eine Seitenleiste geben mit einer Breite von 250px die links positioniert ist. rechts daneben soll nun der Inhalt sein (-> 90%-250px aber das lässt sich so durch css ja nicht ausdrücken) Wie kann ich das bewerkstelligen?
LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Schau dir mal das hier an. Im Quelltext siehst du wie das geht.
http://css-tricks.com/the-perfect-fluid-width-layout/
LG inetandfun -
inetandfun schrieb:
Schau dir mal das hier an. Im Quelltext siehst du wie das geht.
http://css-tricks.com/the-perfect-fluid-width-layout/
Das dort vorgestellte Layout ist mittlerweile über fünf Jahre alt und nicht mehr unbedingt die beste Lösung. Wie es besser geht, zeigt der Autor ja selbst auf seiner aktuellen Seite. Er nutzt dort die Technik des "Responsive Design", die, im Gegensatz zum alten Fluid-Style, auch Rücksicht auf Smartphone-User nimmt. Ok, es ist etwas mehr Aufwand, aber das Ergebnis ist es sicher wert.
Beitrag zuletzt geändert: 17.9.2012 1:14:09 von fatfreddy -
hi - die "Responsive Design" lösung scheint mir irgendwie nicht so ganz ausgereift zu sein - wenn mein fenster sehr klein wird zeigt der firefox eine fehlerhafte horizontale scroll-leiste :(
um dein layout-problem zu lösen würde ich dir raten eintweder auf "floating" zurückzugreifen, also innerhalb deines containers die bar zu platzieren, der du dann mit css die breite (250px) und höhe (100%) und float (left oder right) zuweist, wodurch nachfolgender inhalt (nach der bar, auch im container) automatisch den noch verfügbaren platz einnimmt (90%-250px).
oder aber du machst das mit einer blinden-tabelle - also eine unsichtbare tabelle mit einer zeile und zwei zellen darin - die tabelle formatierst du mit css width:90% und table-layout:fixed und die bar-zelle mit width:250px somit bleibt für die zweite zelle 90%-250px übrig.
das als tabelle zu machen bietet noch die vorteile das so fast alle browser das gleich darstellen und ein vertical-align für die beiden zellen bestimmt werden kann. beachte das bei tabellen die css angabe zu height tatsächlich als min-height (auch in css2) bewertet wird. solltest du also die höhe von 90% als fix haben wollen, müsstest du in der zweiten zelle noch einen "wrapper" (div mit höhe:100% breite:100% und overflow:auto) einbauen...
diese lösungen sind html4- und css2-valide - ohne rumgetrickse.
Beitrag zuletzt geändert: 17.9.2012 13:55:33 von hcms -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
