a - Wodurch wird die Position bestimmt?

[386er]

Hallo,

ich gestalte momentan ein Wordpress Blog. Hierbei bin ich auf folgendes Problem gestoßen.

Unter meinen Header habe ich eine Navigationsleiste angeordnet. Diese soll neben der Navigation auch das
Suchfeld enthalten, welches nochmal in einer sepearaten Box untergebracht ist.

Hier zunächst einmal ein Bild zur Veranschaulichung:

Ohne die Naviagion ist das Suchformular richtig angeordnet, sobald ich die Navigation einbringe, verschiebt sich das alles nach unten.

Hierzu ein paar Zeilen Code:

Aus der Header.php

<div id="navigation">


<ul id="navlist">

<li id="active">
<a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

</ul>


<div id="searchbar">

<?php get_search_form();?>


</div>

</div>


Und hier aus der CSS:

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 40px;
float:left;
}

#navigation {height:20px; width: 865px; padding: 5px; float: left; border-bottom: 1px solid #8c8c8c; border-left: 1px solid #8c8c8c; border-right: 1px solid #8c8c8c; background-color:white; }
#searchbar {width: 165px; padding-bottom:0px; float:right;}



Hat jemand eine Ahnung, was da los ist ?

 

[Floh]

padding: 5px; könnte das Problem sein lösch das mal raus und kuck dir an was passiert?

 

[386er]

Nein, das kann es nicht sein. Das Padding bezeiht sich ja auf alle 4 Seiten, und zudem bewegt sich die liste ja weiter nach unten, anstatt ins Zentrum.

 

[Tronjer]

Wer soll denn mit diesen unvollständigen Code-Fragmenten etwas anfangen? Und warum das float:right für #searchbar?

Ich habe hier vor längerer Zeit mal eine horizontale Navigationsleiste mit minimal gehaltenem CSS gepostet. Orientiere dich daran und positioniere das Suchfeld anschließend mit float:left oder position:relative.

http://www.html.de/css/41038-horizontale-navigationsleiste.html#post296823