ANLEITUNG: Suchfeld ins Top-Menü verschieben

[Tomcraft]

Dieses Thema hatten wir schon mehrfach, hier eine einfache Anleitung um das Suchfeld ins Menü zu verschieben:

Suche in "/templates/xtc5/index.html":

Code: PHP  [Auswählen]

<div id="header">
  <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
  <div id="search">{$box_SEARCH}</div>
</div>
<div id="topmenuwrap">
  <ul id="topmenu">
    <li><a href="{php}echo xtc_href_link(FILENAME_DEFAULT);{/php}">Home</a></li>
    <li><a href="{$cart}">{#link_cart#}</a></li>
   {if $account}
    <li><a href="{$account}">{#link_account#}</a></li>
   {/if}
    {php}if ($_SESSION['customers_status']['customers_status_id'] == 1) { {/php}
    <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
   {php}}{/php}
    <li><a href="{$checkout}">{#link_checkout#}</a></li>
   {php} if (isset($_SESSION['customer_id'])) { {/php}
    <li><a href="{$logoff}">{#link_logoff#}</a></li>
   {php} } {/php}
  </ul>
  <div id="languages">{$box_LANGUAGES}</div>
</div>

und ersetze mit:

Code: PHP  [Auswählen]

<div id="header">
  <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
</div>
<div id="topmenuwrap">
  <ul id="topmenu">
    <li><a href="{$index}">{#link_index#}</a></li>
   <li><a href="{$cart}">{#link_cart#}</a></li>
   {if $account}
    <li><a href="{$account}">{#link_account#}</a></li>
   {/if}
    {if $smarty.session.customers_status.customers_status_id == '1'}
    <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
   {/if}
    <li><a href="{$checkout}">{#link_checkout#}</a></li>
   {if $smarty.session.customer_id}
    <li><a href="{$logoff}">{#link_logoff#}</a></li>
   {else}
    <li><a href="{$login}">{#link_login#}</a></li>
   {/if}
  </ul>
  <div id="languages">{$box_LANGUAGES}</div>
  <div id="search">{$box_SEARCH}</div>
</div>

Suche in "/templates/xtc5/boxes/box_search.html":

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2"><strong>{#heading_search#}:</strong></td>
 </tr>
  <tr>
    <td>{$INPUT_SEARCH}</td>
    <td>{$BUTTON_SUBMIT}</td>
  </tr>
  <tr>
    <td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
 </tr>
</table>
{$FORM_END}

und ersetze mit:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
{*
  <tr>
    <td colspan="2"><strong>{#heading_search#}:</strong></td>
 </tr>
*}
  <tr>
    <td><strong>{#heading_search#}:</strong></td>
   <td>{$INPUT_SEARCH}</td>
    <td>{$BUTTON_SUBMIT}</td>
  </tr>
{*
  <tr>
    <td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
 </tr>
*}
</table>
{$FORM_END}

Suche in "/templates/xtc5/stylesheet.css":

Code: CSS  [Auswählen]

#header #search {
  width: 230px;
  height:75px;
  float:right;
  color:#fff;
  padding:30px 0px 0px 60px
}
#header #search a {
  color:#fff;
  font-size:11px;
}

und ersetze mit:

Code: CSS  [Auswählen]

/*
#header #search {
  width: 230px;
  height:75px;
  float:right;
  color:#fff;
  padding:30px 0px 0px 60px
}
#header #search a {
  color:#fff;
  font-size:11px;
}
*/

Suche in "/templates/xtc5/stylesheet.css":

Code: CSS  [Auswählen]

#topmenuwrap {
  background: #333 url(img/bg_topmenu.gif) repeat-x;
}

und ersetze mit:

Code: CSS  [Auswählen]

#topmenuwrap {
  background: #333 url(img/bg_topmenu.gif) repeat-x;
  height: 36px;
  position:relative;
  zoom:1;
}

Suche in "/templates/xtc5/stylesheet.css":

Code: CSS  [Auswählen]

#topmenuwrap {
  background: #333 url(img/bg_topmenu.gif) repeat-x;
  height: 36px;
  position:relative;
  zoom:1;
}

und füge danach ein:

Code: CSS  [Auswählen]

#topmenuwrap #search {
  text-align:right;
  height:26px;
  color: white;
  font-size:13px;
  padding: 6px 10px 4px 0px;
  margin:0;
  float: right;
}

Suche in "/templates/xtc5/stylesheet.css":

Code: CSS  [Auswählen]

#languages {
  text-align:right;
  height:26px;
  font-size:13px;
  background: url(img/bg_topmenu.gif) repeat-x;
  padding: 10px 10px 0px 0px;
  margin:0;
}

und ersetze mit:

Code: CSS  [Auswählen]

#languages {
  text-align:right;
  height:26px;
  font-size:13px;
  background: url(img/bg_topmenu.gif) repeat-x;
  padding: 10px 10px 0px 0px;
  margin:0;
  float: right;
}

So könnte es nach dem Umbau aussehen:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Grüße

Torsten

Linkback: https://www.modified-shop.org/forum/index.php?topic=6469.0

[floh]

Kurzes Feedback.....

Diese Anleitung stimmt so nicht. Wenn man in der index.html die Zeilen so abändert wie oben angegeben, wird das Suchfeld oben rechts angezeigt.

zu sehen unter: http://www.vsb-neuhof.de/modified_104/index.php

Gruß

floh

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[albersmann]

Ich habe das gleiche Ergebnis bekommen. Suchbox bedindet sich oben rechts..  

[floh]

Vielleicht noch jemand?

Ich habe da schon einige Versuche gemacht wegen der Positionierung. Leider hat bisher nichts geholfen.

floh

[FrankDN]

Ja ich hab das Suchfeld auch oben rechts...was muss man ändern?

[floh]

Gute Frage....    

Bin hier bald am verzweifeln, weil ich die Positionierung nicht in das Topmenü hinbekomme....  

Ich bleib aber dran...

Gruß

floh

[pq]

Das in stylesheet.css einfügen:

Code: CSS  [Auswählen]

#topmenuwrap {
 position: relative;
}

[albersmann]

Moin pq,

läuft. Super! Danke.  

[floh]

Das in stylesheet.css einfügen:

Code: CSS  [Auswählen]

#topmenuwrap {
 position: relative;
}

Sieht schon mal besser aus.
Aber, wenn man "absolute" in "relative" ändert, wird das Topmenü in der Darstellung zerschossen.

Schau mal Screenshot...

floh

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[floh]

läuft. Super! Danke.  

Ohne die Topmenü-Darstellung zu zerschießen wie bei mir?

[albersmann]

Ohne die Topmenü-Darstellung zu zerschießen wie bei mir?

Ja, ohne die Ansicht zu zereissen.

Gruß

Sven

[pq]

nein.

nicht in
#topmenuwrap #search

das absolute ersetzen, sondern ein neues

#topmenuwrap (ohne #search  )

mit relative anlegen.

[FrankDN]

Äääh mal für ganz doofe erklären? wo muss ich das in der stylesheet nun einfügen? Zusätzlich und unter welcher Zeile?

[pq]

das

Code: CSS  [Auswählen]

#topmenuwrap {
 position: relative;
}

in der stylesheet.css einfügen. Zb direkt vor das #topmenuwrap #search

Code: CSS  [Auswählen]

/*
#header #search {
        width: 230px;
        height:75px;
        float:right;
        color:#fff;
        padding:30px 0px 0px 60px
}
#header #search a {
        color:#fff;
        font-size:11px;
}
*/

#topmenuwrap {
 position: relative;
}

#topmenuwrap #search {
 position: absolute;
 top: 5px;
 right: 20px;
 color: white;
 font-size:13px;
}

[pq]

Nochmals ein Nachtrag:
Das Suchfeld wird ganz nach rechts an den Rand geschoben. Wenn man mehr als eine Sprache aktiviert hat, dann werden die Landesflaggen überdeckt. Die Quick & Dirty Lösung wäre, den Wert "right:20px" einfach zu erhöhen.

Eine andere Methode wäre, das Suchfeld an den anderen Elementen auszurichten, anstatt die Position fest zu setzen:

Ändert man in der stylesheet.css die oben beschriebene Einträge in:

Code: CSS  [Auswählen]

#topmenuwrap #search {
        text-align:right;
        height:26px;
        font-size:13px;
        padding: 5px 10px 5px 0px;
        margin:0;
        float: left;
}

So wird das Suchfeld LINKS an den Buttons ausgerichtet. Will man's rechts haben, so muss man die Einträge in der stylesheet.css wie folgt ändern:

Code: CSS  [Auswählen]

#topmenuwrap  {
        height: 36px;
}
#topmenuwrap #search {
        text-align:right;
        height:26px;
        font-size:13px;
        padding: 5px 10px 5px 0px;
        margin:0;
        float: right;
}

sowie ca. 70 Zeilen später die Stildefinition des #languages Elementes um "float:right;" erweitern,also:

Code: CSS  [Auswählen]

#languages {
        text-align:right;
        height:26px;
        font-size:13px;
        background: url(img/bg_topmenu.gif) repeat-x;
        padding: 10px 10px 0px 0px;
        margin:0;
        float: right;
}

Und in der index.html die Zeilen

Code: XML  [Auswählen]

            <div id="search">{$box_SEARCH}</div>
            <div id="languages">{$box_LANGUAGES}</div>

vertauschen zu:

Code: XML  [Auswählen]

            <div id="languages">{$box_LANGUAGES}</div>
            <div id="search">{$box_SEARCH}</div>

so ...
noch ein bisschen aufräumen:
In der stylesheet.css ist 2x die Eigenschaft des Elementes #topmenuwrap gesetzt.
Beide Einträge kann man zusammenfassen zu:

Code: CSS  [Auswählen]

#topmenuwrap  {
        height: 36px;
        background: #333 url(img/bg_topmenu.gif) repeat-x;
}