Probleme mit NivoSlider und Listingbox

[shudder]

Hallo zusammen,

versuche jetzt seit 3 Tagen den Fehler zu finden und bekomm es einfach nicht hin.

Habe den Nivoslider eingebaut. Funktioniert auch im IE9 und FF 4 super! Wenn ich die Seite allerdings mit dem IE7 erscheint der Slider nicht an der gewünschten Stelle sondern ganz unten auf der Seite. Im IE8 erscheint der Slider komischerweise an der richtigen Stelle aber zeitgleich auch unten auf der Seite, also doppelt.
Zudem habe ich auf der Startseite noch die Top-Artikel in 4 Spalten. Auch diese werden im IE9,FF und sogar im IE8 korrekt angezeigt. Nur im IE7 ist eine Spalte aus dem Content rausgeschoben, die anderen sitzen an der richtigen Stelle.
Habe glaube ich nun zuviel gesucht und rumgebastelt das ich garnicht mehr weiß wo ich noch suchen soll. Wahrscheinlich ist die Lösung ganz einfach aber ich bekomms nicht hin.

Seite ist noch nicht fertig, also nicht wundern wenn noch der ein oder andere Fehler (optisch oder rechtlich) drin ist. Danke

wir-ziehen-mit.de



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

[hedon02]

Hi,

die <div id="slider"> bekommt von Jquery ein "position:relative;" mitgegeben. Du versuchst aber, den Slider "absolut" zu positionieren. Das funktioniert schon deshalb nicht, weil Du dem übergeordneten "Div" kein "position:relative;" zugewiesen hast. Es geht in diesem Fall aber überhaupt nicht.

Am Besten wäre es die <div id="slider"> in die <div id="content"> zu integrieren und dort normal zusammen mit den anderen Elementen ("h1" "p" und "table") per "float" zu positionieren. Das unbenannte "div" um "p" und "table" macht ünrigens auch keinen Sinn.

Gruss

P.S.: das ganze musst Du in der "main_content.html" tun...

[shudder]

So sieht die "main_content.html" momentan aus.

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{$MODULE_error}</br>
<h1 style="border: none;">{$title}</h1>
<div>{$text}</div>
{if $MODULE_new_products}
<div>{$MODULE_new_products}</div>
{/if}
{if $MODULE_upcoming_products}
<div>{$MODULE_upcoming_products}</div>
{/if}

Hab's nicht ganz verstanden wie ich das jetzt ändern soll.

[hedon02]

Hmmm, hast Du den Slider nach diesem Vorbild "Einbinden des Nivo-Sliders auf der Startseite" eingebaut?

Dann war der Hinweis mit der "main_content" natürlich nicht richtig, auch wenn ich nicht ganz verstehe warum man das Teil auf der Index einbindet.

Dann poste mal bitte Deine "index.html"...

[shudder]

Ja, hab's nach der Anleitung eingebaut. Funktioniert ja auch, nur nicht in den "älteren" Browsern:

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>
    <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>
    <div id="breadcrumb">{$navtrail}</div>
    <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
        <div id="leftcol">{$box_CATEGORIES}{$box_REVIEWS}{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_BESTSELLERS}{$box_WHATSNEW}{$box_INFOBOX}{$box_CURRENCIES} </div>
        {/if}
                <div
                {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
                        id="content"
                {else}
                        id="contentfull"
                {/if}
                >
        {if strstr ($smarty.server.PHP_SELF, 'index')}
            {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
                 {if $BANNER}{$BANNER}{/if}
           {/if}
        {/if}
        {$main_content}
                </div>
        {if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
         <div id="slider" class="nivoSlider">
                <img src="{$tpl_path}img/slider1.jpg" alt="Umzug" />
                <img src="{$tpl_path}img/slider2.jpg" alt="Umzugskartons" />
                <img src="{$tpl_path}img/slider3.jpg" alt="Transporthilfen" />
                <img src="{$tpl_path}img/slider4.jpg" alt="Umzugsmaterial"  />
                           </div>
  {/if}{/if}
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}

    {/if} </div>
<div class="abstand"></div>
<div id="bottom">
  <div class="bottom-divs">
    <!-- Bottom Left -->
    <div id="bottom-left">
      {$box_CONTENT}
    </div>
    <!-- Bottom Mid -->
    <div id="bottom-mid">
     <img src="images/versand.jpg" alt="Versand">
    </div>
    <!-- Bottom Right -->
    <div id="bottom-right">
      {$box_SEARCH}<br>{$box_NEWSLETTER}
    </div>
  </div>
</div></br><p class="footer">Wir verschicken Ihre Umzugskartons deutschlandweit. Sie wohnen in Augsburg, Berlin, München, Hamburg, Leipzig, Bremen, Dortmund, Stuttgart, Köln, Nürnberg, Frankfurt, Essen, Dresden, Mannheim, Düsseldorf oder Hannover? Ganz egal! Wir liefern Ihnen die Umzugsmaterialien direkt an die Haustüre.<br>{$smarty.const.TITLE} © {$smarty.now|date_format:"%Y"} | Template © 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

[hedon02]

Ja Danke. Also:

Ich bin kein PHP-Profi aber diese ganzen ineinander verschachtelten "if" Abfragen machen die Sache doch unnötig kompliziert (zumindest zum lesen). Aber na gut.:

Ersetze mal diesen Code:

Code: PHP  [Auswählen]

 {$main_content}
                </div>
        {if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
         <div id="slider" class="nivoSlider">
                <img src="{$tpl_path}img/slider1.jpg" alt="Umzug" />
                <img src="{$tpl_path}img/slider2.jpg" alt="Umzugskartons" />
                <img src="{$tpl_path}img/slider3.jpg" alt="Transporthilfen" />
                <img src="{$tpl_path}img/slider4.jpg" alt="Umzugsmaterial"  />
                           </div>
  {/if}{/if}
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}

    {/if} </div>
 

durch:

Code: PHP  [Auswählen]

 {$main_content}
 {if strstr ($smarty.server.PHP_SELF, 'index')}
    {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
         <div id="slider" class="nivoSlider">
                <img src="{$tpl_path}img/slider1.jpg" alt="Umzug" />
                <img src="{$tpl_path}img/slider2.jpg" alt="Umzugskartons" />
                <img src="{$tpl_path}img/slider3.jpg" alt="Transporthilfen" />
                <img src="{$tpl_path}img/slider4.jpg" alt="Umzugsmaterial"  />
         </div>
   {/if}
 {/if}
</div>
 

Damit kommt der Slider in die <div id="content"> unterhalb der Daten der "main_content.html" (also ganz am Ende, aber oberhalb des "Footer" und der Fehler beim Löschen der "rightcol" wird beseitigt. (die "if" Abfrage ist ja bei Dir überflüssig)

Dann mach die CSS Änderungen von <div id="slider" class="nivoslider"> rückgängig. (Positionierung "absolute" raus usw...)

Dann lad das mal hoch und über Firebug kann man dann "on the fly" probieren, den ganzen Slider absolut richtig zu positionieren.

Gruss

P.S.:

Ich allerdings würde den ganzen Slider in die "main_content.html" einbinden:

das hier ersetzten:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{$MODULE_error}</br>
<h1 style="border: none;">{$title}</h1>
<div>{$text}</div>
{if $MODULE_new_products}
<div>{$MODULE_new_products}</div>
{/if}
{if $MODULE_upcoming_products}
<div>{$MODULE_upcoming_products}</div>
{/if}
 

durch:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{$MODULE_error}</br>
<h1 style="border: none;">{$title}</h1>
<div>{$text}</div>
<div id="slider" class="nivoSlider">
           <img src="{$tpl_path}img/slider1.jpg" alt="Umzug" />
           <img src="{$tpl_path}img/slider2.jpg" alt="Umzugskartons" />
           <img src="{$tpl_path}img/slider3.jpg" alt="Transporthilfen" />
           <img src="{$tpl_path}img/slider4.jpg" alt="Umzugsmaterial"  />
</div>
{if $MODULE_new_products}
<div>{$MODULE_new_products}</div>
{/if}
{if $MODULE_upcoming_products}
<div>{$MODULE_upcoming_products}</div>
{/if}
 

Damit kommt der Slider oberhalb der "Neuen Produkte" und unterhalb Deines Textes. Allerdings auch unterhalb der "Gründe". Das ließe sich aber wahrscheinlich am einfachsten durch ein negatives "margin-top" lösen.  

[hedon02]

Falls Du den Slider in die "main_content.html" eingebunden hast, mach mal folgendes:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{$MODULE_error}</br>
<h1 style="border: none;">{$title}</h1>
<div class="my_main_content">
  {$text}
  <div id="slider" class="nivoSlider">
           <img src="{$tpl_path}img/slider1.jpg" alt="Umzug" />
           <img src="{$tpl_path}img/slider2.jpg" alt="Umzugskartons" />
           <img src="{$tpl_path}img/slider3.jpg" alt="Transporthilfen" />
           <img src="{$tpl_path}img/slider4.jpg" alt="Umzugsmaterial"  />
  </div>
</div>
{if $MODULE_new_products}
<div class="my_main_content">{$MODULE_new_products}</div>
{/if}
{if $MODULE_upcoming_products}
<div class="my_main_content">{$MODULE_upcoming_products}</div>
{/if}
 

und in der "stylesheet:css":

Code: CSS  [Auswählen]

.my_main_content {float:left; width:750px;}
 

und der Tabelle mit den "5 Gründen" vergibst du eine "width:350px;" oder so.
Normalerweise müsste die Darstellung dann stimmen.

Gruss

[shudder]

EEEEEEEndlich hab ich's... endlich hat es geklappt. Hat nur noch die Tabelle um die "Gründe" hat gestört. Hab ich jetzt einfach ohne Tabelle gemacht. Passt auch und ich sitzt in jedem Browser> IE 6 an der richtigen Stelle. Man Man Man. Danke dir!