# Lupe in die Searchbox

**URL:** <https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626>\
**Category:** Deutsches Forum\
**Tags:** templates-design\
**Created:** [September 8, 2012, 3:11pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626 "2012-09-08T15:11:25Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 8, 2012, 3:11pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/1 "2012-09-08T15:11:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 8, 2012, 3:14pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/2 "2012-09-08T15:14:58Z")

</div>

Stichwort: z-index!

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 8, 2012, 3:24pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/3 "2012-09-08T15:24:57Z")

</div>

[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:

```auto
[{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…

```auto
#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

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 8, 2012, 4:03pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/4 "2012-09-08T16:03:14Z")

</div>

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:

```auto
/* --- 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… 😃

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 8, 2012, 4:37pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/5 "2012-09-08T16:37:55Z")

</div>

```auto
/* --- 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?😉

Gruß  
Maik

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 8, 2012, 4:49pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/6 "2012-09-08T16:49:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 8, 2012, 4:51pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/7 "2012-09-08T16:51:00Z")

</div>

[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

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 9, 2012, 12:24pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/8 "2012-09-09T12:24:54Z")

</div>

[[QUOTE=sportplatz-online.de](http://QUOTE=sportplatz-online.de);101264]

```auto

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:
```

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 9, 2012, 4:54pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/9 "2012-09-09T16:54:56Z")

</div>

[QUOTE=nickname;101296]Aber sicher. Was hält dich davon ab, es einfach mal auszuprobieren? 😕[/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.😉

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

so rahmen is nu wieder raus.😉

[http://www.sportplatz-online.de/](http://www.sportplatz-online.de/)

Gruß  
Maik

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 9, 2012, 5:30pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/10 "2012-09-09T17:30:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 9, 2012, 5:42pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/11 "2012-09-09T17:42:04Z")

</div>

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

las mich raten. google chrome?😃

Gruß  
Maik

---

<div class="post-metadata">

**Author:** ![nickname](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/nickname/32/182_2.png) [@nickname](https://forum.oxid-esales.com/u/nickname)\
**Post date:** [September 9, 2012, 5:48pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/12 "2012-09-09T17:48:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sportplatz-online.de](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/eada6e/32.png) [@sportplatz-online.de](https://forum.oxid-esales.com/u/sportplatz-online.de)\
**Post date:** [September 9, 2012, 5:49pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/13 "2012-09-09T17:49:34Z")

</div>

[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.😃

Gruß  
Maik

---

<div class="post-metadata">

**Author:** ![system](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/system/32/4245_2.png) [@system](https://forum.oxid-esales.com/u/system)\
**Post date:** [July 13, 2026, 8:10pm UTC](https://forum.oxid-esales.com/t/lupe-in-die-searchbox/59626/14 "2026-07-13T20:10:43Z")

</div>