Fixieren mit CSS Problem?

[Shorty1968]

Hallo ich habe bei mir eine Suche Box und diese möchte ich,wenn man das Browser Fenster kleiner macht an der stelle bleibt an die ich sie hin gesetzt habe,ich hab es nun schon mit position: absolute; und position: fixed; versucht.

Bei absolute verschiebt sie sich beim Fenster kleiner machen und bei fixed bleibt sie zwar da wo sie gesetzt wurde aber beim Runter Scrollen auch,wie kann ich diese nun fixieren das sie beim Fenster verkleinern an der stelle bleibt?

 

[ByeBye 270552]

Hallo Shorty1968,

in wie fern verschiebt sie sich? Kannst du vielleicht eine URL angeben oder Screenshots machen, damit man sieht, wo sie in maximalem Fenster ist und wo sie hin wandert bei veränderter Fenstergröße?
Dabei kann ich dir auch schonmal sagen, dass du es mit fixed nicht hinbekommen wirst, denn wie du selber schon festgestellt hast, wandert sie beim scrollen mit. DAs ist auch die Eigenschaft von fixed, dass sie mitwandert beim scrollen.

Schöne Weihnachtsgrüße schonmal,
Mainz007

 

[Shorty1968]

Hallo ich habe ein Paar Screens gemacht.mein css eintrag dazu sieht so aus:

#search-box {
   color: #FFFFFF;
   position:absolute;
   left:-150px;
   top:190px;
   width:100%;
   height:100%;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

Und hier geht es zur Live Demo

 

[ByeBye 270552]

Hallo Shorty1968,

mir fällt ehrlich gesagt keine reine CSS Lösung ein. Dadurch dass der Header ein Bild ist dass sich in der Größe immer verändert, muss man die Position immer neu berechnen, an der es steht und das kann man nur mit JavaScript. Außerdem ist die Suche ja auch eigentlich zu groß um noch an die Position zu passen, wo du es haben willst.
Aus meiner Sicht hast du eigentlich nur zwei vernünftige Alternative: Die Suche mit in die Navigationsleiste oder so packen oder eben direkt über oder unter das Haederbild und dann mit position:relative arbeiten:

color: #FFFFFF;
display: inline-block;
float: right;
margin-right: 10%;
position: relative;
text-align: right;
white-space: nowrap; /* for Opera */

Ich hoffe ich konnte dir trotzdem helfen.

 

[Shorty1968]

Vielen dank das kann ich verwänden,bis ich herraus gefunden habe wie ich das mit Javscript verbessern kann.

*EDIT*
In Google Chrome 21 Version wird sie nicht angezeigt?

 

[ByeBye 270552]

Du musst <div id="searchbox">...</div> noch mit in den page-header verschieben und da dann vor die site-description setzen.
Außerdem hast du nach dem margin-top: 3% das Semikolon vergessen

 

[Shorty1968]

Danke ich schussel,das <div id=""searchbox""></div> ist schon im header.

Wie kann ich das mit css vor der Style auswahl Platzieren,das muss ja überlappen und dann noch alles Funktionieren,ich habe es mit z-index:1; versucht da verschiebst sich alles.

 

[ByeBye 270552]

Ich vertsehe nicht ganz was du meinst um ehrlich zu sein. Kann dir aber nur sagen, dass z-index eigentlich nichts verschiebt!