Logo links, Nav rechts

[css-frage]

Hallo,

ich habe gerade ein Problem mit einer einfach Navigation. Ich habe einen Header, der 960px breit ist. Links angeheftet soll das Logo sein, rechts die Navigation.

Ich habe nun folgenden HTML-Code:

  
 	<div id="header">  
 		<div id="logo_nav_container">  
	 		<div id="logo">  
	 			LOGO  
	 		</div>  
	 		<div id="navContainer">  
		 		<ul id="nav">  
		 			<li>Home</li>  
		 			<li>Home</li>  
		 			<li>Home</li>  
		 		</ul>  
	 		</div>  
 		</div>  
 	</div>  

und folgenden CSS-Code:

#logo{  
	display: inline;  
	width: 400px;  
}  
  
#nav{  
	list-style-type: none;  
	display: inline;  
}  
  
#nav li{  
	border: 1px solid red;  
	text-align: right;  
	display: inline;  
}  
  
#logo_nav_container{  
  
	color: #fff;  
	padding: 50px 10px 0 10px;  
	width: 960px;  
	border: 1px solid red;  
	margin: 0 auto;  
}  
  
#navContainer{  
	border: 1px solid red;  
	text-align: right;  
	display: block;  
}

Nun ist die Navigation rechts "unter" dem Logo, weil der navContainer ja ein block-Element ist. Wenn ich es als inline-Element umschalte ist die Navigation nicht mehr rechtsbündig sondern direkt rechts am Logo.
Ich möchte das Logo und die Navigation aber auf einer Höhe; das Logo linksbündig, die Navigation rechtsbündig.

Kann mir jemand helfen?

LG

[Vinzenz Mai]

Hallo,

ich habe gerade ein Problem mit einer einfach Navigation. Ich habe einen Header, der 960px breit ist. Links angeheftet soll das Logo sein, rechts die Navigation.

mir erscheint Dein HTML-Code unnötig aufgebläht:

<div id="header">
<div id="logo_nav_container">
<div id="logo">
LOGO
</div>
<div id="navContainer">
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>

  
Ich reduzierte diesen auf  
  
~~~html
<div id="header">  
    <img id="logo" src="logo.jpg">  
    <ul id="nav">  
        <li>Home</li>  
        <li>Home</li>  
        <li>Home</li>  
    </ul>  
</div>

und nähme folgendes CSS, um die von Dir angesprochenen Ziele zu erreichen:

#logo {  
    float: left;         /* Das Logo soll linksbündig sein,       */  
}  
  
#nav {  
     float: right;       /* die Navigation rechtsbündig, ...      */  
     text-align: right;  /* ... für die Listenelemente, ...       */  
}  
  
#nav li {  
     display: inline;    /* die inline dargestellt werden sollen. */  
}

Anschließendes Clearen bitte nicht vergessen, siehe z.B. https://forum.selfhtml.org/?t=209766&m=1427838.

Freundliche Grüße

Vinzenz