Zum Inhalt springen

H1 im DIV Layer wird nicht mittig ausgerichtet

Erstellt am 26. März 2010 · 2 Antworten · letzte Antwort am 30. März 2010

Tags: HTML & CSS, Frage

ms_wombel ·

Hallöle,

ich habe da ein kleines Problem, bei dem ich auch nach vielen Googlen nicht klar komme.
Ich habe einen DIV Layer für einen News Bereich, deren Überschrift mittig ausgerichtet werden soll

Hier mal der Auszug aus dem HTML Template:

<div id="contentcontainer">
   <div style="clear:both"></div>
      <div id="newscontent">
          <h1>Überschrift typ 1 -2</h1>
   	     <h2>Überschrift typ 2-2</h2>
	         <p>Lorem ipsum dolor sit .....

Nun definiere ich die H1 Klasse wie folgt:

#newscontent h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e8b563;
background-color: #741518;
text-align:center;
vertical-align:baseline;
background-image:url(images/newsh1back.jpg);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #741518;
height:25px;
}

Leider heftet die Überschirft immer am oberen Rans des DIV Containers #newscontent . Wenn ich nun mit padding oder margin arbeite, wird der ganze div Container veschoben und wird dann ausserhalb des Hauptcontainers contentcontainer angezeigt. Da der contentcontainer jedoch als Hauptcontainer drumherumliegt, komme ich gerade nicht weiter. Hier mal die CSS von dem "umliegenden DIV Container".
#newscontent {
width:250px;
float:right;
margin-left:10px;
margin-right:10px;
}

Kann mir einer bitte sagen was ich flasch mache???

Es dankt.
der Wombel

kati ·

...vertical-align funktioniert meines Wissens nach im H1-Tag nicht. Ich würde einfach ein Div drumherumlegen und diesem die Hintergrundfarbe, -image etc zuweisen.

so ungefähr:

#newscontent {
   width:250px;
   float:right;
   margin-left:10px;
   margin-right:10px;
}

#newscontent_h1{
   background-color: #741518;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #741518;
   text-align:center;
   background-image:url(images/newsh1back.jpg);
   background-repeat: no-repeat;
   height:25px;
   line-height : 25px;
   vertical-align : baseline;
}

#newscontent_h1 h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #e8b563;
}	
	
<div id="contentcontainer">
   <div style="clear:both"></div>
      <div id="newscontent">
         <div id="newscontent_h1">
	    <h1>Überschrift typ 1 -2</h1>
	 </div>
	 <h2>Überschrift typ 2-2</h2>
         <p>Lorem ipsum dolor sit </p>
      </div>
   </div>
</div>

liebe Grüße Katja