[Gelöst] Suche positionieren funktioniert nur halb

Hallo, ich habe ein kleines problem. Und zwar wollte ich das Suchformular anders Positionieren, es funktioniert auch, aber nur bis zu einem bestimmten punkt. http://chiptuningforyou.de/index.php Dort ist die Suche unterhalb der Buttons, soweit auch korrekt, allerdings nicht bündig mit dem header bzw. dem Content. Die Suche ist immer ca. 80px versetzt nach innen. Habe auch schon diverse Beiträge hier gefunden und auch die Template Dokumentation dazu gelesen, bringt aber keine abhilfe. Irgendwo ist da noch ein fehler dirn. wenn ich mit margin positioniere passiert nichts bzw. wenn ich 0 oder -0 angebe, verschiebt sich die suche komplett nach links. Ich bekomme es einfach nicht bündig. Wer kann mir dabei helfen? Vielen Dank

Hi, wie hast du das Feld eigentlich so ausgerichtet. Kommt mir so vor als ob es an einem anderen Div ausgerichtet ist. Sobald man die Fenstergröße ändert, ändert sich auch die Suchfeldposition. Du hättest einfach nur bei div#Searchcontainer (in der CSS) ein Left: x px und Top: x pxmit !Important setzen müssen und schon hättest du es schnell und einfach ausrichten können.

Ich habe die suche in der index.tpl zwischen header und content plaziert und wie in der template doku plaziert. so ist das momentan in der css verankert. div#searchcontainer { top: 205px; } div#searchcontainer .inner\_searchcontainer {width:280px; position: absolute; background: transparent;} und so in der index.tpl (gekürzt) [code]{ {block name=“frontend_index_start”}{/block}<?xml version="1.0" ?>{block name=“frontend_index_doctype”} {/block} {block name=‘frontend_index_header’} {include file=’./frontend/index/header.tpl’} {/block}

{* Message if javascript is disabled *} {block name=“frontend_index_no_script_message”}


{s name=“IndexNoscriptNotice”}{/s}

{/block}

{* Shop header *} {block name=‘frontend_index_navigation’}

{* Shop logo *} {block name=‘frontend_index_logo’}
[{$sShopname}]({url controller=‘index’} “{$sShopname} - {s name=‘IndexLinkDefault’}{/s}”)|









{/block} {* Search *} {block name=‘frontend_index_search’} {include file=“frontend/index/search.tpl”} {/block}

{/block}[/code]

|

Hi, warum hast du es nicht einfach nur so wie oben in der CSS ausgerichtet. Warum veeschiebst du es auch noch in der .tpl ? Ich denke dadurch kommt es zu dem Fehler. Ich schaue mir das noch mal in Ruhe an.

das habe ich gemacht, damit zwischen dem header und dem content eine kleine freie zeile bleibt. sonst hätte ich dort noch extra eine grafik bzw. einen abstandshalter einbauen müssen.

Hi - habs mir noch ma angeschaut. Das Problem war die falsch verschobene DIV Box (Searchbox) in der .tpl Datei. Hier noch mal dein Code mit jetzt funktionierendem Suchfeld: [code]{ {block name=“frontend_index_start”}{/block}<?xml version="1.0" ?>{block name=“frontend_index_doctype”} {/block} {block name=‘frontend_index_header’} {include file=’./frontend/index/header.tpl’} {/block}

{* Message if javascript is disabled *} {block name=“frontend_index_no_script_message”}

{s name="IndexNoscriptNotice"}{/s}
{/block}

{* Shop header *} {block name=‘frontend_index_navigation’}

{* Shop logo *} {block name=‘frontend_index_logo’}
[{$sShopname}]({url controller=‘index’} “{$sShopname} - {s name=‘IndexLinkDefault’}{/s}”)|









{* Search *} {block name=‘frontend_index_search’} {include file=“frontend/index/search.tpl”} {/block} {/block}

{/block}[/code] Achtung: Speichere deine Ausgangsdatei ab - evtl. treten Fehler auf (Habe deinen Code überprüft und bei mir hat es so geklappt. Und ergänze, bzw. vervollständige folgende Werte in der CSS: Div#Searchcontainer { top: 204px; left: 0px; position:absolute; } Müsste dann so klappen :):thumbup: Bei Fragen einfach noch mal schreiben

|

Hi Ich hab meine Suchfeld auch einfach so verschoben. Vergiss nur nicht das Such-Ergebnis mit zu verschieben. /\*\*Suchfeld verschieben \*/ div#searchcontainer { left: 733px; top: 156px; } div#searchcontainer .inner\_searchcontainer { width: 300 } /\*\*Suchergebnis verschieben \*/ div#searchresults { top:190px!important; left:712px!important; position: absolute; } So sieht das bei mir in der CSS aus. Gruß Grazzy

Grazzy das funktioniert bei Ihm so doch nicht. Er hat auch in der .tpl Datei die Anweisung verschoben. Und da hat die CSS Anweisung nicht mehr geholfen. Er muss den BLock in der .tpl noch einmal an einen anderen Ort verschieben, so wie ich es ihm oben angezeigt habe.

wunderbar. hat geklappt. vielen dank. nun hab ich noch eine 2te frage. auf einer anderen, noch nicht fertigen homepage habe ich nur die koordinaten geändert, ohne die index.tpl zu ändern, nun ist das suchformular irgendwie kleiner als der button. was habe ich da angerichtet? http://chiptuning.ms24-hosting.de/sw/shopware.php/

Hi - ändere in der CSS einfach folgende Befehle im Div#searchcontainer: Hab hier die komplette Anweisung für den Container stehen - du musst bei dir lediglich [color=red]width[/color] und [color=red]height[/color] ändern. div#searchcontainer .inner\_searchcontainer form#searchform input#searchfield { background: url("../images/backgrounds/bg\_searchfield.png") repeat-x scroll 0px 0px rgb(250, 250, 250); border-color: rgb(205, 205, 205) -moz-use-text-color rgb(205, 205, 205) rgb(205, 205, 205); border-right: medium none; color: rgb(153, 153, 153); margin: 0px; padding: 5px 43px 5px 10px; width: 237px; font-size: 12px; border-radius: 2px 0px 0px 2px; height: auto;

so, hab das mit width und height probiert, bringt aber keine lösung. an der css datei scheint es nicht zu liegen. hier das fertige template http://s-chiptuning.ms24-hosting.de/index.php Hier der Code aus der css datei. Die search.tpl ist original. in der index.tpl ist die suche nicht um positioniert. wie bekomme ich das nun hin, das dass eingabe formular wieder gleich groß ist. falls es interessant ist, das newsletter “formular” im footer ist ebenfalls betroffen. danke /\* SEARCH ------------------------ \*/ /\*\* Reposition the search field \*/ div#searchcontainer { left: 370px; top: 60px; } div#searchcontainer .inner\_searchcontainer { width: auto; height: 27px;} div#searchcontainer {background-color:#f2f2f2;} #submit\_search {color:#fff;background-color:#df4800;border-color:#e45a01;} form#searchform input#searchfield {background: url("../images/backgrounds/bg\_searchfield.png"); color: #666;border-color: #bbb; background-color: #fff; height: 27px; width: auto;} #header\_links, #header\_links a {color:#999;} div#searchresults {background-color:#fff;border-color :#dfdfdf;color:#888}

Hi ganz einfach - such dir in deiner CSS Datei „emotion_red“ den Punkt - form#searchform input#searchfield // in Zeile 415 // und setzte die Höhe auf 27px ( height:27px;) Für den Footer folgenden Punkt in der CSS suchen - #footer .footer_menu .footer_column form input // in Zeile 1372 // auf auf Höhe 26px setzen ( height: 26px;) Voila, es geht :wink: Mfg

[quote=„Design-Your-Web“]form#searchform input#searchfield // in Zeile 415 // und setzte die Höhe auf 27px ( height:27px;) Für den Footer folgenden Punkt in der CSS suchen - #footer .footer_menu .footer_column form input // in Zeile 1372 // auf auf Höhe 26px setzen ( height: 26px;) Voila, es geht :wink: Mfg[/quote] Zeile 415 ist wie im obigen thread von mir auf 27px gesetzt, funktioniert nicht. Zeile 1372 existiert in der css gar nicht, geht nur bis 775. ich habe auch schon die css getauscht gegen die original emotion_red,emotion,emotion_pink etc… ohne jede änderung, der fehler bleibt. ich denke es liegt nicht an der css datei.

Hallo, Du hast in der emotion.css Änderungen durchgeführt. Design-Your-Web meinte bestimmt, du sollst Dir aus der emotion.css die Zeile 1415 kopieren und diese in Deine emotion_red einfügen, denn dort steht height:15px. Sollten aber 27px sein. Grüße Erik

wunderbar. hab es geschafft. wie heißen die attribute für gutschein und artikel nummer im shopping cart? vielen dank

Hallo. Ich möchte nun wirklich nicht meckern, aber du solltest dir selber einen Gefallen tun, und die Grundlagen in HTML und CSS aneignen. Außerdem solltest du dir den Umgang mit kleinen Helfern wie „Firebug“ und dem Mozilla WebDeveloperPlugin schnellstens aneignen. Du wirst sicher in Kürze merken, dass du wesentlich schneller voran kommst und effektiv arbeiten kannst. http://postimg.org/image/k4wtwuabd/

[quote=“Mark”]Hallo. Ich möchte nun wirklich nicht meckern, aber du solltest dir selber einen Gefallen tun, und die Grundlagen in HTML und CSS aneignen. Außerdem solltest du dir den Umgang mit kleinen Helfern wie “Firebug” und dem Mozilla WebDeveloperPlugin schnellstens aneignen. Du wirst sicher in Kürze merken, dass du wesentlich schneller voran kommst und effektiv arbeiten kannst. http://postimg.org/image/k4wtwuabd/[/quote] Vielen Dank für den Hinweis, die Grundkenntnisse besitze ich schon, habe mich aber bisher nicht mit firebug beschäftigt, sonst wäre ich wahrscheinlich selber darauf gekommen. ohne html/css vorkenntnisse hätte ich es bis hier gar nicht geschafft. da die startseite sehr komplex gestalltet und aus über 30 einzel elementen besteht, ist die “manuelle” suche nach dem Attribut doch schon recht mühselig. werde aber deinen rat befolgen und mich mit firebug mal auseinandersetzen müssen :wink: Danke Ich denke das thema kann geschlossen werden

Das Thema musst Du selbst schließen. :smiley: Grüße Erik!