Überschneidungs/float Problematik

[htmlrookie]

Hallo,

ich habe folgendes Problem:

Auf einer Website möchte ich eine Suchleiste/balken darstellen (wie bei jeden Online-shop)
Diese Leiste soll im auf 100% des screens dargestellt werden
Das Logo soll allerdings immer am rechten Bildschirmrand bleiben, außer falls das Browserfenster so stark verkleinert wird, dass das Logo die anderen fest positionierten Elemente auf der leiste/balken hinterschneiden würde.
Dann sollte nämlich das Logo stehenbleiben.

Hier mein betreffender html-code:

<div id="menueoben">


         <form id="sucheingabe" action="input_text.htm">
                 <input name="vorname" type="text" size="50" maxlength="50">
         </form>


         <select id="kategorien">
             <option value="option1">1</option>
             <option value="option2">2</option>
             <option value="option2">3</option>
         </select>


         <FORM id="button">
               <INPUT TYPE="BUTTON" VALUE="Finden" ONCLICK="href=Index">
         </FORM>

         <img id="logo" src="Bilder/Bild.jpg">

</div>

css:

#menueoben{
         background-image: url(../Bilder/obererBalken3.jpg);
         margin-top: -7px;
         height: 107px;
         width: 100%;
}


#sucheingabe{
         position: absolute;
         margin-top: 70px;
         margin-left: 150px;
         float:left;

}

#kategorien{
         position: absolute;
         margin-left: 400px;
         margin-top: 71px;
         float: left;
}

#button{
         position: absolute;
         margin-left: 500px;
         margin-top: 69px;
         float: left;

}

#logo{

         margin-top: 50px;
         height: 57px;
         float: right;
}

Ich hoffe ich habe mein Problem verständlich geschildert und danke im voraus.

 

[threadi]

Nein, ganz klar ist mir das Problem nicht. Aber ich sehe in deinem CSS einige Probleme:
Du verwendest absolute Positionierung ohne die Positionen anzugeben. Das musst Du aber machen. Dafür sind die Angaben top/bottom und left/right zuständig. Die float's kannst Du dann auch weglassen.

Aber: ich würde dir empfehlen auf absolute Positionierung zu verzichten, wenn Du nicht weißt wie Du sie handhaben musst.

 

[htmlrookie]

Hi,
danke erst einmal für deine Antwort.
Allerdings muss ich Postition absolute verwenden, da diese Elememente aus den vorher definierten div menueoben
herausspringen und sich untereinander anordnen, wenn das Browserfenster zu klein wird.
Falls es eine andere Möglichkeit gibt die Elemenste fest im Div Menueoben zu fixieren würde ich sie gern hören.

Ich hab die Problematik mal vereinfacht:

Man hat ein div(container mit width:100%) in dem mittig ein Element fest(fixiert) dargestellt werden soll.
Nun möchte man ein 2. Element stets am rechten Rand dieses container-divs anzeigen.
Sollte sich allerdings das Browserfenster so weit verkleinern, dass das mitwanderende Element 2, das fixierte Element 1 überschneidet, soll element 2 rechts von Element 1 stehen bleiben, so dass im Browserfenster unten eine Scrollleiste sich aufmacht.

Hoffentlich hab ich mich verständlich ausgedrückt und Danke in Voraus.

 

[htmlrookie]

Hat keiner eine Idee?
Wenn mein Problem immernoch unverständlich ist, sagts mir bitte.
Sorry fürs pushen, aber ich will des heut noch hinbekommen.

 

[threadi]

Du hast scheinbar nur meinen letzten Absatz gelesen. Wie sieht deine Antwort auf meinen ersten Absatz aus? Das musst Du so wie dort beschrieben machen, sonst geht es nicht mal ansatzweise.

 

[htmlrookie]

Hi threadi,

ich hab des mit der absoluten Positionierung ausprobiert:

#logo{
         position: absolute;
         top: 51px;
         right: 0px;
}

Allerdings schiebt sich dann das Logo nicht mehr unter die anderen Elemente, sondern über diese. :(
Wie muss ich weiter vorgehen damit das Logo vor den Elementen halt macht?

 

[threadi]

Dann musst Du für die Elemente die über- und untereinander liegen sollen auch einen z-index definieren.