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

Margin eines h1 ragt über div hinaus

Da_Haiz

Da_Haiz

New member
Hi Leute,

ich hab ein Problem mit einem Template.
Ich habe ein zerschnittenes Design in Html nachgebaut. Für jedes Bild hab ich einen Containerdiv. Nur im Contentdiv, da wo ich den Text dann habe, steht ein <h1>. Das margin von diesem ragt über den Container hinaus und verschiebt das Design.

*** URL ENTFERNT ***

Hier das Css:

Code: 
body{
	margin: 0px;
	font-size:12px;
	font-family:"Trebuchet MS";
	background-image:url("img/bg.jpg");
	background-repeat:repeat;
}

a{
	color:black;
}

ul.main_nav{
	list-style:none;
	padding:0px;
	margin:0px;
}

	ul.main_nav li{
		float:left;
		margin:0px 15px 0px 0px;
		height:28px;
		width:auto;
		color:#333333;
		cursor:pointer;
	}
		
		ul.main_nav li a{
			color:black;
			text-decoration:none;
		}
		
		ul.main_nav li div{
			float:left;
		}
		
		ul.main_nav li div.menue_text{
		background-image:url("img/button1_c.png");
		background-repeat:repeat-x;
		padding:4px 5px;	
		height:20px;
		}
		
		ul.main_nav li div.menue_l{
			width:10px;
			height:28px;
			background-image: url("img/button1_l.png");
			background-repeat:no-repeat;
		}
		
		ul.main_nav li div.menue_r{
			width:8px;
			height:28px;
			background-image: url("img/button1_r.png");
			background-repeat:no-repeat;
		}
		
	ul.main_nav li:hover div.menue_text{
		background-image: url("img/button2_c.png");
		padding-top: 5px;
		height:18px;
	}
	ul.main_nav li:hover div.menue_l{
		background-image: url("img/button2_l.png");
	}
	ul.main_nav li:hover div.menue_r{
		background-image: url("img/button2_r.png");
	}
	
	

#container{
	position:relative;
	width:731px;
	height:auto;
	margin:0px auto;
}
	
	#header{
		position:relative;
		width:731px;
		height:202px;
		background-image:url("img/header.jpg");
		background-repeat:no-repeat;
	}
		#menue{
			position:absolute;
			width:475px;
			height:28px;
			margin:161px 0px 0px 212px;
			border:0px solid black;
		}
	
	#content_top{
		margin: 0px 0px 0px 0px;
		width:731px;
		height: 32px;
		background-image: url("img/content-o.jpg");
		background-repeat:no-repeat;
	}
	
	#content_main_container{
		margin: 0px 0px 0px 0px;
		width:731px;
		height:auto;
		background-image: url("img/content-c.jpg");
		background-repeat:repeat-y;
		padding:0px;
	}
		#content_main{
			position:relative;
			margin:0px 55px;
			padding:0px 0px;
			width:621px;
			height:auto;
		}
	
	#content_bottom{
		margin: 0px 0px 0px 0px;
		width:731px;
		height: 32px;
		background-image: url("img/content-u.jpg");
		background-repeat:no-repeat;
	}
	
	#footer_top{
		margin: 0px 0px 0px 0px;
		width:731px;
		height: 23px;
		background-image: url("img/footer-o.jpg");
		background-repeat:no-repeat;
	}
	
	#footer_main{
		margin: 0px 0px 0px 0px;
		width:621px;
		height: 19px;
		background-image: url("img/footer-c.jpg");
		background-repeat:no-repeat;
		padding:0px 55px;
	}
	
	#footer_bottom{
		margin: 0px 0px 0px 0px;
		width:731px;
		height: 33px;
		background-image: url("img/footer-u.jpg");
		background-repeat:no-repeat;
	}

und das HTML:

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>
		<title>DSCenter - Template</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="menue">
					<ul class="main_nav">
						<li>
							<div class="menue_l"></div>
							
							<div class="menue_text"><a href="#">Home</a></div>
							
							<div class="menue_r"></div>
						</li>
						
						<li>
						<div class="menue_l"></div>
							
							<div class="menue_text"><a href="#">Download</a></div>
							
							<div class="menue_r"></div>
						</li>
						
						<li>
						<div class="menue_l"></div>
							
							<div class="menue_text"><a href="#">Bugreport</a></div>
							
							<div class="menue_r"></div>
						</li>
						
						<li>
						<div class="menue_l"></div>
							
							<div class="menue_text"><a href="#">Gästebuch</a></div>
							
							<div class="menue_r"></div>
						</li>
						
						<li>
						
						<div class="menue_l"></div>
							
							<div class="menue_text"><a href="#">Impressum</a></div>
							
							<div class="menue_r"></div>
						</li>				
					</ul>
				</div>
			</div>
			
			<div id="content_top"></div>
			
			<div id="content_main_container">
				<div id="content_main">
					<h1>Lorem ipsum dolor</h1>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
						<h1>Lorem ipsum dolor</h1>
				</div>
			</div>
			
			<div id="content_bottom"></div>
		
			<div id="footer_top"></div>
			
			<div id="footer_main">
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
			</div>
			
			<div id="footer_bottom"></div>
		</div>
	</body>
</html>

Ich hoffe ihr könnt mir erklären, wie ich es schaffe, dass sich das margin des <h1> auf die Grenze des Containerdiv bezieht.


DaHaiz
 
Zuletzt bearbeitet:
Versteh nicht, was Du meinst. Bei mir ist nichts verschoben.

Was mir aufgefallen ist:

Lass bei den Hintergrundpics die Anführungszeichen im CSS weg.
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Außerdem: Der Text könnte in einen p-Tag gepackt werden.

Edit:
Aus mir nicht nachvollziehbaren Gründen bekomme ich Deine Seite online richtig angezeigt, offline sehen ich jedoch, was Du meinst.
Gib mal Deinem Div #content_main_container noch ein display:table; mit auf den Weg.
 
Zuletzt bearbeitet:
Online habe ich dem containerdiv padding:10px 0px; gegeben, deshalb hat das margin nen raum, wo es sich hinstrecken kann. Ich teste mal mit display:table.

EDIT:
Perfekt. Funktioniert. Danke!
 
Zuletzt bearbeitet:
Wie immer gibt es mehr Möglichkeiten. Du kannst natürlich - was sowieso Sinn macht - h1 Layout zuweisen und da margin auf 0 stellen und Deine padding-Angaben dann hier zuordnen, z.B.
PHP: 
h1 {
	margin:0;
	padding:10px 0px;
}
 
das hatte ich auch schon. Allerdings tritt der selbe Fehler auf bei <ul>s usw. auf. Und da finde ich die Lösung mit display:table sauberer, als wenn ich da für alle möglichen elemente das margin mit padding austausche.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben