tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
902
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.05.09 22:56 #1
    KlyX KlyX ist offline Mitglied
    Registriert seit
    Apr 2004
    Beiträge
    10
    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-Code:
    <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-Code:
    /* 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
     
    Zitieren Zitieren
  2. 29.05.09 05:45 #2
    Maik Tutorials.de Gastzugang
    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.

    Code css:
    1
2
3
4

    * {
        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
     
    Zitieren Zitieren
  3. 29.05.09 13:00 #3
    KlyX KlyX ist offline Mitglied
    Registriert seit
    Apr 2004
    Beiträge
    10
    Pefekt

    Und schon wieder weas gelernt.
    Danke für die kompetente Hifle

    KlyX
     
    Zitieren Zitieren
« CSS geht nicht im IE8 | Keine Scrollbars beim Zusammenschieben des Fensters »

Ähnliche Themen

  1. verschieben von Inhalten zwischen 2 Select Boxen
    Von Antispy im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 27.08.10, 11:51
  2. IE 7 Abstand zwischen tr
    Von lili222 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 23.11.09, 16:13
  3. [CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?
    Von Maik im Forum Webmaster FAQ
    Antworten: 0
    Letzter Beitrag: 19.04.08, 08:57
  4. Abstand zwischen <ul> und <li>
    Von waswiewo im Forum CSS
    Antworten: 5
    Letzter Beitrag: 06.12.07, 07:33
  5. Abstand zwischen den DIV
    Von Tangarama im Forum CSS
    Antworten: 2
    Letzter Beitrag: 11.11.07, 11:53