3 teiliger Header Bereich

[Alex Großmann]

Huhu liebe Experten,

ich erstelle gerade ein Template, hab jedoch irgendwie gerade ein Problem mit dem Header...
Ich möchte dass eine Logo Grafik Links, direkt rechts daneben ein Text und wiederum rechts neben den Text eine Menüleiste (welche Horizontal sein muss) dargestellt wird.

Wie könnte man das realisieren?

Die HTML Struktur:

<div id="header">    	
    	 <!--Header Logo-->
		 <a href="..."> <img id="headerLogo" src="..." /></a>
		 <!--Header Text-->
		 <div id="headerText">
			test
		 </div>
		 <!--Navigations-Buttons-->
		 <ul id="NavigationMenu">
		 	<li>
		 		<a id="buttonStart" href="..."></a>
		 	</li>
		 	<li>
		 		<a id="buttonReferenzen" href="..."></a>
		 	</li>
		 	<li>
		 		<a id="buttonFirma" href="..."> </a>
		 	</li>
		 	<li>
		 		<a id="buttonAktuelles" href="..."></a>
		 	</li>
		 	<li>
		 		<a id="buttonInformation" href="..."></a>
		 	</li>
		 </ul>
    </div>

VIELEN DANK!

 

[SpiceLab]

Dafür bietet sich die float-Eigenschaft an.

Innerhalb der Listennavigation käme dann display:inline oder display:inline-block zum Einsatz, um die Menüpunkte horizontal auszurichten.

 

[hela]

Hallo,
eigentlich können alle Blockelemente innerhalb des Headers als Inline-Elemente deklariert werden:

#headerText,
#NavigationMenu,
#NavigationMenu li {
    display: inline;
}

... und schon stehen sie in einer Zeile.

 

[SpiceLab]

Hallo,
eigentlich können alle Blockelemente innerhalb des Headers als Inline-Elemente deklariert werden:

#headerText,
#NavigationMenu,
#NavigationMenu li {
    display: inline;
}

... und schon stehen sie in einer Zeile.

Stimmt ;-)

 

[Alex Großmann]

Das mit dem float war sehr gut, vielen Dank euch beiden, sieht nun wie gewünscht aus