h2 Außerhalb des Div-Containers Header

JonasSt13 · 3. Juli 2015

Hallo liebe Communtity,

ich habe eine recht schöne Website mit HTML und CSS erstellt.
Leider will meine h2 einfach nicht in den div-Contaioner header.
Welchen Margin oder padding Wert muss ich verändern/hinzufügen um die h2 innerhalb des headers zu bekommen?
Hier die externe CSS Design Datei; nur #header h2

CSS

#header h2 {
padding-right: 20px;
padding-top:10px;
font-size:40px;
font-weight:bold;
color:green;
font-family:Courier;
text-align:right;

Und zum Verständnis #header h1:

CSS

#header h1 {
text-indent: 20px;
padding-top:10px;
font-size:60px;
font-weight:bold;
color:white;
font-family:Courier;
text-align:left;
}

Und der header div Container:

HTML

<div id="website">
<div id="header">
<h1>Meine Witzeseite</h1>
<h2>Home</h2>
</div>

Wie es derzeit aussieht seht ihr im Anhang: picture.gif
Ich habe ziehmlich viel mit den Paddings und Margins herumprobiert und auch mit Margins und der Schriftgröße(geht dann in den header ist aber dann zuklein) gespielt, bin aber auf keine Vernünftige Lösung gekomme. Ich hoffe ihr könnt mir weiterhelfen.
Vielen Dank schon mal im Vorraus!

Lg JonasSt13
PS: Die Website ist noch nicht online. Ich muss mir erst überlegen ob und auf welche Art und Weise.

MrMurphy · 3. Juli 2015

Hallo,

du öffnest zwei div, schließt aber nur eins.

Und beim header h2 fehlt die schließende Klammer.

Das ist aber nicht die Ursache des Problems.

Wenn du aus deinen eigenen hier veröffentlichten Quelltextschnipseln eine Webseite erstellst (und border oder eine Hintergrundfarbe hinzufügst) wirst du feststellen, das h1 und h2 innerhalb des headers dargestellt werden. Also so, wie es sein soll. Das Problem liegt also in dem Quelltext (HTML oder CSS) den du uns unsinnigerweise verheimlichst.

So ist eine Hilfe durch uns leider nicht möglich.

Gruss

MrMurphy

JonasSt13 · 3. Juli 2015

Zitat von MrMurphy

du öffnest zwei div, schließt aber nur eins.

Ou. Ups, MrMurphy, Ich habe jeweils die schließenden Elemente nicht kopiert.
Ich hatte nur die drei Schnipsel Codes eingefügt, da ich davon ausgegangen bin, das der Fehler oder der Fehlende Wert von hier kommt, bzw. ergänzt werden muss.
Hier die komplette CSS Datei:

CSS

body {
background-color:lawngreen;
}
#webseite {
width:980px;
margin:0 auto;
}
#header {
width:980px;
height:150px;
background:orange;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
text-align:center;
}
#header h1 {
text-indent: 20px;
padding-top:10px;
font-size:60px;
font-weight:bold;
color:white;
font-family:Courier;
text-align:left;
}
#header h2 {
padding-right: 20px;
padding-top:10px;
font-size:40px;
font-weight:bold;
color:green;
font-family:Courier;
text-align:right;
}
#main {
width:980px;
}
#menue{
   	float:left;
	   width:200px;
	   height: 470px;
	   background:yellow;
	   margin-top:10px;
   	margin-bottom:10px;
	   border-radius:2px;
	   -moz-border-radius:2px;
	   -webkit-border-radius:2px;
	   -o-border-radius:2px;
	   text-align:center;
	   font-family:Courier;
	   color: 

}
#inhalt{
		float:right;
		width:770px;
		background-color:darkorange;
		margin-top:10px;
		margin-bottom:10px;
		border-radius:2px;
	   -moz-border-radius:2px;
	   -webkit-border-radius:2px;
	   -o-border-radius:2px;	
	   text-align:center;
	   font-family:Comic Sans MS;
}	   
a:visited {

	background-color: blue;
}
a:focus {

	background-color: orange;
}
a:hover {

	background-color: lawngreen;
}




#footer {
width:980px;
height:30px;
background:green;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
margin-top:20px;
clear:both;
text-align:center;
font-family:Courier;
}




#nav {
   width: 150px;               	/* Breite des Bereichs */
   text-align: left;           	/* Textausrichtung 	*/
   margin-top: 5px;           	/* Außenabstand oben   */
   margin-bottom: 5px;        	/* Außenabstand unten  */
   margin-right: 18px;         	/* Außenabstand rechts */
}
 
#nav ul {
   list-style: none; 
   float:left;
   padding: 0px;
   margin:10px;
}   
#nav ul  li {
   font-family:arial;
   background-color: silver;   	/* Hintergrundfarbe   */
   border-top: 1px lawngreen solid;	/* Rahmenfarbe Auflistungpunkt oben */
   border-left: 15px green solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom: 1px lawngreen solid;   /* Rahmenfarbe unten  */
   border-right: 2px green solid;   /* Rahmenfarbe unten  */
   margin-top: 10px;           	/* Außenabstand oben  */
   padding-top: 8px;           	/* Innenabstand oben  */
   padding-bottom: 8px;        	/* Innenabstand unten */
   padding-left: 2px;          	/* Innenabstand links */
   padding-right: 30px;         	/* Innenabstand rechts */
   border-radius: 0px 3px 3px 0px;
   box-shadow: -5px -5px 10px orange, 
            	5px 5px 10px green;
   list-style: none;
} 
#nav ul li:hover{
background: lawngreen;
color.#FFF;
}

Alles anzeigen

Und hier die Index Datei

HTML

<html>
<head>
		<title>Meine Witzeseite</title>
		<link href="design.css"type="text/css" rel="stylesheet">
		<meta charset="utf-8">
		<meta name="content-language" content="de" />
		<meta name="author"       	content="Jonas Steinmaier " />
		<meta name="publisher"    	content="Jonas Steinmaier" />
		<meta name="copyright"    	content="Jonas Steinmaier " />
		<meta name="keywords"     	content="Witze, Spass, Spaß, Lustig, Sinnlose Fragen, Chuck Norris Witze" />
		<meta name="description"  	content=" Eine Lustige Seite. Hier dreht sich alles um Witze und Spaß. Spßbremsen sind hier nicht gestattet :D " />
		<meta name="language"     	content="Deutsch" />
		<meta name="revisit"      	content="After 30 days" />
</head>
<body>
		<div id="website">
				<div id="header">
						<h1>Meine Witzeseite</h1>
						<h2>Home</h2>
				</div>
				<div id="main">
				<div id="menue">
							<div id="nav">
							<nav>
							<ul>
								<li> <a href="index.html"> Home</a> 
								<li> <a href="sinnlosefragen.html"> Sinnlose Fragen</a>
								<li> <a href="witze.html"> Witze </a> 
								<li> <a href="chucknorriswitze.html"> Chuck Norris Witze</a> 
								<li> <a href="empfehlungen.html"> Empfehlungen</a>  
								<li> <a href="umfrage1.html"> Umfrage </a> 
								<li> <a href="lustigebilder.html"> Lustige Bilder </a> 
								<li> <a href="anipikto.html"> Animationen etc. </a>
							</ul>
							</nav>

							</div>
						</div>
						<div id="inhalt">
						<p>  Willkommen auf meiner Witzeseite, Betaversion </br>
						 	Viel Spass </p>
						<p> <b> Aber Halt </b> </p>
						<p> Zuerst einmal etwas über Witze selbst: </p>
						<p> <dt> Was sind eigentlich Witze ? </dt>
	<dd> Witze sind kurze oder lange, Phrasen oder Sätze die<br/>
	 	eigentlich nur zum Spaß "erfunden" wurden.<br/>
	 	Viele Witze sind auch einfach nur Wortspiele. </dd>
 	<p> Also sei keine Spaßbremse und habe Spaß !</p>
	 <p> <img src="bremse.gif"  alt="Spaßbremse" </p>







						<p> <img src="1.jpg" width="100" height="100" alt="Smiley"


						</div>
					</div>
					<div id="footer">
					<p>  <a href="impressum.html"> Impressum</a>  <a href="kontakt.html"> Kontakt</a><b>Copyright by Jonas ©</b> </p>

					</div>
			</div>
	</body>
	</html>

Alles anzeigen

Hoffentlich kann man den Fehler jetzt finden. Sry für die Startschwierigkeiten

MrMurphy · 3. Juli 2015

Hallo,

du greifst in die Höhenverhältnisse mit height ein anstatt das wie vorgesehen den Browsern zu überlassen.

Der header hat eine Höhe von 150px, die beiden Überschriften sind jedoch höher.

Die Höhe der Überschriften (und aller anderen Block-Elemente) setzt sich aus der eigentlichen Höhe und den Außenabständen padding, border und margin zusammen. Wenn padding und margin nicht angegeben sind wird von den Browsern ein eigener Abstand hinzugefügt.

Wenn du bei h1 und h2 padding und margin, jeweils zumindest oben und unten, auf Null setzt passen sie auch in den header.

Wenn du die Höhe von Containern eingrenzt musst du also immer auch dafür sorgen, das der Inhalt überhaupt hineinpasst.

Gruss

MrMurphy

JonasSt13 · 5. Juli 2015

Vielen Dank MrMurphy es hat irgendwie geklappt.
Viele Wege führen nach Rom...oder zur h2 im header : )

Hier mein Lösungsweg:

CSS

#header {
width:980px;
height:170px;
padding-bottom:10px; 
background:orange;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#header h1 {
text-indent: 20px;
padding-top:10px;
font-size:60px;
font-weight:bold;
color:white;
font-family:Courier;
text-align:left;
}
#header h2 {
padding-right: 20px;
font-size:50px;
font-weight:bold;
color:green;
font-family:Courier;
text-align:right;
}

Alles anzeigen

Und im Anhang das Ergebnis.

Lg JonasSt13

wolf · 5. Juli 2015

'sehr schön'

h2 Außerhalb des Div-Containers Header

Jetzt mitmachen!

Teilen