✔ Margin-Top erzeugt einen Scrollbalken

mR.fLopPy

mR.fLopPy

Erfahrenes Mitglied
Hallo!

Ich habe folgendes Problem. Ich bräuchte oberhalb und unterhalb der Webseite eine Lücke von 20px, damit der Rahmen besser zur Geltung kommt. Weiters soll die Webseite immer in der Mitte ausgerichtet werden (das hab ich per "margin 0 auto;" gelöst).

Wichtig ist das wenn die Webseite wenig Text beinhaltet der Weißraum zum Abschluss der Webseitenende hinzugefügt wird. Ich habe bereits probiert mittels margin-top und margin-bottom einen Abstand hinzuzufügen nur erzeugt margin-top ständig einen Scrollbalken. Auch lässt sich die die Höhe mit "min-height: 100%;" nicht erstellen, da dadurch ein Scrollbalken ensteht.

Hier ein Screenshot der Webseite:

http://img109.imageshack.us/img109/3174/screenshoti.gif

Und hier der CSS Code:

Code: 
/* RESET
 */
html, body { margin: 0px; height: 100%; }
body { background:url(../images/pattern.gif); }
h1, h2, h3, h4, h5, h6 { margin: 0px; }
li, ul { margin: 0px; padding: 0px; }


/* GLOBAL DEFINITIONS
 */

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 76%; }

/* MAIN
 * Regelt nur die Hintergrundfarbe
 */
#main { background-color:#FFFFFF; margin: 0 auto; width: 720px; border: 5px solid #7f7a78; }


/* HEADER / NAVIGATION / BODY
 */
#header { height: 120px; background-color:#333333; }

#nav { padding-top: 125px; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; }
#nav li { list-style: none; float: left; padding-left: 28px; display: block; }
#nav li a { text-decoration: none; color:#333333; padding: 2px 14px; }
#nav li a:hover { background-color:#c10000; color: #FFFFFF; }

#content { float: left; margin: 10px; line-height: 1.6em; padding: 15px 10px;x background:#CCCCCC; }
#content p { padding-left: 5px; }
#content p .right { float: right; margin: 5px 0px 5px 10px; border: 1px solid #999999; padding: 5px; }
#content p .left { float: left; margin: 5px 10px 5px 0px; border: 1px solid #999999; padding: 5px; }
#content ul { padding-left: 25px; }

#footer { clear: left; position: relative; background:url(../images/footerbg.jpg); height: 28px; }
#footer .content { position: absolute; color:#FFFFFF; font-size: 0.8em; top: 9px; left: 380px; }

Ich hoffe ihr könnt mir weiter helfen.

Mit besten Grüßen
floppy
 
Zuletzt bearbeitet:
Moin,

da kommt schlichtweg das "Box-Modell" zum Tragen, in dem zu der 100%-Höhe der Außenabstand hinzuaddiert wird, und somit der vertikale Scrollbalken erscheint.

Eine Lösung, den Scrollbalken zu vermeiden, gibt es da nicht, solange du an der 100%-Höhe für den Viewport und Dokumentkörper festhälst.

Ansonsten lässt sich dein Vorhaben, einen oberen und unteren Abstand zum Fensterrand einzurichten, mit der padding-Eigenschaft umsetzen:

CSS: 
html, body { margin: 0px;  /*height:100%;*/  /* auskommentiert = deaktiviert */ }
body { background:url(../images/pattern.gif); padding:20px 0; }

mfg Maik
 
Hallo Maik!

Danke für deine prompte Antwort. Was wäre wenn ich über der Main noch einen Div-Tag setzen würde der die 100% min-height erfüllt und dann ein Padding mache um den Innenabstand zum Main-Tag oben und unten um 20px zu vergrößeren?

Ich hab mich jedenfalls damit abgefunden, dass ein Scrollbalken entsteht. Mich plagt eher jetzt ein anderes Problem, nämlich dass der IE7 ärgerlicherweise beim Floaten der Content-ID meine Links überschreibt. Der IE8 und der IE6 interpretieren dies korrekt.

Hier nochmals der überarbeitete Code:

Code: 
#main { background-color:#FFFFFF; margin: 20px auto; width: 720px; border: 5px solid #7f7a78; }


/* HEADER / NAVIGATION / BODY
 */
#header { height: 120px; background-color:#333333; background:url(../images/banner.jpg) repeat-x; }

#nav { padding-top: 125px; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; }
#nav li { list-style: none; float: left; padding-left: 28px; display: block; }
#nav li a { text-decoration: none; color:#333333; padding: 2px 14px; }
#nav li a:hover { background-color:#333333; color: #FFFFFF; }

#content { float: left; margin-top: 10px; line-height: 1.6em; padding: 15px 10px; background:#cccccc; }
#content p { padding-left: 5px; }
#content p .right { float: right; margin: 5px 0px 5px 10px; border: 1px solid #999999; padding: 5px; }
#content p .left { float: left; margin: 5px 10px 5px 0px; border: 1px solid #999999; padding: 5px; }
#content ul { padding-left: 25px; }

Ich hoffe du kannst mich diesbezüglich auch erleuchten, da es auf den 1. Blick so aussieht als hätte Microsoft in der Entwicklung einen Rückschritt zw. 6 und 8 gemacht. :)

Beste Grüße
floppy
 
Ein Link zu deiner Seite wäre hier ganz hilfreich, um das Ergebnis in den Browsern betrachten zu können.

Zu deiner ersten Frage: Dies habe ich schon mit meinem Lösungsvorschlag umgesetzt :-)

mfg Maik
 
Ich würde mal sagen, dass dir der IE7 die height:120px-Deklaration für #header krumm nimmt, denn für das darin eingebundene #nav hast du padding-top:125px festgelegt :-)

Lösung:
CSS: 
#header { min-height:120px; background-color:#333333; background:url(../images/banner.jpg) repeat-x; }
* html #header { height:120px; } /* "Mindesthöhe" im IE6 */

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück