✔ h1 Tag verursacht Abstand

Sprint · 13. Mai 2010

Hallo zusammen,

bei meinem aktuellen Projekt verursacht ein <h1> Tag einen Abstand zum darüber liegenden div. Lege ich aber einen Rahmen um die umgebende Box, ist der Abstand verschwunden. Hier mal der reduzierte Quelltext:

HTML:

<div id="wrapper">
	<div id="header"></div>
	<div class="menu">...	</div>
	<div id="flash">...	</div>
	<div id="trenner">...</div>
	<div id="cont">
		<h1>Herzlich Willkommen</h1>
		<p>bei...<br />
	</div>
	<div id="footer"></div>
</div>

CSS:

/*<agl.folder "menu">*/
	.menu{ border:none; border:0; margin:0; padding:0; font: bold 14px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
		}
	.menu ul{ 
		background-image: -moz-linear-gradient(top, #6f6f6f, #4b4b4a); /* Firefox 3.6 */
		background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6f6f6f),color-stop(1, #4b4b4a)); /* Safari & Chrome */
		filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6f6f6f', endColorstr='#4b4b4a'); /* IE6 & IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6f6f6f', endColorstr='#4b4b4a')"; /* IE8 */	
		height:35px; list-style:none; margin:0; padding:0; 
	}
	.menu li{ float:right; padding:0; 	}
	.menu li a{
		background-image: -moz-linear-gradient(top, #6f6f6f, #4b4b4a); /* Firefox 3.6 */
		background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6f6f6f),color-stop(1, #4b4b4a)); /* Safari & Chrome */
		filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6f6f6f', endColorstr='#4b4b4a'); /* IE6 & IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6f6f6f', endColorstr='#4b4b4a')"; /* IE8 */	height:35px;
		background: url(../images/trenner.gif) no-repeat left bottom;
		color:#ffffff;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0;
		padding:0 25px;
		text-align:center;
		text-decoration:none;
	   text-shadow: #111 2px 2px 2px;
	}
	.menu li a:hover, .menu ul li:hover a{ background: #888888 url(../images/trenner.gif) no-repeat left bottom; color:#FFFFFF; text-decoration:none; }
	.menu li ul{ background:#6f6f6f; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; }
	.menu li:hover ul{ display:block; }
	.menu li li { background:url('../images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; 	}
	.menu li:hover li a{ background:none; }
	.menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; }
	.menu li ul a:hover, .menu li ul li:hover a{ background:#194c75; border:0px; color:#ffffff; text-decoration:none; }
	.menu p{ clear:left; }	
	.abschluss{ background-color: transparent; background-image: url(../images/trenner.gif); background-repeat: no-repeat; background-attachment: scroll; width: 2px; height: 35px; float: right; margin-right: 25px; }
		/*</agl.folder>*/
body { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
	 font-size: 12px;
	margin: 0; 
	padding: 0; 
	background-image: -moz-linear-gradient(left, #acb1b7, #eef1f3); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #acb1b7),color-stop(1, #eef1f3)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#acb1b7', endColorstr='#eef1f3'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#acb1b7', endColorstr='#eef1f3')"; /* IE8 */
}
#wrapper { width:950px; height: 100%; float: none; min-height: 700px; height: auto !important; height: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid black; border-left: 1px solid black; }
#header { background-image: url(../images/kopf.jpg); background-repeat: no-repeat; background-attachment: scroll; position: relative; width:950px; height:86px; z-index: 0; }
#cont { background-color: #dfdfdf; background-image: url(../images/cont.jpg); background-repeat: no-repeat; background-attachment: scroll; position: relative; z-index: 0; width: 930px; height: 358px; padding-left: 20px; }
#trenner { background-color: #f2f2f2; position: relative; width: 950px; height: 35px; }
#flash { position: relative; width: 950px; height: 338px; }
.filiale { background-color: #f2f2f2; position: relative; bottom: 0; width: 180px; height: 200px; float: left; margin-right: 20px; padding-left: 5px; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; }
.filname { background-color: #dedede; background-image: url(../images/pfeil.gif); background-repeat: no-repeat; background-position: 5px center; position: relative; left: -5px; width: 165px; height: 16px; margin-top: 15px; margin-bottom: 10px; padding-left: 20px; }
#footer { background-color: #797979; position: relative; width: 950px; height: 20px; }
#aktuell { width: 240px; height: 358px; }
#akttop { color: white; font-size: 14px; line-height: 35px; background-color: #797979; text-align: center; width: 240px; height: 35px; }
h1 { font-size: 1.7em; font-weight: bold; margin: 0.67em 0; }

Sobald ich im das "Herzlich willkommen" als <h?> auszeichne, rutscht die Box um ca. 10 Pixel nach unten. Umgebe ich sie aber mit einem Rahmen, um zu sehen wo die Grenzen sind, wird sie richtig positioniert. Auch wenn ich über das <h1> ein nbsp setze, erscheint der Abstand nicht.
Wenn es denn so sein soll, könnte ich mit dem Leerzeichen leben, aber ich kann nicht glauben, daß das der Sinn der Sache ist.

Maik · 13. Mai 2010

Hi,

Sprint hat gesagt.:
bei meinem aktuellen Projekt verursacht ein <h1> Tag einen Abstand zum darüber liegenden div.

tausch die margin-Regel gegen padding aus, und setze zusätzlich den voreingestellten Außenabstand des Block-Elements auf null zurück, sofern dies nicht zu Beginn des Stylesheets mit dem Universalselektor *, oder einem sog. "Reset"-Stylesheet geschieht.

CSS:

h1 { font-size: 1.7em; font-weight: bold; margin: 0; padding: 0.67em 0; }

mfg Maik

Sprint · 13. Mai 2010

Sooo einfach, aber wissen muß man es.

Vielen Dank!

Maik · 13. Mai 2010

Sprint hat gesagt.:
Lege ich aber einen Rahmen um die umgebende Box, ist der Abstand verschwunden.

Sprint hat gesagt.:
Sooo einfach, aber wissen muß man es.

Es kommen Zusammenfallende Ränder zum Tragen, die das Elternelement nach unten verrücken lassen.

In dieser Spezifikation bedeutet der Ausdruck zusammenfallende Ränder, dass benachbarte Ränder (die durch keine Polsterungs- oder Rahmenbereiche voneinander getrennt sind) von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können) so zusammenfallen können, dass sie einen einzigen Rand bilden.

Und hier ein kleines grundsätzliches Beispiel, das den Sachverhalt widerspiegelt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-05-13" />

<title>tutorials.de | h1 Tag verursacht Abstand</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
#parentBox {
background:#eee;

/*padding:5px;*/ /* Zur Gegenprobe die umschliessende Kommentar-Syntax entfernen */

/* alternativ zu padding */

/*border:1px solid #000;*/ /* Zur Gegenprobe die umschliessende Kommentar-Syntax entfernen */
}
#childBox {
margin-top:50px;
}
/* ]]> */
</style>

</head>
<body>

<div id="parentBox">
     <div id="childBox">childBox</div>
</div>

</body>
</html>

mfg Maik

Sprint · 13. Mai 2010

Ok, doch nicht ganz so einfach. Aber wieder was dazu gelernt.

Maik · 13. Mai 2010

Dafür ist tutorials.de da

mfg Maik

✔ h1 Tag verursacht Abstand

Sprint

Erfahrenes Mitglied

Maik

Sprint

Erfahrenes Mitglied

Maik

Sprint

Erfahrenes Mitglied

Maik

Neue Beiträge