Suchfeld in Navigation ?

[cobrastyle]

Hy ich bin es mal wieder,

Nun eigentlich hab ich ein ganz einfaches Problem das ich aber alleine nicht lösen kann .

Ich habe auf meiner Homepage eine Navigation, die Navigationspunkte sind links und rechts soll das suchfeld positioniert werden!
Genau das bekomm ich nicht hin.

Habs schon versucht mit Z-Index, Margin, Padding sogar Margin/Padding -?px ^^

Nunja vl. kann mir ja hier jemand helfen !

So siehts derzeit aus!



Code
Html:

<div id="navigation">
<ul id="Navigation">
    <li><a href="index.php">Home</a></li>
    <li><a href="howto.php">Wie funktioniert's?</a></li>
    <li><a href="shops.php">Shopverzeichniss</a></li>
     <li><a href="contact.php">Kontakt</a></li>
  </ul>

<FORM id="search" METHOD=POST ACTION="searchoutput.php">
<INPUT TYPE="text" NAME="search_exp" align="right">
<button type="submit"><img src="system/templates/images/lupe.png" height="12px"></img></button>
</FORM>

</div>

CSS:

#navigation{
background-image:url(../images/nav.png);
background-repeat:no-repeat;
height:50px;
width:960px;
float:left;
    padding-top:14px;
    margin-top:100px;
    position:relative;
     z-index:1;
    
    
}

form#search{
padding-left:750px;
position:relative;
width:200px;
 z-index:2;
}

Hab schon so viel versucht,das suchfeld in HTML ausserhalb vom Navigationsdiv positioniert, dann ist es auf der HP ganz oben und wenn ich mit padding bzw margin arbeite rückt nicht nur das suchfeld runter sondern auch der ganze content :/

 

[threadi]

Schieb den <form>-Bereich vor die <ul>-Liste. Setz dann für form#search die Eigenschaft "float: right;" und für die <ul>-Liste "float: left;".

Hinweis: Du hast eine ID quasi doppelt vergeben. "Navigation" und "navigation" ist fast das selbe. Du solltest das Äußere anders nennen, z.B. "naviframe".
Und: relative Positionierung ist hier nicht notwendig.

 

[cobrastyle]

#navigation{
background-image:url(../images/nav.png);
background-repeat:no-repeat;
height:50px;
width:960px;
float:left;
    padding-top:14px;
    margin-top:100px;
    position:relative;
     z-index:1;
    
    
}

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 10px;
    border: px solid black;
    background-color: ;display:inline;
    font-family:"Garamonda", serif;
    float:left;
    display:inline;

form#search{
padding-left:750px;
position:relative;
padding-top:-50px;
width:200px;
 z-index:2;
 float:right;
}

<div id="navigation">
   

<FORM id="search" METHOD=POST ACTION="searchoutput.php">

<INPUT TYPE="text" NAME="search_exp" align="right">


<button type="submit"><img src="system/templates/images/lupe.png" height="12px"></img></button>

</FORM>
<ul id="Navigation">
    <li><a href="index.php">Home</a></li>
    <li><a href="howto.php">Wie funktioniert's?</a></li>
    <li><a href="shops.php">Shopverzeichniss</a></li>
     <li><a href="contact.php">Kontakt</a></li>
  </ul>
</div>

klappt nicht :(

 

[threadi]

Nimm noch "display: inline" weg, ist nicht nötig wenn Du floatest. Und entferne auch das unnötige padding beim <form>.

Tipp: bevor Du lange bastelst, verwende Firebug im Firefox oder Chrome um direkt im Browser die nötigen Eigenschaften zusammenzustellen. Umso weniger es sind umso besser.

 

[cobrastyle]

klappt alles ;) danke !