[CSS/ HTML] Zwei Elemente in einer Zeile

Um mehrere Elemente auf eine Höhe bzw. in eine Zeile zu bekommen kannst du entweder die CSS Eigenschaft display (inline oder inline-block) benutzen oder du verwendest float. Wenn du float benutzt, brauchst du ein Element, was das floating aufhebt. z.B.:

/* CSS */
#logo { float: left; }
#topnav { float: right; }
#center { clear: both; }

/* HTML */
<a href="/" id="logo"><img src="..." title="..." /></a>
<nav id="topnav">
 Navigation
</nav>
<div id="center">
 Weiterer Inhalt
</div>

Bei css-tricks.com gibt's einen Artikel, der die Verwendung von float ganz schön erklärt.

Ich denke, Du solltest Dir ein Buch wie "Little Boxes" antun, damit Du die Grundkonzepte richtig verstehst. Man kann eine ältere Version auch online lesen: http://little-boxes.de

Die Navigation kannst Du, musst sie aber nicht mit einem DIV umgeben. Eine Navigation ist eine Liste. Dieser kannst Du eine Klasse oder ID zuweisen.

Die Navigationspunkte als Bilder zu realisieren ist selten bis nie notwendig. Realisier sie besser als Text.

Zur Platzierung nebeneinader gibt es zwei Möglichkeiten: 1. Floate beide Elemente (das Logo und die Navigation) 2. Gib der Navigation mittels margin-left Platz nach links und positioniere das Logo absolut an der gewünschten Stelle. Wichtig dabei ist, dass der Container, in dem sich beide befinden (also sicherlich der #header) mindestens "position: relative" hat, sonst kann das absolut positionierte Logo an einer ungewünschten Stelle landen.