Probleme der Darstellung vom Suchfeld

[sunflash]

Hallo zusammen!
Ich habe folgendes Problem. Ich wollte das Suchfeld aus dem Header ins Topmenue auf die rechte seite bringen.
Hierzu habe ich in der css folgende Klassen neu definiert:

Code: PHP  [Auswählen]

#topmenu2 {
        float:right;
        padding:0;
        margin:0;
        list-style-type:none;
        height:30px;
        font-size:13px;
        color:#fff;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu2 li {
        height:30px;
        float:right;
        padding: 5px 25px 0px 0px;
        margin:0;
        background: url("img/bg_topmenu_breakline.gif") no-repeat;
        background-position:right;
}
#topmenu2 a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
        line-height:30px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0;
        padding:0;
}
#topmenu2 a:hover {
        color:#DB9501;
}

In Firefox 3 und IE 8 sieht alles bestens aus. Wenn ich jetzt mit http://www.xenocode.com/browsers/ aber meine Seite teste, dann sieht es im Firefox 2 und im IE6, IE7 jedoch total scheiße aus (siehe Anhang).

Was habe ich falsch gemacht. Habe auch die werte für padding und height schon ein wenig verändert, weil es sonst in allen browsern doof aussah =(

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



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

[pufaxx]

Dazu kann ich ohne den HTML-Code drumherum (oder am besten die komplette Seite) zu kennen, nichts sagen.

Aber zwei Hinweise:

Wenn Du eine Höhe festlegst, werden in standardkonformen Browsern die Innenabstände nach oben und unten zu der Höhe hinzugerechnet. Damit wäre #topmenu2 li nicht mehr 30, sondern 35 Pixel hoch.

"float: right" sorgt dafür, dass das gefloatete Element nicht mehr die maximal mögliche Breite hat, sondern nur so breit ist wie dessen Inhalt zugüglich Padding.

[Anonym]

Die Frage die sich stellt, ist ob Du auch die CSS Klassen der SEARCH BOX angepasst hast? Wenn da auch noch eine height:xxx; drin ist, dann wird hier mit berücksichtigt.

Nimm doch erstmal das padding 5px - - - raus und schau mal ob die Höhe dann passt. Wenn Du wie pufaxx ( Willkommen im Forum ) vorgehst, dann mussst Du die Höhe auf 25px setzen um wieder auf 30px zu kommen.

[sunflash]

Bekomme es leider auch mit anderen höhen nicht hin =(
Wenn ich die höhen von meinen topmenu2-styles auf 25 setze, dann rutschen die linken menüpunkte im firefox 3 irgendwie hoch =(

Bei der Seite handelt es sich um www.aloevera-vision.de ...

Ich kann ja nochmal den aktuellen stand posten:

Code: PHP  [Auswählen]

/* TOPMENU AS LIST */
#topmenuwrap {
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu {
        float:left;
        padding:0;
        margin:0;
        list-style-type:none;
        height:36px;
        font-size:13px;
        color:#fff;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu li {
        height:36px;
        float:left;
        padding: 0px 25px 0px 25px;
        margin:0;
        background: url("img/bg_topmenu_breakline.gif") no-repeat;
        background-position:right;
}
#topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
        line-height:36px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0;
        padding:0;
}
#topmenu a:hover {
        color:#DB9501;
}
#topmenu2 {
        float:right;
        padding:0;
        margin:0;
        list-style-type:none;
        height:25px;
        font-size:13px;
        color:#fff;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu2 li {
        height:25px;
        float:right;
        padding: 5px 25px 0px 0px;
        margin:0;
/*      background: url("img/bg_topmenu_breakline.gif") no-repeat;*/
/*      background-position:right;*/
}
#topmenu2 a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
        line-height:25px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0;
        padding:0;
}
#topmenu2 a:hover {
        color:#DB9501;
}

Und hier die ersten Zeilen aus meiner index.html des standart-templates:

Code: XML  [Auswählen]

<div id="wrap">
    <div id="header">
        <div id="logo"><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></div>

    </div>
    <div id="topmenuwrap">
        <ul id="topmenu">
            <li><a href="index.php">Home</a></li>
            <li><a href="{$cart}">{#link_cart#}</a></li>
            {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
            {/if}
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
            {if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
            {php} } {/php}{/if}
        </ul>
        <ul id="topmenu2">
            <li><div id="search">{$box_SEARCH}</div></li>
        </ul>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>

gibt es sonst noch irgendwelche einstellungen die falsch sein könnten? ich bin echt ratlos =(

[jonnyB]

und wie christian schon schrieb, mußt mal schauen was bei der id:search drin ist, denn die hast hier noch nicht mit gelistet!

[sunflash]

ich hoffe das ist jetzt die richtige zeile, sonst habe ich nichts mit search:

Code: PHP  [Auswählen]

#header #search {
        width: 260px;
/*      height:36px;*/
        float:right;
        color:#ffffff;
        padding:0px 0px 0px 0px

[mdoll]

Hi,

zunächst solltest Du die Listenelemente um die Suche raus nehmen (es ist ja ein Suchfeld und keine Liste )

statt

Code: XML  [Auswählen]

<ul id="topmenu2">
            <li><div id="search">
<form id="quick_find" action="http://www.aloevera-vision.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td><strong>Suche:</strong></td>
    <td><input type="text" name="keywords" size="20" maxlength="30" /></td>
    <td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
  </tr>
</table>
</form></div></li>
        </ul>
 

nur

Code: XML  [Auswählen]

<div id="search">
<form id="quick_find" action="http://www.aloevera-vision.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td><strong>Suche:</strong></td>
    <td><input type="text" name="keywords" size="20" maxlength="30" /></td>
    <td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
  </tr>
</table>
</form></div>
 

Dann entfernst Du den ganzen #topmenu2 Kladderadatsch wieder aus Deinem Stylesheet, das brauchst Du alles nicht.

Aus

Code: XML  [Auswählen]

#header #search {
    width: 260px;
/*  height:36px;*/
    float:right;
    color:#ffffff;
    padding:0px 0px 0px 0px

machst Du

Code: XML  [Auswählen]

#topmenuwrap #search {
 position: absolute;
 top: 5px;
 right: 20px;
 color: white

Damit das Ganze dann innerhalb der horizontalen Menüleiste positioniert wird, noch bei #topmenuwrap (ca. Zeile 200 im Stylesheet) ergänzen:

Code: XML  [Auswählen]

position:relative;

Das wäre mein Ansatz. Statt mit float wird die Suchbox damit absolut positioniert, und zwar relativ zum Elternelement. Das sollte dann browserübergreifend gut aussehen. Allerdings bin ich kein CSS-Profi, evtl. gibt es eine bessere und stabilere Lösung.

Gruß
Mathias

[sunflash]

Hallo!!!
Danke für diese tolle Antwort, hat mir wirklich super weitergeholfen. Im IE 8, IE 7, Firefox 3, Firefox 2, Google Chrome, Opera und im Safari sieht es super aus!!!

Einziges Problem jetzt noch:

Im IE 6 ist das Suchfeld extrem weit nach rechts verschoben =( Hier mal ein bild:

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

[mdoll]

Hmm,
das ist wohl ein Bug im IE6...

füg mal bei bei #topmenuwrap noch folgendes ein:

Code: XML  [Auswählen]

zoom:1;

Das ist eine Methode aus dem Yaml-Template, um diverse Bugs beim IE6 zu beheben, ich weiß allerdings nicht, ob das hierbei auch funzt.

Gruß
Mathias

[sunflash]

Super, klappt!!!! Danke sehr!!

[seyth]

super hat funktioniert, wie sieht das ganze denn aus wenn man 2 sprachen installiert hat?

[Hot-Tips]

super hat funktioniert, wie sieht das ganze denn aus wenn man 2 sprachen installiert hat?

Wenn Du für Deine andere Sprachen eine eigene CSS definiert hast, dann musst Du die Änderungen die Du in der Default-CSS gemacht hast natürlich dort auch machen!

[seyth]

Wenn Du für Deine andere Sprachen eine eigene CSS definiert hast, dann musst Du die Änderungen die Du in der Default-CSS gemacht hast natürlich dort auch machen!

das wort SUCHE ist ja in der index.html und wird doch nicht über css geteuert, deswegen frage ich.

[Tomcraft]

Was sollte sich denn hier ändern bei mehreren Sprachen? Es geht doch in diesem Thema hier nur um die Verlegung des Suche-Feldes in die Menü-Bar.

Welche Wort "Suche" in der index.html meinst du denn?

Die Multisprachen-Fähigkeit kannst du hier sehen, indem du die Sprache einfach mal umstellst.

-> https://demo.modified-shop.org/trunk/

Grüße

Torsten

[seyth]

hey,

ich habe den code in meiner index.html übernommen:

Code: PHP  [Auswählen]

<div id="search">
<form id="quick_find" action="http://www.aloevera-vision.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td><strong>Suche:</strong></td>
    <td><input type="text" name="keywords" size="20" maxlength="30" /></td>
    <td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
  </tr>
</table>
</form></div>
 

und in meiner css
aus

Code: PHP  [Auswählen]

#header #search {
   width: 260px;
/*  height:36px;*/
    float:right;
    color:#ffffff;
   padding:0px 0px 0px 0px
 

in

Code: PHP  [Auswählen]

#topmenuwrap #search {
position: absolute;
 top: 5px;
 right: 20px;
 color: white
 

geändert.

damit ich auch die suchfeld leiste mittig habe, nur wird jetzt das wort suchen

Code: PHP  [Auswählen]

<tr>  

06     <td><strong>Suche:</strong></td>  

07     <td><input type="text" name="keywords" size="20" maxlength="30" /></td>
 

aus der index.html genommen auch beim sprachwechsel.

so sieht das ganze bei mir aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
<div id="wrap">
    <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="search">
<form id="quick_find" action="http://www.ml-nails.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td><strong>Suche:</strong></td>
    <td><input type="text" name="keywords" size="20" maxlength="30" /></td>
    <td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
  </tr>
</table>
</form></div>

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

    </div>