Positionierungsproblem CSS

[munkmill]

Huhu an alle,

ich habe ein Problem mit der Positionierung mehrerer Divs nebeneinander.
Und zwar sieht das CSS wie folgt aus:



#menu {
background-color: #ffffff;
float: left;
height: 10em;
min-width: 20%
}

#content {
background-color: #d2d2d2;
float: right;
height: auto;
margin: 1em 2em 2em 1em;
min-width: 65%;
text-align: center;
}

Das HTML dazu


<div>menu</div>
<div>content</div>

:)

Wenn ich nun die Schrift vergrößere. ändern sich die Breiten der Container. Das ist auch gut so. Aber das Content-DIV verschiebt sich dann nach unten, so dass man vertikal scrollen muss.
Ich hätte aber gern, dass die Positionierung erhalten bleibt und man horizontal scrollen muss. Ist das irgendwie machbar?

Vielen Dank für jeden Hinweis,

Jan

[Pingu]

Ich würde an Deiner Stelle die Positionierung absolut machen, siehe hier: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Pingu

[munkmill]

Daran hatte ich auch schon gedacht, allerdings machen mir die Abstände der DIVs dann ein Sorgen, da sich die Höhe der Boxen ja dynamisch an die geänderte Schrift anpasst.

Boxen, die unter den anderen liegen, verschieben sich dahinter.
Ich hoffe, man kann mir folgen :o

Inzwischen sind links zwei kleine DIVs übereinander. Daneben ist das große (Inhalts-)DIV, welches im großen und ganzen auch ordentlich absolut positioniert wird. Nur das linke untere DIV schiebt sich über das darüber befindliche.

Nochmal der geänderte Code:


#content {
background-color: #d2d2d2;
margin-top: 1em;
position: absolute;
right: 1em;
left: 25em;
text-align: center;
width: 65%;
}

#designer {
background-color: #d2d2d2;
margin-top: 1em;
left: 1em;
top: 25em;
position: absolute;
text-align: left;
width: 20em;
}

#subnav {
background-color: #b6dbda;
margin-top: 1em;
margin-bottom: 2em;
position: absolute;
left: 1em;
width: 20em;
text-align: left;
}

Der Content ist das große rechte DIV, Subnav liegt links daneben, Designer liegt auch links neben dem Content, aber unter dem Subnav und schiebt sich leider über das Subnav-DIV.

Viele Grüße, Jan

[Pingu]

Wenn Du absolut positionierst (absolut zur Seite) solltest Du nicht mit "em" arbeiten, sondern mit "px". Den "em" passt sich immer der Schriftgröße an. Denn "1em" ist genau die Breite eines "m" der aktuell gewählten Schriftart und -größe.

Pingu

EDIT: Positioniere doch die wesentlichen Elemente zu top:0 und left:0 und setzte dann entsprechend den margin-top bzw margin-left. Dies habe ich hier (www.pingu.info) auch so gemacht. Eben wie auf dem Beispiel von oben empfohlen.

[bischi]

Nur so ne Frage: Wäre in deinem Fall eine Tabelle nicht einfacher und sinnvoller?

MfG Bischi

[munkmill]

@Pingu:

Das ist schon klar. Allerdings bekomme ich dann ja keine variablen Abstände hin. Wie gesagt, die Schriftgröße lässt sich direkt auf der Seite ändern. Wenn ich per px die Abstände festlege, passt es auf gar keinen Fall mehr :-/

@bischi:

Einfacher wäre es auf jeden Fall. Allerdings soll es barrierefrei werden, was den Einsatz von CSS voraussetzt.

Jan

[Reaper]

Kommt eine Angabe per % in Frage?

Zu Tabellen: Tabllen sind eigentlich dazu da etwas tabellarisch darzustellen, aber nicht fürs Layout...

[munkmill]

Kommt eine Angabe per % in Frage?

Das scheint nicht zu funktionieren, die DIVs bewegen sich dann gar nicht. Die Variante per em funktionierte ja soweit, allerdings, was ja auch logisch ist, schieben sich die DIVs bei sehr kleinen Schriften übereinander, egal, welche Werte man für margin angibt.

Jan

[Reaper]

Weiß es jetzt genau aber es könnte sowas wie min-margin geben
wenn du da einfach ein minimum bestimmst in px oder sonst was daß die div sich nicht mehr überlagern?

[bischi]

Kommt eine Angabe per % in Frage?

Zu Tabellen: Tabllen sind eigentlich dazu da etwas tabellarisch darzustellen, aber nicht fürs Layout...

Jaja, und Frames dürfen auch nicht gebraucht werden...

Viele gute Seiten sind mit Tabellen gemacht...

Mfg Bischi

[munkmill]

Ok, Frames kommen auch nicht in Frage, da ich die WAI-Richtlinien einhalten muss.

Inzwischen habe ich das Layout überarbeitet. Das Problem mit überlappenden DIVs habe ich erneut per float gelöst.
Leider, und das war auch die Motivation, von float weg zu kommen, schiebt sich bei Vergrößerung der Inhalt nach ganz unten, so dass man immer nach unten scrollen muss.
Ich hätte es lieber gesehen, dass man seitlich scrollen muss, da dann wenigstens der Navigationsbereich links neben dem Inhalt stände. Aber das klappt leider nur mit absoluter Positionierung, was eben das Überlappen hervorruft.

Wenn noch jemand ne Idee hat, kann er sich ja melden.

Viele Grüße, Jan

[Pingu]

@Das ist schon klar. Allerdings bekomme ich dann ja keine variablen Abstände hin. Wie gesagt, die Schriftgröße lässt sich direkt auf der Seite ändern. Wenn ich per px die Abstände festlege, passt es auf gar keinen Fall mehr :-/
Wie immer: Die richtige Mischung macht's ;).

Anders ausgedrückt: Du mußt Dir bei jeder Angabe Gedanken machen, ob diese Angabe in "em" oder "px" erfolgen soll. Z.B. ist die Positionierung der Boxen (ob absolut oder mit Hilfe von floats) etwas was unabhängig von der Größe der gewählten Schrift immer abhängig von der gewählten Bildschirmgröße sein sollte (Außnahme vielleicht die Breite eine Link-Liste). Wenn jetzt zum Beispiel die Boxen absolut positioniert werden und ein Margin in "px" mitgegeben wird, paßt sich die Größe des verfügbaren Inhaltes immer an die Größe des Bildschrims an, unabhängig von der Schrift.
Dagegen sollten alle Schrift-relevanten Angaben in "em" erfolgen, z.B. der Abstand zwischen den Absätzen.

Nimm Dir doch einmal eine Textverarbeitung (oder auch eine Seite Papier) als Vorbild. Wenn hier eine Layoutvorschrift erstellst, definierst Du auch erst einmal Boxen und sagst wo was hinein soll. Diese Boxen werden in Abständen relativ zum verwendeten Format definiert. Später dann füllst Du in die Boxen den Text. Dieser Text und Abstände innerhalb des Textes werden in Abhängigkeit von der verwendeten Schriftgröße gewählt.
Beispiel: Bei Word (bei TeX oder anderen wird dieses Ähnlich sein) stellst Du die Randangaben und die Angaben für die Kopf- und Fußzeile in "cm" bzw. "in" ein. Dagegen die Zeilenhöhe und der Abstand zwischen den Absätzen wird immer in Relation zur verwendeten Schrift eingestellt.

Pingu