Lupe in die Searchbox

Deutsches Forum
1

Hallo Community,

ich möchte gerne die Lupe in die Searchbox packen.

ich habe bereits versucht die lupe in der search.tpl zu versetzen, aber das erzielt leider nicht die gewünschte wirkung. außerdem habe ich versucht es mit hilfe von firebug zu verschieben um die funktion zu ermitteln, aber die lupe landete immer hinter der searchbox.

wie bekomme ich die lupe rechts in die searchbox?

Gruß
Maik

2

Stichwort: z-index!

3

[QUOTE=nickname;101260]Stichwort: z-index![/QUOTE]

funktioniert der z-inde nur für <div> oder auch für <input>?

weil in search.tpl gibs ja nur eine <div>. ich habs jetzt so gemacht:

[{block name="widget_header_search_form"}]
[{if $oView->showSearch() }]
    [{oxscript include="js/widgets/oxinnerlabel.js" priority=10 }]
    [{oxscript add="$( '#searchParam' ).oxInnerLabel();"}]
    <form class="search" action="[{ $oViewConf->getSelfActionLink() }]" method="get" name="search">
        <div class="searchBox">
            [{ $oViewConf->getHiddenSid() }]
            <input type="hidden" name="cl" value="search">
            [{block name="header_search_field"}]
                <label for="searchParam" class="innerLabel">[{oxmultilang ident="SEARCH_TITLE" }]</label>
                <input class="textbox" type="text" id="searchParam" name="searchparam" value="[{$oView->getSearchParamForHtml()}]" z-index:2>
            [{/block}]
            <input class="searchSubmit" type="submit" value="" z-index:1>
        </div>
    </form>
[{/if}]
[{/block}]

Problem: funktioniert nicht:D

[B]Edit:[/B]
ok ich brauche wohl noch das…

#a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;       z-index:1; background-color:#ddf; }
#a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;       z-index:2; background-color:#ccf; }

aber wo muss dieser code hin?

über id kann man das ja dann zuordnen. nur bei <div> oder auch <input>?

Gruß
Maik

4

Hab das wohl etwas falsch verstanden, jetzt wo ich nochmal auf deiner Seite war, weiß ich, was du willst:

Trage mal das in deine oxid.css ab Zeile 1717 eine:

/* --- Search box ------------------------------- */
div.searchBox {
    position: absolute;
    right: -11px;
    top: 104px;
    border:1px solid green;
}

div.searchBox input.textbox {
    width: 165px;
    padding-left: 4px;
    color: #b4b8b8;
    float:left;
    margin:2px 5px 0 0;
    border:none;
}

Im Übrigen wirkt sich die Änderung der Höhe, die du für dein Suchfeld vorgenommen hat, auch auf alle anderen Eingabefelder aus. Klick zB. mal oben rechts auf Anmelden… :smiley:

5 
/* --- Search box ------------------------------- */
div.searchBox {
    position: absolute;
    right: -11px;
    top: 104px;
    border:1px solid green;
}

div.searchBox input.textbox {
    width: 165px;
    padding-left: 4px;
    color: #b4b8b8;
    float:left;
    margin:2px 5px 0 0;
    border:none;
}

hat ein rahmen auswirkungen darauf das die lupe in die searchbox kommt?

[QUOTE=nickname;101263]Im Übrigen wirkt sich die Änderung der Höhe, die du für dein Suchfeld vorgenommen hat, auch auf alle anderen Eingabefelder aus. Klick zB. mal oben rechts auf Anmelden… :D[/QUOTE]

ja das habe ich gerade festgestellt. bin grad am basteln. hab die höhe zurück gestellt und versuche gerade individuell die höhe NUR für die searchbox anzupassen, aber geht irgendwie nicht. hast du vorschläge?:wink:

Gruß
Maik

6

Klar, Zeile 1724, height: 25px; eintragen. Zauberei!

7

[QUOTE=nickname;101265]Klar, Zeile 1724, height: 25px; eintragen. Zauberei![/QUOTE]

ah ich trottel! es is so einfach. ich habe in der search.tpl rumgebastelt. oh man is wieder nicht mein tag.:rolleyes:

danke

Gruß
Maik

8

[QUOTE=sportplatz-online.de;101264]


hat ein rahmen auswirkungen darauf das die lupe in die searchbox kommt?[/QUOTE]

Aber sicher. Was hält dich davon ab, es einfach mal auszuprobieren? :confused:
9

[QUOTE=nickname;101296]Aber sicher. Was hält dich davon ab, es einfach mal auszuprobieren? :confused:[/QUOTE]

danke. aber nun hab ich so nen blöden rahmen. ich würde den ja rausnehmen, aber dann mach ich ja genau den schritt zurück dann geht es nicht mehr oder?

edit: ich glaube jetzt habe ich verstanden was du wolltest. du wolltest mir mit dem rahmen nur zeigen das die lupe schon in der box ist.:wink:

und ich hab mich schon gewundert was ein rahmen mit der lupe zu tun hat:D

so rahmen is nu wieder raus.:wink:

http://www.sportplatz-online.de/

Gruß
Maik

10

Gut, und so sieht das jetzt bei mir aus. Nur zur Info.

11

[QUOTE=nickname;101304]Gut, und so sieht das jetzt bei mir aus. Nur zur Info.[/QUOTE]

las mich raten. google chrome?:smiley:

Gruß
Maik

12

Unter anderem. Im IE, Chrome und auch in Opera sieht es so aus. Die Lösung für das Problem hab ich übriges vor 4 Tagen schon in einen deiner anderen Threads gepostet.

13

[QUOTE=nickname;101306]Unter anderem. Im IE, Chrome und auch in Opera sieht es so aus. Die Lösung für das Problem hab ich übriges vor 4 Tagen schon in einen deiner anderen Threads gepostet.[/QUOTE]

ja ich danke dir. ich werde mich auch noch an die lösung des problems. ranmachen.:smiley:

Gruß
Maik