✔ Unschöner Abstand zwischen den Boxen

KlyX

KlyX

Grünschnabel
Hallo zusammen

Ich vermute, mein Problem ist ziemlich trivial. Habe mich aber bisher noch nie gross mit CSS befasst (ich weiss, ein grosser Fehler ;)), scheitere nun aber nach den ersten Erfolgen an einem komischen Problem:

Ich habe 6 untereinanderliegende DIV-Boxen. Eine Header-Box, eine Spacer-Box, eine Menubar-Box, dann nochmal der Spacer, die Mainbox und ganz am Schluss noch der Footer.

Sieht für den <body> Part so aus:

HTML: 
<body>
<div class="header">
</div>
<div class="spacer">
</div>
<div class="menubar">
</div>
<div class="spacer">
</div>
<div class="main"> 
<h3>Überschrift</h3>
  <p class="text">Dies ist ein Test so mit Hintergrundbild und so. Alles so mit CSS und so ;)<br />
  Blablablib blablablu sdg dfg dfg df
  </div>
<div class="footer">
<span class="text-small">Copyright (c) 2009 by gnadenkinder.de</span>
</div>
</body>

Die entsprechenden CSS-Klassen dazu:

HTML: 
/* Grundfarben und Hintergrund */
body {
	background-image: url(pct/background.jpg);
}

/* Boxen */
.header
{
	width: 1147px;
	height: 134px;
	text-align:center;
	margin:auto;
	 padding: 0;
	background-image: url(pct/header.gif);
}

.spacer
{
	width: 1147px;
	height:3px;
	margin:auto;
}

.menubar
{
	width: 1147px;
	height:30px;
	margin:auto;
	background-image: url(pct/menubar.gif);
}

.main
{
	width: 1147px;
	height:auto;
	margin:auto;
	background-image: url(pct/bg_main.gif);
}

.footer
{
	width: 1147px;
	height: 26px;
	text-align:center;
	margin:0 auto;	
	background-image: url(pct/footer.gif);
}


/* Textformatierungen */
.text
{
	margin-left: 15px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px
}

.text-small
{
	margin-left: 15px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px
}

h3
{
	margin-left: 15px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

Und zu sehen ist es hier:
http://www.gnadenkinder.info

Das Ergebnis sind nämlich unschöne Abstände zwischen dem zweiten Spacer und der Mainbox sowie zwischen der Mainbox und dem Footer.

Ich habe bereits nach Lösungen gesucht, aber weder mit padding noch mit float hats geklappt (bei float:left wird's dann linksbündig. Das geht auch mit einem !important beim margin nicht).

Welchen trivialen Fehler mache ich? Was sehe ich nicht?

Gruss
KlyX
 
Hi,

die unerwünschten Abstände ergeben sich durch die voreingestellten Polsterungseigenschaften der Blockelemente h3 und p.

Lösung: Zu Beginn des Stylesheets mit dem Universalselektor * für alle im HTML-Dokument enthaltenen Elemente diese Werte zunächst mal auf null zurücksetzen, und im Verlauf des Stylesheets spezifisch angeben, wo sie erwünscht sind.

CSS: 
* {
        margin:0;
        padding:0;
}

Falls du bei der Seitenentwicklung den IE6 berücksichtigst, empfehle ich zusätzlich für .spacer die overflow:hidden-Deklaration, damit das Element von ihm in der gewünschten Höhe angezeigt wird, und sich der Platzhalter für den Elementinhalt nicht an der globalen Schriftgröße orientiert, die höher ausfallen dürfte, wie die height:3px-Deklaration für besagte Klasse. ;)

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

Neue Beiträge

Zurück