[CSS/ HTML] Zwei Elemente in einer Zeile Frage [CSS/ HTML] Zwei Elemente in einer Zeile zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

Hallo, ich bin noch relativ neu beim Thema Webdesign und -entwicklung und habe deswegen eine Frage, bei der viele von euch wahrscheinlich mit dem Kopf schütteln werden:
Problem ist folgendes:
Ich schreibe zur Zeit eine Website, deren Kopfzeile von einem Logo und einer Navigationsleiste geschmückt werden soll. Beides soll sich auf gleicher Höhe befinden und das bekomme ich einfach nicht hin. Die Navigation besteht aus drei Bildern und wird mit einer div-id definiert. Kann mir nun jemand helfen, beide Elemente auf eine Höhe zu bekommen?
Hier noch ein Screenshot des aktuellen Aussehens:
alt text

Danke im Voraus!

Antworten


Diese Antwort als GUT bewerten 2 Diese Antwort als SCHLECHT bewerten

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.

Diese Antwort als GUT bewerten 1 Diese Antwort als SCHLECHT bewerten

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.

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten