nicht angemeldet
Anordnung von Containern
Hallo,
ich möchte eine "Frame"-Anwendung mit CSS erstellen, links das
Inhaltsverzeichnis, rechts zugehörige Information.
Im rechten Teil soll oben in einem farbigen Balken ein Titel stehen.
Der Balken soll direkt an den linken (Verzeichnis-) Teil
anschliessen und bis zum rechten Rand gehen.
Zuerst meine Frage, bevor ich die Details schildere.
Kann man die margin-left-Angabe u.a. auch in Abhängigkeit von den
Browsereinstellungen beim Anwender ermitteln?
Vor längerer Zeit habe ich im Selfhtml folgende 'Formel' zur
Ermittlung der Position eines containers gesehen:
margin-left der Navi + border der Navi +
2* padding der Navi width der Navi.
Da kam ich auf 19.6 em
Bei einer Font-Size in css von 75% von (standardmäßig) 16px = 12px
ergab dies 19.6*12 = 235.2px.
Bei einer font-size der Schrift in dem Balken von 2.5 em = 30px
ergab dies eine margin-left für den Balken von
235.2 / 30 = 7.84em.
Ich habe daher in CSS angegeben:
#Balken {margin-top:0em;
margin-left: 7.84em;
color:#E0FFA0;
background-color:#5A7333;
text-align:center;
font-size:2.5em;}
Das hat auch wunderbar gepasst, bis ich dahinter kam, dass man ja
die Schriftgröße im Browser individuell verändern kann.
Und da sieht das ganze dann nicht mehr schön aus.
Entweder der Balken reicht links in das Inhaltsverzeichnus oder es
klafft eine Lücke.
-
Vor längerer Zeit habe ich im Selfhtml folgende 'Formel' zur
Ermittlung der Position eines containers gesehen:margin-left der Navi + border der Navi +
2* padding der Navi width der Navi.Das ist so nicht richtig oder zumindest reichlich ungenau. Eine Grafik, die die Elementdimensionen erklärt, findest Du unter http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions.
Bei einer Font-Size in css von 75% von (standardmäßig) 16px = 12px
Du machst einen grundlegenden Fehler: Die Schriftgröße ist standardmäßig 100% bzw. 1em - und nichts anderes, weder 16px noch 12px, noch 75% oder sonstwas.
Wenn Dir die bei Dir voreingestellten 16 Pixel zu groß sind, dann ist der richtige Ort, dies zu ändern, die Konfiguration _Deines_ Browsers, nicht die Standardschriftgröße Deiner Webseiten.
ergab dies 19.6*12 = 235.2px.
Bei einer font-size der Schrift in dem Balken von 2.5 em = 30px
ergab dies eine margin-left für den Balken von
235.2 / 30 = 7.84em.em ist ein eigenständiges Maß mit einem ganz anderen Hintergedanken als px, das kannst Du nicht einfach 1:1 umrechnen.
#Balken {margin-top:0em;
margin-left: 7.84em;Das hat auch wunderbar gepasst, bis ich dahinter kam, dass man ja
die Schriftgröße im Browser individuell verändern kann.
Und da sieht das ganze dann nicht mehr schön aus.Es hindert Dich niemand daran, für solche Positionierungsabstände px oder noch besser % als Maß zu nutzen. em ist für sowas nicht so recht geeignet oder zumindest nur mit sehr viel Bedacht einzusetzen.
-
Es hindert Dich niemand daran, für solche Positionierungsabstände px oder noch besser % als Maß zu nutzen. em ist für sowas nicht so recht geeignet oder zumindest nur mit sehr viel Bedacht einzusetzen.
Ingo Turski schrieb: Gebe *alle* Breiten und Abstände in em an und Du hast ein Layout, dass sich dem Schriftgrad anpasst.
Jetzt bin ich total verwirrt.
Was ist nun RICHTIG(er)?
-
Hi,
Es hindert Dich niemand daran, für solche Positionierungsabstände px oder noch besser % als Maß zu nutzen. em ist für sowas nicht so recht geeignet oder zumindest nur mit sehr viel Bedacht einzusetzen.
Ingo Turski schrieb: Gebe *alle* Breiten und Abstände in em an und Du hast ein Layout, dass sich dem Schriftgrad anpasst.
Jetzt bin ich total verwirrt.
Was ist nun RICHTIG(er)?
es gibt hier kein richtig(er) oder falsch, sondern es kommt auf den konkreten Fall an.
Mit %-Angaben richtet sich die Elementbreite nach der Fensterbreite bzw. der Breite der Vorfahrenelemente. Bei schmalen Fenstern und großem Schriftgrad kann es dann leicht passieren, dass die Breite nicht zur Anzeige der Textinhalte ausreicht.Ein Beispiel für den sinnvollen Einsatz von % wäre die Aufteilung des Fensters in zwei "Spalten" von 40% und 60%.
Ein Beispiel für den sinnvollen Einsatz von em wäre width:15em für eine links floatende Navigation und margin-left:16em für den Inhaltsbereich.
Ein Beispiel für den sinnvollen Einsatz von px wäre bei einer Navigation, die ausschließlich aus Grafiken besteht gegeben.
Aber schau Dir dieses Beispiel einmal an und verändere den Schriftgrad (falls Du den IE7 nutzt, nicht die Zoom-Funktion).
freundliche Grüße
Ingo
-
-
-
Hi,
Das hat auch wunderbar gepasst, bis ich dahinter kam, dass man ja
die Schriftgröße im Browser individuell verändern kann.
Und da sieht das ganze dann nicht mehr schön aus.
Entweder der Balken reicht links in das Inhaltsverzeichnus oder es
klafft eine Lücke.dann hast Du etwas falsch gemacht. Gebe *alle* Breiten und Abstände in em an und Du hast ein Layout, dass sich dem Schriftgrad anpasst.
freundliche Grüße
Ingo