Ergebnis 1 bis 5 von 5
  1. #1
    Avatar von Da_Haiz
    Da_Haiz ist offline Eroberer
    registriert
    30-05-2007
    Beiträge
    73

    Arrow Margin eines h1 ragt über div hinaus

    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-Code:
    <!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
    Geändert von Da_Haiz (09-11-2008 um 21:17 Uhr)
    1+1 = 10

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Margin eines h1 ragt über div hinaus

    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.
    Geändert von anna55 (09-11-2008 um 17:04 Uhr)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Avatar von Da_Haiz
    Da_Haiz ist offline Eroberer
    registriert
    30-05-2007
    Beiträge
    73

    AW: Margin eines h1 ragt über div hinaus

    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!
    Geändert von Da_Haiz (09-11-2008 um 21:12 Uhr)
    1+1 = 10

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Margin eines h1 ragt über div hinaus

    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-Code:
    h1 {
        
    margin:0;
        
    padding:10px 0px;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    Avatar von Da_Haiz
    Da_Haiz ist offline Eroberer
    registriert
    30-05-2007
    Beiträge
    73

    AW: Margin eines h1 ragt über div hinaus

    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.
    1+1 = 10

Ähnliche Themen

  1. CSS-Menü mit float im IE6
    Von the-sandman im Forum CSS und (X)HTML
    Antworten: 10
    Letzter Beitrag: 14-11-2008, 16:34
  2. Overflow in DIV prüfen
    Von FunkyMonkey im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 01-07-2007, 23:29
  3. Antworten: 1
    Letzter Beitrag: 21-12-2006, 11:14
  4. script das div id ändert ?
    Von darkstar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-08-2006, 12:02
  5. Antworten: 14
    Letzter Beitrag: 24-03-2006, 22:24

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •