Probleme beim umsetzen eines Tabledesigns in Containerdesign
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absoluten werten arbeiten
auto
beispiel
bild
browser
code
container
fehler
helfen
hintergrund
http
inhalt
layout
problem
rest
tabelle
test
text
url
zeigen
-
Also ich war selbst immer Anhänger des "guten Stils", aber so langsam merke ich wieviel CSS mit Containern nicht leisten kann.
Ich wollte ein mit Tabledesign gemachtes Design mit Div-containern umsetzen und verzweifle an verschiedenen Dingen. Zum einen möchte ich zwei Container nebeneinander anordnen und zwar so, dass der rechte den Rest der Breite benutzt, aber ohne, dass der linke Container größer/höher sein muss, als der rechte, worauf es bei CSS nunmal hinausläuft (ansonsten umfließt er den linken Container). Außerdem wäre es mir lieb, wenn beide Container die gleiche relative Höhe hätten, was auch nur mit Tabellen möglich ist. (und wehe hier kommt einer mit FauxColumns, denn bei variabler Breite eine ganze schlechte Idee)
Das nervt!
Hoffe hier kann trotzdem jemand helfen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn du dem einem div-Tag entsprechend margin/padding gibst, überlappen die schon nicht. Ich würde dir vorschlagen, nicht zu meckern, sondern das hier zu posten was du bisher erreicht hast. Die meisten Probleme sind lösbar - aber sie müssen konkret sein!
CSS wird in Zukunft auch die Verhaltensmuster von Tabellen beherrschen - wie bisher das ganze umgesetzt ist, kann ich nicht sagen. Du solltest dazu Informationen unter "CSS Columns" finden. -
Sie überlappen auch einander nicht, sondern die eine umfließt die andere und das sieht sehr unschön aus. Das Problem ist eigentlich konkret genug geschildert. Es steht da was erreicht werden soll und das mit CSS. Dazu braucht man keinen kompletten Quelltext. Zumal ich dann erstmal mehrere Varianten hochladen müsste, um das überhaupt verdeutlichen zu können.
Aber nur um mal das eine Problem zu zeigen habe ich was hochgeladen. Es zeigt die Lösung, die ich per Google gefunden habe und wie sie nicht funktioniert.
http://reimann.lima-city.de/test
Es ist auch erstaunlich, dass in dem Beispiel der Text wenigstens noch richtig weiterläuft. Bei mir ist das nichtmal der Fall.
Beitrag zuletzt geändert: 30.5.2010 16:04:18 von reimann -
Hey,
also ich würde es so lösen:
<body> <div id="wrapper"> <div id="col_left"> <div id="menu"> <div class="inner"> <p> DEIN MENU </p> </div> </div> </div> <div id="col_right"> <div id="content"> <div class="inner"> <p> DEIN INHALT </p> </div> </div> </div> </div> </body>
CSS Dazu:
html { height:100%; width:100%; } body { height:100%; width:100%; margin:0; padding:0; } #wrapper { width:100%; height:100%; margin:auto; padding:0; background:#CCC; } #col_left { width:16%; height:100%; margin:0; padding:0; float:left; } #col_right { width:84%; height:100%; margin:0; padding:0; float:left; } #menu { width:100%; height:auto; } #content { width:100%; height:auto; } .inner { padding:15px; width:auto; height:auto; } p { margin:0; padding:0; }
Erklärung:
Body - margins und padding entnommen um den Außenabstand zu verhindern.
(bei wrappern mit weniger als 100% margin auf auto setzten um die Webseite zu Zentrieren)
Wrapper - nur eine nette Möglichkeit die Seiten Breite schnell und einfach anzupassen bei Skalierbaren Weblayouts.
Col_left - verhindert das umfließen anderer Container die im Col_right sind.
( wichtig hierbei ist der befehl float:left; dieser lässt Div´s neben einander stehen, solange der Übergeordnete Container breit genug ist.)
Inner - hier können Angaben ohne neu Berechnung des übergeordneten Containers gemacht werden.
p - margins und paddings entnommen damit es nicht zu Layout Fehlern führt.
Als nächstes kommt dein Text Fehler.
Browser haben einen automatischen Umbruch. Durch das entnehmen von Leerzeichen nimmst du dem Browser die Möglichkeit einen Umbruch am Container Ende zu machen.
Nimm einfach Blindtexte von einem Generator
Damit sollte das Problem gelöst sein.
Wenn noch Probleme bestehen kannst mich auch per pn anschreiben
//EDIT
Fehler im Code verbessert.
Hier noch ein live Beispiel
Hoffe ich konnte helfen
mfg
psd
Beitrag zuletzt geändert: 30.5.2010 17:13:06 von psd -
das vorangegangene Beispiel ist schön und gut, aber es täuscht nicht wirklich eine Tabellenstruktur vor, eher ein Frameset.
Ein Tabellenlayout bekommt man nur über ein paar Umwege hin, sprich wenn man Hintergründe hat wird es etwas umständlich, aber möglich ist es:
dazu dann dieses CSS:<body> <div id="wrapper"> <div id="menu"> <p> DEIN MENU </p> <p> DEIN MENU </p> </div> <div id="content-wrapper"> <div id="content"> <p> DEIN INHALT </p> <p> DEIN INHALT </p> <p> DEIN INHALT </p> </div> </div> </div> </body>
Zur Erklärung (Regel + warum):* { margin:0; padding:0; } #wrapper { background:blue; overflow:hidden; } #menu { width:20%; float:left; background:lime; } #content-wrapper { background:lime; padding-left:20%; } #content { background:blue; }
*: Abstände nullen, dann ist es leichter das Layout zu erstellen
#wrapper :Einmal den Hintergrund den der Inhalt haben soll, passt zwar nicht so wirklich da hin, aber muss so sein, außerdem dafür sorgen, dass der komplette Inhalt (inkl. Menü) auch umschlossen wird, damit der Hintergrund auch zu sehen ist, wenn das Menü länger als der Inhalt ist
#menu: das Menü bekommt eine Breite zugeteilt, welche ist egal, außerdem wird noch dafür gesorgt, dass es links vom Inhalt steht und einen eigenen Hintergrund bekommt
#content-wrapper: dieser Teil ist dazu da, damit die linke seite auch grün ist, wenn das Menü kürzer als der Inhalt ist, und bekommt daher den selben Hintergrund, wie das Menü außerdem einen Innenabstand, der genau so breit ist, wie das Menü, damit diese Fläche nicht vom Inhalt eingenommen wird.
#content: braucht nur noch den eigenen Hintergrund zu erhalten
Diese Konstruktion erzeugt ein "Tabellenlayout", aus Containern, welches sich genauso verhält, wie eine 2-spaltige Tabelle.
Tip, wenn als Hintergrund Bilder verwendet werden sollen, dann sollte das Menu eine absolute Breite haben, sprich px,em,ex,cm ein
außerdem muss dann das Bild im #wrapper entsprechend verschoben werden:
um zu zeigen was ich meine habe ich hier mal ein Beispiel, für die nicht verschobene Ansicht und eine mit entsprechenden Vorkehrungen* { margin:0; padding:0; } #wrapper { background:url('content-bild.png') 200px 0; overflow:hidden; } #menu { width:200px; float:left; background:url('menu-bild.png'); } #content-wrapper { background:url('menu-bild.png'); padding-left:200px; } #content { background:url('content-bild.png'); } -
Ok also die Lösung von psd war zwar ziemlich gut, aber in der Breite kann man nicht mit absoluten Werten arbeiten. Da gefällt mir die von nemoinho besser, obwohl sie mir zu sehr nach Krücke aussieht.
Dann werde ich nur hoffen können CSS wird in den nächsten Versionen Ergänzungen anbieten.
Trotzdem danke.
-
reimann schrieb: ... aber in der Breite kann man nicht mit absoluten Werten arbeiten. ...
hmm wie meinst du das ?
Ich hab die Variante von Nemoinho mal versucht und Sie etwas variert.
Somit kommt villeicht mehr der Tabelleneffect herraus.
Hier
Beitrag zuletzt geändert: 31.5.2010 8:01:48 von psd -
Naja du arbeitest damit, dass man auf einer Seite in Prozent angibt, wie etwa 24% und auf der anderen dann die restlichen 76%, aber das Problem dabei ist, dass wenn man absolut angibt, wie etwa 200px man ja immer noch den Rest angeben muss, bei unterschiedlicher Auflösung ist das unterschiedlich und deshalb nicht umsetzbar. Den zweiten Ansatz schau ich mir an und editiere dann nochmal.
€dit: Jop das ist ja im großen und ganzen dasselbe wie bei nemo... Also werde das wohl so lösen müssen, auch wenns mir nicht wirklich gefällt.^^
€dit: So hab es jetzt in meine Website eingebaut und es funktioniert prima.
Den Trick muss ich mir unbedingt merken^^
Beitrag zuletzt geändert: 1.6.2010 12:03:21 von reimann -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
