nicht angemeldet
Layout - Positionierungsproblem
Hallo,
ich habe anhand der Beispiele von D.R. angefangen eine Homepage zu basteln.
Zwei Probleme habe ich noch (ich bin noch CSS-Neuling):
Wie bekomme ich den Balken ganz nach oben?
(#Balken {margin-top:0em;}) klappt nicht
Wie schaffe ich es, dass der Balken direkt an den Navi-Bereich anschließt?
Ich hatte gedacht
#aussen left: 0;
#navi margin-left: 1em;
width: 18em;
Gibt zusammen 19em;
also
#Balken margin-left:19em;
Aber Pustekuchen!
Irgendwie checke ich das System noch nicht ganz und hoffe deshalb auf Eure Unterstützung.
Gruß
Peter
Hier mein Coding - hoffentlich nicht zu lang:
[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine Homepage</title>
<style type="text/css">
#aussen {position:absolute;
left:0;
top:0;
overflow:auto;
max-height:100%;}
#navi {margin:0;
margin-top:1.5em;
margin-left:1em;
border:1px solid red;
width:18em;
padding:0.3em;
list-style:none;}
#navi a {display:block; margin-top:1em;}
html>body #aussen{position:fixed;}
#content {margin-left:21em;
margin-top:1em;
padding:0.5em;}
#spacer {margin-top:200em;}
#Balken {margin-top:0em;
margin-left:19em;
height:2.0em;
text-align:center;
font-size:1.5em;
background-color:#5A7333;
color:#E0FFA0;
font-family:"comic sans ms";
font-weight:bold;}
</style>
</head>
<body>
<div id="aussen">
<ul id="navi">
<h3> </h3>
<h3> </h3>
<h3>Die ersten Beiträge</h3>
<a href="v001.htm">Seite 1</a>
<a href="v002.htm">Seite 2</a>
<a href="v003.htm">Seite 3</a>
<a href="v004.htm">Seite 4</a></b>
</ul>
</div>
<div id="Balken">
<h2>Titel der Seite</h2> ... Untertitel
</div>
<div id="content">
<br><br>
<br><br>
<h3 style="text-align:center">Diese Seite befindet sich im Aufbau</h3>
<h3 style="text-align:center">...</h3>
<h3 style="text-align:center">...</h3>
<h3 style="text-align:center">...</h3>
<p id="spacer">- Seitenende -</p>
</div>
</body>
</html>
-
Hallo,
ich habe anhand der Beispiele von D.R. angefangen eine Homepage zu basteln.
Zwei Probleme habe ich noch (ich bin noch CSS-Neuling):
Wie bekomme ich den Balken ganz nach oben?html {padding:0em; }
body {margin:0em; padding:0em; }
Erläuterung:
Der Rand ist ist die Folge des standardmäßigen browserstyles, der ein wenig Rand vorsieht. Durch das festlegen der CSS-Eigenschaft für Innenabstand und Außenabstand für html und body setzt du diese Abstände auf Null.
Das andere Problem könnte sich dadurch von selbst lösen.
Gruß
Stareagle
-
Hallo,
html {padding:0em; }
body {margin:0em; padding:0em; }
hat leider nur den Balken ein wenig verlängert, sonst keine Änderung.
Gruß
Peter
-
-
Hallo,
ich habe anhand der Beispiele von D.R. angefangen eine Homepage zu basteln.
Freut mich :)
Zwei Probleme habe ich noch (ich bin noch CSS-Neuling):
Wie bekomme ich den Balken ganz nach oben?
(#Balken {margin-top:0em;}) klappt nicht
Wie schaffe ich es, dass der Balken direkt an den Navi-Bereich anschließt?Zusätzlich zu dem, was stareagle schon geschrieben hat:
Eine Überschrift kann auch Außenabstände enthalten!
Setze also den Margin-Wert der Überschrift auf 0.Weiterhin solltest du nicht mit <h2> anfangen. Falls dir h1 zu groß ist, kannst du sie mit CSS kleiner machen.
Ich hatte gedacht
[...]
Aber Pustekuchen!s.o.
Irgendwie checke ich das System noch nicht ganz und hoffe deshalb auf Eure Unterstützung.
Keine Angst, das kommt noch.
Hier mein Coding - hoffentlich nicht zu lang:
Nö, so konnte ich mir eine Datei daraus erstellen. Ansonsten wäre eine Verlinkung natürlich am Besten.
[code lang=html]
[...]
#aussen {position:absolute;
left:0;
top:0;
overflow:auto;
max-height:100%;}Tausche das „max-height“ doch lieber gegen ein „height“. Das hat den gleichen Effekt, funzt aber auch im Opera 9. Auf meiner Seite habe ich das mittlerweile korrigiert.
#Balken {margin-top:0em;
margin-left:19em;
height:2.0em;
[...]}Du solltest die height-Angabe weg lassen, damit sich die Box an den Text anpassen kann.
mfg. Daniel
-
Hallo Daniel,
ich habe die Änderungen (hoffentlich richtig) vorgenommen (rechts abgesetzt), der Balken sitzt aber immer noch zu weit rechts.
Ich habe jetzt
#Balken {....
margin-left:13.2em;
...angegeben, da stimmt in etwa.
Aber warum so eine komische Angabe?
Die müsste man doch aus den übrigen Angaben errechnen können (oder noch besser angeben in der Art: Hänge den rechten 'Frame' direkt rechts an den linken an).Anschliessend nochmal das Coding, einen Link kann ich leider nicht schicken, da ich noch keine Homepage habe, wo ich es speichern könnte.
Mit dankbarem Gruß
Peter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Meine Homepage</title> <style type="text/css"> html {padding:0em; } body {margin:0em; padding:0em; } h1 {margin:0em; } #aussen {position:absolute; left:0; top:0; overflow:auto; height:100%;} /* max-height:100%;} */ #navi {margin:0; margin-top:1.5em; margin-left:1em; border:1px solid red; width:18em; padding:0.3em; list-style:none;} #navi a {display:block; margin-top:1em;} html>body #aussen{position:fixed;} #content {margin-left:21em; margin-top:1em; padding:0.5em;} #spacer {margin-top:200em;} #Balken {margin-top:0em; margin-left:13.2em; /* height:2.0em; */ text-align:center; font-size:1.5em; background-color:#5A7333; color:#E0FFA0; font-family:"comic sans ms"; font-weight:bold;} </style> </head> <body> <div id="aussen"> <ul id="navi"> <h3> </h3> <h3> </h3> <h3>Die ersten Beiträge</h3> <a href="v001.htm">Seite 1</a> <a href="v002.htm">Seite 2</a> <a href="v003.htm">Seite 3</a> <a href="v004.htm">Seite 4</a></b> </ul> </div> <div id="Balken"> <h1>Titel der Seite</h1> </div> <div id="content"> <h2 style="text-align:center"> ... Untertitel </h2> <br><br> <br><br> <h3 style="text-align:center">Diese Seite befindet sich im Aufbau</h3> <h3 style="text-align:center">...</h3> <h3 style="text-align:center">...</h3> <h3 style="text-align:center">...</h3> <p id="spacer">- Seitenende -</p> </div> </body> </html>-
Hallo,
ich habe die Änderungen (hoffentlich richtig) vorgenommen (rechts abgesetzt), der Balken sitzt aber immer noch zu weit rechts.
Versteh ich jetzt nicht so ganz. Wie willst du es haben? Der Balken ist jetzt genau rechts-oben. Den Abstand nach links, kannst du ja ganz einfach per margin regeln.
Ich habe jetzt
#Balken {....
margin-left:13.2em;
...angegeben, da stimmt in etwa.
Aber warum so eine komische Angabe?
Die müsste man doch aus den übrigen Angaben errechnen könnenKann man doch.
margin-left der Navi: 2*1em;
border der Navi: 2*1px;
padding der Navi: 2*0.3em;
breite der Navi: 18em;
-----------------------------
Gesamt: 20.6em + 2pxmacht bei 16px-Umrechnung: 329,8px
Balken: hier hast du
font-size:1.5em
angegeben. Dadurch wirken alle em-Angaben mit 150%.margin-left:13.2em * 1.5 * 16 = 316px;
Kommt doch in etwa das Gleiche raus :-)
Vielleicht hab ich jetzt noch ein paar Faktoren vergessen.(oder noch besser angeben in der Art: Hänge den rechten 'Frame' direkt rechts an den linken an).
Nö, dann müsstest du float verwenden.
Anschliessend nochmal das Coding, einen Link kann ich leider nicht schicken, da ich noch keine Homepage habe, wo ich es speichern könnte.
Empfehlung: Funpic (für private HPs IMHO der beste Anbieter; kostenlos)
[Quellcode]
Sieht doch gut aus :)
mfg. Daniel
-
Hallo,
warummargin-left der Navi: 2* 1em;
ich habe doch angegeben
margin-left:1em ?Gesamt: 20.6em + 2px
macht bei 16px-Umrechnung: 329,8px
Wie kommst Du auf 1em = 16px. Habe ich diesen Faktor indirekt in meinem HTML angegeben?
Und warum 329,8? Sind es nicht vielmehr 331.6?Viele Fragen auf einmal?
Mfg. Peter-
Hallo,
warum
margin-left der Navi: 2* 1em;
ich habe doch angegeben
margin-left:1em ?Oops, ja du hast Recht, hier hätte ich das „2*“ weglassen sollen.
Gesamt: 20.6em + 2px
macht bei 16px-Umrechnung: 329,8px
Wie kommst Du auf 1em = 16px. Habe ich diesen Faktor indirekt in meinem HTML angegeben?
Die Einheit „em“ bezieht sich auf die Einstellung im Browser. (FF: Extras > Einstellungen > Inhalt). Da 16px die Standardeinstellung ist, habe ich die einfach mal als Bezug genommen. Letztlich ist es aber egal, in wie viele Pixel man umrechnet, da das Verhältnis in etwa gleich bleibt.
Und warum 329,8? Sind es nicht vielmehr 331.6?
Wie kommst du darauf?
Ich habe jetzt nochmal gerechnet, ohne „margin-left“ 2x zu berechnen und siehe da: 315,6px (Platzverbrauch der Navi)! Passt doch perfekt zu den 316px vom „margin-left“ des Balkens. Sieht also schonmal ziemlich logisch aus.
Viele Fragen auf einmal?
Ach was!
Bei der Einheit „em“ musst du lediglich folgende Grundsätze beachten:* Ausgangspunkt für Breite,Rahmen usw. ist immer die Schriftgröße des Elements
* Falls diese ^^ nicht in einer absoluten Einheit angegeben ist, richtet sich diese wiederum nach der Schriftgröße des übergeordneten Elements.
* Falls keinem der übergeordneten Elemente eine absolute Einheit zugewiesen wurde, richtet sich die Schriftgröße nach der Browsereinstellung.Hört sich jetzt vielleicht etwas kompliziert an - ist es aber nicht. Das Schöne an „em“ ist, dass der Benutzer entscheiden kann, wie groß er das Seitenlayout haben will, ohne dass selbiges gleich auseinanderfällt.
Du kannst das Layout ja mal zoomen, indem du Strg gedrückt hältst und ein Wenig das Mausrad drehst. Wenn du alles in „em“ festgelegt hast, sollte das wunderbar funktionieren.
mfg. Daniel
-
Hallo,
Gesamt: 20.6em + 2px
macht bei 16px-Umrechnung: 329,8px
Und warum 329,8? Sind es nicht vielmehr 331.6?
Wie kommst du darauf?
Da hatte ich Dein obiges Beispiel genommen:
20.6em + 2px => 20.6*16 + 2 = 331.6.
Aber das ist ja inzwischen überholt.
Jetzt werde ich mich erst mal in Deine weiteren Ausführungen vertiefen und Dich vorerst in Ruhe lassen.
Schönen Sonntag
Peter-
Hallo,
Gesamt: 20.6em + 2px
macht bei 16px-Umrechnung: 329,8px
Und warum 329,8? Sind es nicht vielmehr 331.6?
Wie kommst du darauf?
Da hatte ich Dein obiges Beispiel genommen:
20.6em + 2px => 20.6*16 + 2 = 331.6.
Aber das ist ja inzwischen überholt.Ah, jetzt sehe ich meinen Rechenfehler! Ich hatte die 2px als 0.2px in das Ergebnis einfließen lassen...
mfg. Daniel
-
-
-
-
-
-