PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hab' ich CSS-Layouts verstanden oder nicht?


zeckensack
2006-08-18, 14:09:20
Ich hab' hier früher schonmal für viel Ärger gesorgt, weil ich ein Tabellenlayout vorgezeigt habe.
Wollte mich mittlerweile weiterentwickeln und lernen wie man mit CSS Layouts macht, und habe mir dafür mal den Code von csszengarden angeschaut und natürlich auch SelfHTML gewühlt.

Jetzt hab' ich auch was was in den Grundzügen schonmal funktioniert, aber irgendwie frage ich mich noch ob das alles sein kann, denn es kommt mir bissl primitiv vor. Mehr konnte ich leider aus den genannten Quellen noch nicht lernen.

Auf's wesentliche reduziert der aktuelle Stand:
CSS:body { margin:0px; padding:0px; color:#000; background-color:#FFF; }
.left { width:150px; padding:8px; position:absolute; top:0px; left:0px; background-color:#BCFFBC;}
.right { padding:8px; position:absolute; top:0px; left:0px; margin-left:166px; background-color:#FFFFFF; }
HTML:<!DOCTYPE blabla>
<html>
<HEAD>
blabla
</HEAD>
<body>

<div class="left">Text da so links. Text, Text, Text.</div>
<div class="right">Text mehr rechts.</div>
<p>Text unten drunter.</p>
</body>
</html>
Das ist ja quasi geschummelt. Der Container rechts und der Container links überlappen sich einfach ganz plump. Das Attribut magin-left im CSS sorgt nur dafür dass eine feste Anzahl Pixel des rechten Containers keine Inhalte hat. Die Definition ist nicht clever genug um in den überlappenden Bereich nichts zu rendern. Was passiert wenn das linke div einen Inhalt hat der breiter als 166px ist, brauche ich ja wohl nicht zu erwähnen. Ist das nicht eigentlich übel geschummelt? Ist das alles was man mit CSS machen kann: übel schummeln?

Ich hätte mir gewünscht dass es diese Überlappungen gar nicht gibt, und man stattdessen ~rechteckige Felder definieren kann die dann relativ zueinander angeordnet werden. Gibt es keine Möglichkeit die Position von divs im Bezug auf andere divs zu beschreiben, zB grob so ähnlich wie bei Java-GUI-Layoutmanagern?

MadMan2k
2006-08-18, 14:24:29
also erstmal ist css deutlich komplexer als irgendwelche layout manager, da es auch da verhalten beim Überlappen behandelt.
Ansonsten bist du dafür verantwortlich dass der inhalt nicht größer als das div werden kann. (bzw. mit overflow: scroll schummeln)
Die breite der divs kannst du in relativen einheiten angeben und die divs selbst relativ zueinander ausrichten indem du position: relative benutzt.

edit:
und margin ist der außenabstand; ergo überlappt sich da nix.

zeckensack
2006-08-18, 15:08:22
also erstmal ist css deutlich komplexer als irgendwelche layout manager, da es auch da verhalten beim Überlappen behandelt.
Ansonsten bist du dafür verantwortlich dass der inhalt nicht größer als das div werden kann. (bzw. mit overflow: scroll schummeln)Ja, ist klar. Ich dachte nur es gibt evtl einen Automatismus dafür. Ich muss ja so wie ich es derzeit anstelle immer synchron width des linken und margin-left des rechten divs ändern. Ich suche die Möglichkeit mit der ich das auf eine einzige Änderung reduzieren kann :)
Die breite der divs kannst du in relativen einheiten angeben und die divs selbst relativ zueinander ausrichten indem du position: relative benutzt.Wie geht das? :|
Bei SelfHTML (http://de.selfhtml.org/css/eigenschaften/positionierung.htm) steht nur folgendes:Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.

<...>

Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.Daraus werde ich nicht schlau.
edit:
und margin ist der außenabstand; ergo überlappt sich da nix.Ja, hast recht. Sonst wäre die Hintergrundfarbe ziemlich undefiniert :ugly:

MadMan2k
2006-08-18, 15:27:33
Ja, ist klar. Ich dachte nur es gibt evtl einen Automatismus dafür. Ich muss ja so wie ich es derzeit anstelle immer synchron width des linken und margin-left des rechten divs ändern. Ich suche die Möglichkeit mit der ich das auf eine einzige Änderung reduzieren kann :)
Wie geht das? :|
Daraus werde ich nicht schlau.
ich meinte das hier:
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.
wenn du dem elternelement position: relative gibst wird das erstmal nicht verschoben, du kannst aber die kindelemnte daran ausrichten...

Gast42
2006-08-18, 16:26:26
schau dir mal www.yaml.de an, den Punkt Modifikationen und insbesondere subtemplates. Das hat mir zum Verständnis sehr geholfen.

DanMan
2006-08-18, 19:48:26
Das ist ja der Gag daran, dass man mit CSS auch Bereiche überlappen lassen kann. Warum das für dich geschummelt ist verstehe ich beim besten Willen nicht.

Man könnte sagen, dass relativ positionierte Elemente ihre Auswirkung zeigen, wenn diese auf der gleichen Hierachie im Code liegen. Absolut positionierte hingegen beziehen sich auf das Elternelement, und sind quasi aus dem Fluss des Dokuments herausgehoben.

Ist aber verwirrend, das gebe ich zu. Habs am Anfang auch nicht wirklich begriffen, aber das kam mit der Erfahrung/Routine. Installier dir doch die Web Developer Toolbar für Mozilla Browser und spiel ein wenig mit dem CSS von irgendwelchen Seiten. Hat mir sehr geholfen.

medi
2006-08-18, 22:37:09
http://www.gunnar-funke.de

auch wenns eigenwerbung ist aber die hp ist nur mit schummeln aufgebaut und setz als grundkonzept auf die div überlagerung ;)

geforce
2006-08-18, 23:56:27
http://www.gunnar-funke.de

auch wenns eigenwerbung ist aber die hp ist nur mit schummeln aufgebaut und setz als grundkonzept auf die div überlagerung ;)

Nicht böse sein, aber das sieht einfach bescheiden aus ;(

@Topic: Ich merk mir das ganze in der Reihenfolge wie die Seite geladen wird und irgendwie hat sich das mir so ganz gut erschlossen, aber man sieht das du auf dem besten Weg bist und wenn du dich jetzt weiter damit beschäftigst und vorallem strict lernst, kann eigentlich nichts schief gehen. Ich bin gerade auch am suchen nach einem Link von einem Tutorial was einem Freund von mir sehr geholfen hat das Ganze zu verstehen, ziemlich gut geschrieben ... ich poste nochmal wenn ichs finde!

MfG Richard ;)

PS: Ist sogar aus'm Forum: http://www.css4you.de/wslayout1/ex0010.html -- find ich persöhnlich gut erklärt =)

medi
2006-08-19, 09:19:17
warum sollt ich böse sein? geschmäcker sind halt verschieden und mir und meinem umfeld gefällts ;)