Suchleiste ändern

  • Moin Forum,

    ich habe mich mal (doch mal wieder ;)) drangesetzt, die Suchleiste zu verändern. Und zwar möchte ich, dass sie
    - standardmässig ziemlich klein ist,
    - bei Maushover grösser wird und
    - dass das Googlesymbol rechtsbündig ist.

    Ok, die Punkte 1+2 gehen mit diesem Code:

    #searchbar{width: 55px !important;}

    #search-container #searchbar:hover
    {
    max-width: 300px !important;
    min-width: 300px !important;
    }


    Nun der letzte Punkt, das Googlesymbol:

    .searchbar-dropmarker-image {
    margin-left: 35px !important;
    }
    .searchbar-engine-image {
    margin-left: 23px !important;
    }


    Hiermit kriege ich das Symbol inkl. Dropdownpfeil zwar nach rechts, allerdings gibts zwei Probleme:

    1. durch die automatische Vergrösserung des Textfeldes beim Maushover bleibt das Symbol nicht rechts, sondern wahrt nur seinen Abstand von 35px nach links und rutscht somit auch nach links:
    [Blockierte Grafik: http://www.netupload.de/img.php/8e5afad253043baa17f5362aa0e65223.JPG]
    Somit muss ich irgendwie einen Befehl mit :hover da reinbasteln, der den Abstand dafür festlegt, aber ich hab einfach keine Ahnung, wie das gehen soll.
    Um die Frage vorwegzunehmen: mit margin-right geht es nicht, es passiert einfach nichts (im komplett reinen Profil). Das ist wohl irgendeine Voreinstellung des Fuxen, die ich irgendwie überschreiben müsste. Keine Ahnung.... -.-
    Aber wenn man das Symbol mit irgendeiner rechts-Festlegung rechts festbetonieren kann, umso besser...

    2. desweiteren sieht man im Bild, dass der Mauszeiger in der Leiste rechts vom Symbol ist und somit der ganze Platz rechts verschwendet wäre. Die Texteingabe soll natürlich links vom Symbol sein, also muss ich das irgendwie auf die andere Seite kriegen.


    Gruss
    Mic

  • Nicht verzagen, Pumbaa fragen:
    FF1.5

    CSS
    #searchbar textbox{width: 55px !important;} 
    #searchbar:hover textbox, #searchbar textbox[focused="true"]{width: 300px !important;}
    #searchbar-dropmarker {-moz-box-ordinal-group: 2 !important;}
    #searchbar-dropmarker + input {-moz-box-ordinal-group: 1 !important;}

    FF2.0

    CSS
    #search-container {max-width: 55px !important;} 
    #search-container:hover {min-width: 300px !important; max-width:300px !important} 
    #searchbar button.searchbar-engine-button {-moz-box-ordinal-group: 2 !important;}
    #searchbar textbox.searchbar-textbox {-moz-box-ordinal-group: 1 !important;}


    Es ist allerdings bei 2.0 nicht möglich, die Breite während der Tastatureingabe zu erhalten, auch wenn die Maus schon wieder weg ist.

    HTH
    Pumbaa

  • astrein, funktioniert, danke! [Blockierte Grafik: http://www.cosgan.de/images/midi/froehlich/a070.gif]


    Dass diverse Codes bei FF2 nicht mehr funktionieren, habe ich hier schon einige Male lesen müssen. Gibt es irgendwo eine Zusammenfassung oder ähnliches, die erklärt, was sich im Code genau ändert, damit man das dann zumindest für die meisten Sachen selbst machen kann? (warum auch immer das sein muss... :?)

    Ansonsten müssten dann ich und garantiert einige andere das Forum mit Fragen bombadieren :shock: