Topmenu mit "randbild" links

[blaulicht]

hallo,

ich bin gerade dabei das template an ein neues design anzupassen. Das Ganze soll mal so aussehen:

Jetzt wird aber, wenn ich in die index.html das bild "menu_links.png" vor das div tag für das menu einfüge das menu in die nächste zeile verschoben.

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 id="search">{$box_SEARCH}</div>
    </div>
     <img src="{$tpl_path}img/menu_left.png" width="37" alt="" />
     <div id="topmenuwrap">
        <ul id="topmenu">
            <li><a href="{$index}">{#link_index#}</a></li>
 

So soll es mal werden:

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

Wie kann ich das Menu hinter das Bild in die gleiche Zeile bekommen?

Ich habe überlegt vielleicht die ganz Zeile aus dem Entworf auszuschneiden, unter das Logo oder mit dem Logo zusammen in das Template als Background einzufügen und dann die Links fürs Menu mit css einzufügen und an die richtige Stellen zu verschieben. Aber geht das nicht auch mit dem Template, wie es "ausgeliefert" wird?

So sieht es im Moment aus:

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



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

[Dull]

wenn ich das jetzt richtig verstanden habe: du willst das png für die Navi unter die eigentliche navi haben?

warum legst du dann nicht einfach 2 divs übereinander?

[blaulicht]

Also in meinem Entwurf hat ja die Navi Leiste links und Rechts einen Teil der nicht zur Navi selbst gehört. Im standard Template ist das ja anders. Da beginnt die Navileiste auch direkt mit dem ersten Button.

Bei mir soll der erste Button, "Startseite", aber etwas nach rechts eingerückt sein. Links daneben dann wie im Entwurf zu erkennen.. Wie kann ich das machen? ich habe ja den linken Teil nebem dem Starseite Button jetzt als img eingebunden, aber dann rückt er die Navileiste komplett in die nächste Zeile. Das ist das Problem.

Wie meinst du das, zwei div übereinander?

Code: CSS  [Auswählen]

#navi_bg {
background: url(img/menu_bg);
}
 

und das dann in index.htm vor das topmenuwrap div?

[Dull]

Also in meinem Entwurf hat ja die Navi Leiste links und Rechts einen Teil der nicht zur Navi selbst gehört. Im standard Template ist das ja anders. Da beginnt die Navileiste auch direkt mit dem ersten Button.

Bei mir soll der erste Button, "Startseite", aber etwas nach rechts eingerückt sein. Links daneben dann wie im Entwurf zu erkennen.. Wie kann ic{config_load file="$language/lang_$language.conf" section="login"}
<h2>{#heading_login#}</h2>

{if $info_message!=''}
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr class="headerMessage">
    <td align="center">{$info_message}</td>
  </tr>
</table>
<br />
{/if}
{if $account_option=='account' or $account_option=='both'}
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="50%" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="border-bottom: 1px solid; border-color: #cccccc;" class="main"><strong>{#title_new#}</strong></td>
        </tr>
        <tr>
          <td style="border-right: 1px solid; border-color: #cccccc;" class="main">{#text_new#}<br />
            <br />
            {$BUTTON_NEW_ACCOUNT} </td>
        </tr>
      </table>
    </td>
    <td width="50%" valign="top"> {$FORM_ACTION}
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="border-bottom: 1px solid; border-color: #cccccc;"  class="main"><strong>{#title_returning#}</strong></td>
          </tr>
          <tr>
            <td class="main"><p>{#text_returning#}<br /></p>
              <table width="100" border="0" cellspacing="2" cellpadding="0">
                <tr>
                  <td class="main"><strong>{#text_email#}</strong> </td>
                  <td>{$INPUT_MAIL}</td>
                </tr>
                <tr>
                  <td class="main"><strong>{#text_password#}</strong></td>
                  <td>{$INPUT_PASSWORD}</td>
                </tr>
              </table>
              <p><br /><a href="{$LINK_LOST_PASSWORD}">{#text_lost_password#}</a></p>
              <p>{$BUTTON_LOGIN}</p></td>
          </tr>
        </table>
      {$FORM_END}
   </td>
  </tr>
</table>
{/if}
<br />
{if $account_option=='both' or $account_option=='guest'}<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="border-bottom: 1px solid; border-color: #cccccc;" class="main"><strong>{#title_guest#}</strong></td>
        </tr>
        <tr>
          <td style="border-right: 1px solid; border-color: #cccccc;" class="main">{#text_guest#}<br />
            <br />
            {$BUTTON_GUEST}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
{/if}h das machen? ich habe ja den linken Teil nebem dem Starseite Button jetzt als img eingebunden, aber dann rückt er die Navileiste komplett in die nächste Zeile. Das ist das Problem.

Wie meinst du das, zwei div übereinander?

Code: CSS  [Auswählen]

#navi_bg {
background: url(img/menu_bg);
}
 

und das dann in index.htm vor das topmenuwrap div?

achsooo,

einfach in der index.html die Smartybefehle (z.B. {#link_logoff#} {#link_account#} {link_cart#} {#link_checkout#} per eigens erstelltem div oder via tabelle da hin formatieren wo du sie haben willst

dem neuen div dann einen hohen z-index zuweisen, somit liegt er über den anderen divs, und somit auch über einfügten Hintergründen

[blaulicht]

ja, ich glaube so habe ich es jetzt auch gemacht. einfach die komplette navi leiste als BG im stylesheet.css #topmenuwrap eingefügt und dann halt die smarty-links in der index gelassen. dann noch bischen mit den padding einheiten das ganze verschoben so dass es jetzt passt.

gibt es ne Möglichkeit da mouseover-Buttons einzubauen? also nicht nur die Schrift sondern der ganze Button sollte gehighlitet werden. Ich kenne das nur aus Dreamweaver, der macht das glaube mit javascript O.o bin mir aber nicht sicher..

danke für die Hilfe schonmal

[Dull]

jo hovern mit bildaustausch funktioniert nur mit JS ^^
für den JS code gibts im template ja ne extra datei