• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS: Abstand zu unterem Bildschirmrand

K

Kirschtomate

New member
Geehrtes Forum,

leider schaffe ich es nicht, dass meine Seite einen gewissen Abstand zum unteren Bildschirmrand hat. Ich benutze quasi eine Mastervorlage, die meine Seite (Breite: 1000 Pixel) horizontal mittig ausrichtet.

Code: 
#master {position:absolute; width:1000px; left:50%; margin-left:-500px}
body {font-family:verdana, sans-serif; font-size:9pt}

Ich denke, dass daher "margin-bottom" im "body" nicht funktioniert. Weiß jemand eine elegante Lösung wie ich meine Seite in der Horizontalen mittig ausrichten kann und gleichzeitig "margin-bottom" funktioniert?

Schöne Grüße

Edit: Auch unter "#master" funktioniert "margin-bottom" nicht!
 
Zuletzt bearbeitet:
Also erstmal zentriert man #master anders:
PHP: 
#master{width:1000px;margin:0 auto;}
Dann versucht man, den Abstand nach unten herzustellen:
PHP: 
#master{width:1000px;margin:0 auto 50px auto;}
Wenn das nicht klappt, nimmt man ein beliebiges Block-Level-Element, welches man am Ende des Dokumentes (vor </body>) einfügt, welches die gewünschte Höhe, sprich Abstand, hat:
PHP: 
<div style="height:50px;></div>
 
Danke, hat super geklappt:

#master{width:1000px; margin:0 auto; margin-top:40px; margin-bottom:25px;}

Ein Problem habe ich allerdings noch. Manche Teile meiner Seite haben mehr Inhalt, andere weniger. Das bedeutet ich habe zum Teil einen Scrollbalken rechts, aber eben nicht immer. Dadurch "hüpft" meine Seite bei jedem Wechsel in mittige Position. Lässt sich das unterbinden?
 
Jetzt habe ich immer einen Scrollbalken. Das sieht etwas "schräg" aus, wenn sich auf der Seite nur wenig Inhalt befindet. Besser wäre es, wenn die Seite nur mittig ist, wenn kein Scrollbalken vorhanden und im Falle eines Scrollbalkens leicht unmittig - aber an gleicher Stelle - ist. Ich nehme an, dass lässt sich nicht so einfach realisieren.
 
Ich habe gerade nachgesehen (IE8), der ausgegraute Scrollbalken ist klasse, allerdings klebt meine Seite nun plötzlich am linken Rand.

#master{width:1000px; margin:0 auto; margin-top:40px; margin-bottom:25px;}

In Opera und Firefox gibt es hiermit keine Probleme. Irgendwie ist da heute der Wurm drinnen.
 
Hab' den IE9 geladen, den PC neu gestartet und deinen Code verwendet, trotzdem klebt meine Seite im IE weiter beharrlich am linken Rand. Dieser IE ist eine echte Plage!
 
Das liegt sicher nicht am IE.
Irgendwas in Deinem Code verursacht dies.
Aber ohne kompletten Code oder einen Testlink kann man das nicht herausfinden.
 
Code: 
<style type="text/css">
	#master {width:1000px; margin:40px auto 25px auto;} 
	body {font-family:verdana, sans-serif; font-size:10pt}
	p {font-family:verdana, sans-serif; font-size:10pt; margin-top:8px; margin-bottom:8px}
	.graphik_head {margin-bottom:8px}
	.graphik_foot {margin-top:15px; margin-bottom:8px}
	.site_title {margin-top:20px; margin-bottom:20px; font-size:10pt; font-weight:bold}
	.information {margin-top:20px; margin-bottom:20px; font-size:10pt}
	.tab {width:170px; display:block; float:left; font-style:italic}
	.distance {margin-left:170px}
	a:link,a:visited {color:#000033; text-decoration:none}
	a:hover {color:#660000}
 </style>

Das ist mein CSS Block. Alles weitere funktioniert auch im IE.
 
...ist wohl viel zu umfangreich, um es hier zu posten. Ich rufe meinen Header, ebenso wie meinen Footer, mittels einer PHP Funktion auf. <div id="master"> ist immer die erste Zeile nach <body> und </div> immer die letze vor </body>. Dazwischen ist je nach Seite eine Menge anderer Code. Das Problem lässt sich wohl nicht über das I-Net lösen, ich seh's mir später an. Jedenfalls vielen Dank für deine Hilfe!
 
Die Erleuchtung. Ich habe den erst besten von SELFHTML kopiert und es funktioniert nun auch im IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In das Thema "Doctype" muss ich mich wohl oder übel erst einlesen. Ich verwende unter anderem vorläufig mit "placeholder" eine HTML5 funktion und meine Zeilenumbrüche sind <br /> Tags (XHTML?). Naja, wenigstens wird mir nicht fad ;)

Außerdem habe ich #master gelöscht und die entsprechenden Angaben in den Body geschrieben:

body {width: 1000px; margin:40px auto 25px auto; font-family:verdana, sans-serif; font-size:9pt}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben