✔ Ein Subheader im Kontentbereich zentrieren

K

kalterjava

Erfahrenes Mitglied
Hi community,

ich bastel gerade an einem neuen Layout und frage mich, ob folgendes Problem überhaupt gelöst werden kann.

Im Content-Bereich (mit fixer Breite) soll ein Unter-Überschriftsblock (Subheaderüberschrift) immer zentriert ausgerichtet sein, egal, wie lange dessen Text ist.
Die Schwierigkeit liegt darin, dass der Unter-Überschriftsblock eine variable Länge (s. Screenshot orangener Hintergrund) aufweist und sich so zusammensetzt:

Grafik links (feste Breite) Grafik mitte (variable Breite 1px mit background-repeat) und Grafik rechts (feste Breite)
Diese 3 divs habe ich zusätzlich in einen wrapper gelegt.

Hab schon vieles probiert, wie text-align, margin-left und margin-right: auto
hat leider nichts gebracht. Ich kann mir nicht vorstellen, dass das geht, da dieser Unter-Überschriftsblock je nach Textlänge eine andere Breite aufweist.

Zur Veranschaulichung habe ich einen Screenshot angehängt. Es geht darum, dass die schwarz umrandenden Boxen sich zentriert im gelben Bereich positionieren.

Wäre toll, wenn jmd. dafür eine Lösung hätte, die in allen Browsern funktioniert.

Danke!

Es grüßt der
kaltejava


Ich weiß, die ids für die Subeader-Teile müssen mit class später ersetzt werden. Wollte nur kurz ein Beispiel erstellen.

PHP: 
<body>
	<div id="seite" class="clearfix">
		 <strong>Header</strong> 
   		 <br>
		 <div id="navigation_wrapper" class="clearfix"></div>
		 <div id="inhalts_wrapper"> Content-Text 
   		 <br>
		 	  <div id="subheader_wrapper" class="clearfix">
		 	  	   <div id="subheader_li"></div>
		 	  	   <div id="subheader_mitte">Subheader&uuml;berschrift</div>
		 	  	   <div id="subheader_re"></div> 
              </div>              
              <br clear="both">              
			  Hier geht es weiter mit dem Content-Text#  

              <div id="subheader_wrapper" class="clearfix">
		 	  	   <div id="subheader_li"></div>
		 	  	   <div id="subheader_mitte">Subheader&uuml;berschrift xxx 2</div>
		 	  	   <div id="subheader_re"></div> 
              </div>              
              <br clear="both">              
			  Hier geht es weiter mit dem Content-Text
         </div>   
    </div>
	</body>

CSS:

PHP: 
/*CSS-File*/

#seite{
	   width:780px;   
	   height:600px;       
	   background-color: #DDAADD;
}


#navigation_wrapper{
width:180px;  
height:200px;
background-color: #340AFF;
float:left;
}

#inhalts_wrapper{
width:500px;  
height:400px;
background-color: yellow;
float:left;
}

#subheader_wrapper{
text-align: center;
/*min-width:500px;*/
background-color: #00FF00;
border-style:solid;
float:left;
}

#subheader_li{
/*background-image:url(../Media_seite1/subheader_li.gif);*/
background-color: silver;
background-repeat:repeat-x;
width:145px;  
height:72px;
float:left;
}

#subheader_mitte{
/*background-image:url(../Media_seite1/subheader_mitte.gif);*/  
background-color: gold;
height:72px;
line-height:4;
font-weight: bold;
float:left;
}

#subheader_re{
/*background-image:url(../Media_seite1/subheader_re.gif);*/
background-color: silver;
width:145px;  
height:72px;
float:left;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 

Anhänge

  • variable_subeader_breite.jpg
    variable_subeader_breite.jpg
    22 KB · Aufrufe: 14
Zuletzt bearbeitet:
Hi,

da sich alles in dem DIV-Block #inhalts_wrapper mit fester Breite abspielt, bestünde doch die Möglichkeit, abzüglich der beiden äußeren Spaltenbreiten dem mittleren Spaltenblock das Restmaß zuzuweisen, und seinen Inhalt mittels text-align:center zu zentrieren.

Andernfalls schau dir Stu Nicholls' Experiment Centering Float Left Menus und darin das zweite Beispiel a centered floated left menu (unknown width) an, dessen Markup und CSS-Technik du ebenso für deine Zwecke nutzen könntest.

Übrigens müssen ID-Bezeichner im (X)HTML-Dokumentbaum eindeutig sein, sprich dürfen darin nicht mehrmals vergeben werden. Für diesen Fall ist der Klassenbezeichner vorgesehen.

mfg Maik
 
Hi Maik,

sehr nett von dir, Danke! Werde all deine Vorschläge bzw. Links durchforsten.

Übrigens müssen ID-Bezeichner im (X)HTML-Dokumentbaum eindeutig sein, sprich dürfen darin nicht mehrmals vergeben werden. Für diesen Fall ist der Klassenbezeichner vorgesehen.
Zum Vergrößern anklicken....

Ja, hab ich oben im Text kurz vor den Code-Fragmenten gepostet, dass ich auf die Schnelle copy&paste gemacht habe und später die ids mit klassen ersetzt werden müssen. Trotzdem Danke, das vergisst man auch mal schnell.

Ich probier die Sachen in den nächsten Tagen aus, wenn ich nicht weiterkomme oder das Problem gelöst ist, melde ich mich wieder.

Danke im Voraus!

Es grüßt der
kaltejava
 
So wie es ausschaut hat es geklappt, allerdings mit meiner Methode - ich hatte noch irgendwo ein padding-left:10px; so dass es nicht zentriert werden konnte.
Mit margin: 0 5% 0 5%; scheint es jetzt zentriert zu sein.
Mal sehen ob es auch im Hauptprojekt so klappt und vor allem in anderen Browsern als IE 7 und FF 3. Ich markiere den Thread vorerst mal als erledigt und bedanke mich, für deine Hilfe.

Es grüßt der kaltejava
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück