Zum Inhalt springen

Image Header Slideshow

Erstellt am 4. März 2009 · 2 Antworten · letzte Antwort am 5. März 2009

Tags: Frage

MUSIKMANN ·

Hallo Gemeinschaft,

ich habe ein Problem mit der Extension Image Header Slideshow. In meinem Header befindet sich mein Menü und bei dem ersten Bildwechsel verschwindet das Menü, da sich das neue geladene Header-Bild darüber legt.

Gibt es dafür eine Lösung oder bleibt mir nichts anderes übrig, als die Bilder "auszuschneiden" so dass das Menü nicht verdeckt wird?

Ich wollte das ganze mit dem ändern des Javascripts erreichen, bekomme das aber leider nicht hin...

Vielen Dank für Eure Hilfe.

Musik & Gruss
Gunnar

MUSIKMANN ·

Hier mal mein entsprechendes Template, vielleicht hilfts ja....

<body>
<!-- ###DOCUMENT_BODY### -->
<div id="main">
<div id="logo"><a href="http://www.musikmann.com" target="_self"><img src="fileadmin/template/images/logo.gif" border="0" alt="zur Startseite" /></a></div>
<div id="slogan1"><img src="fileadmin/template/images/slogan1.gif" border="0" alt="" /></div>
<div id="login">
<!-- ###login### begin -->
<form name="login" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="" style="text-align:center"><div align="left"><img src="fileadmin/template/images/label_login.gif" alt="" /></div></td>
<td width="82" style="text-align:center"><span class="text_mini">Benutzer:</span><br /><input name="" type="text" class="mini" style="width:70px;"></td>
<td width="82" style="text-align:center"><span class="text_mini">Passwort:</span><br /><input name="" type="password" class="mini" style="width:70px;"></td>
<td width="30" style="text-align:left; padding-top:10px;"><input name="login" type="image" src="fileadmin/template/images/button_ok.gif" /></td>
</tr>
</table>
</form>
<!-- ###login### end -->
</div>
<div id="breadcrumb">
<!-- ###breadcrumb### begin -->
Musikmann.com &raquo; Seite 1
<!-- ###breadcrumb### end --></div>
<div id="menue">
<!-- ###menue### begin -->
<!-- ###menue### end -->
<a href="index.php" class="link"><img src="fileadmin/template/images/label_startseite.gif" border="0" alt="" /></a>
<a href="index.php?id=12" class="link"><img src="fileadmin/template/images/label_ueber_uns.gif" border="0" alt="" /></a>
<a href="index.php?id=13" class="link"><img src="fileadmin/template/images/label_anmeldung.gif" border="0" alt="" /></a>
<a href="index.php?id=14" class="link"><img src="fileadmin/template/images/label_kontakt.gif" border="0" alt="" /></a>
<a href="index.php?id=55" class="link"><img src="fileadmin/template/images/label_forum.gif" border="0" alt="" /></a>
<a href="index.php?id=16" class="link"><img src="fileadmin/template/images/label_impressum.gif" border="0" alt="" /></a>
</div>
</div>
<div id="header">
    <div id="fl_header_slide_slideshow" class="slideshow" ><img src="uploads/tx_flheaderslide/tontechnik.gif" width="766" height="288" alt="image slideshow" title="" /></div>
  </div> 

<div id="middle">
<div style="float: left;">
<div id="news">
<img src="fileadmin/template/images/box_left_top.gif" alt="" />
<div class="text_box">
<!-- ###news### begin -->
test
<!-- ###news### end -->
</div>
<img src="fileadmin/template/images/box_left_bottom.gif" alt="" />
</div>
<div id="submenue">
<img src="fileadmin/template/images/box_left_top.gif" alt="" />
<div class="text_box">
<!-- ###submenue### begin -->
<a href="#">asdasda</a>
<a href="#">asdasda</a>
<!-- ###submenue### end -->
</div>
<img src="fileadmin/template/images/box_left_bottom.gif" alt="" />
</div>
</div>
<div style="float: right;">
<div id="content">
<img src="fileadmin/template/images/box_content_top.gif" alt="" />
<div class="text_box">
<!-- ###content### begin -->
<!-- ###content### end -->
</div>
<img src="fileadmin/template/images/box_content_bottom.gif" alt="" />
</div>
</div>
<span class="clear"><!-- spacer --></span>
</div>
<div id="bottom">
<!-- ###bottom### begin -->
Copyright &copy; MUSIKMANN, 2007. All Rights Reserved
<!-- ###bottom### end -->
</div>
</div>
<!-- ###DOCUMENT_BODY### -->
</body>

Die Image Header Slideshow wurde in Zeile 35 - 37 eingefügt. Ich denke, dass dort irgendwo die Lösung meines Problems liegt.

Vielen Dank für Denkanstöße.

Musik & Gruss
Gunnar

MUSIKMANN ·

Soweit so gut, ich habe nachfolgende Lösung des Problems gefunden: style="z-index: 1000;" Hiermit bekomme ich die Menüpunkte über die Headergrafiken "gelegt".

Nun mein kompletter Template-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="icon/icon.ico">

<title>Template 1</title>
</head>

<body>
<!-- ###DOCUMENT_BODY### -->
<div id="main">
<div id="logo" style="z-index: 1000;"><a href="http://www.musikmann.com" target="_self"><img src="fileadmin/template/images/logo.gif" border="0" alt="zur Startseite" /></a></div>
<div id="slogan1" style="z-index: 1000;"><img src="fileadmin/template/images/slogan1.gif" border="0" alt="" /></div>
<div id="login" style="z-index: 1000;">
<!-- ###login### begin -->
<form name="login" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="" style="text-align:center"><div align="left"><img src="fileadmin/template/images/label_login.gif" alt="" /></div></td>
<td width="82" style="text-align:center"><span class="text_mini">Benutzer:</span><br /><input name="" type="text" class="mini" style="width:70px;"></td>
<td width="82" style="text-align:center"><span class="text_mini">Passwort:</span><br /><input name="" type="password" class="mini" style="width:70px;"></td>
<td width="30" style="text-align:left; padding-top:10px;"><input name="login" type="image" src="fileadmin/template/images/button_ok.gif" /></td>
</tr>
</table>
</form>
<!-- ###login### end -->
</div>
<div id="breadcrumb" style="z-index: 1000;">
<!-- ###breadcrumb### begin -->
Musikmann.com &raquo; Seite 1
<!-- ###breadcrumb### end --></div>
<div id="menue" style="z-index: 1000;">
<!-- ###menue### begin -->
<!-- ###menue### end -->
<a href="index.php" class="link"><img src="fileadmin/template/images/label_startseite.gif" border="0" alt="" /></a>
<a href="index.php?id=12" class="link"><img src="fileadmin/template/images/label_ueber_uns.gif" border="0" alt="" /></a>
<a href="index.php?id=13" class="link"><img src="fileadmin/template/images/label_anmeldung.gif" border="0" alt="" /></a>
<a href="index.php?id=14" class="link"><img src="fileadmin/template/images/label_kontakt.gif" border="0" alt="" /></a>
<a href="index.php?id=55" class="link"><img src="fileadmin/template/images/label_forum.gif" border="0" alt="" /></a>
<a href="index.php?id=16" class="link"><img src="fileadmin/template/images/label_impressum.gif" border="0" alt="" /></a>
</div>
</div>
<div id="header">
    <div id="fl_header_slide_slideshow" class="slideshow" ><img src="uploads/tx_flheaderslide/tontechnik.gif" align="center" width="766" height="288" alt="image slideshow" title="" /></div>
  </div> 

<div id="middle">
<div style="float: left;">
<div id="news">
<img src="fileadmin/template/images/box_left_top.gif" alt="" />
<div class="text_box">
<!-- ###news### begin -->
test
<!-- ###news### end -->
</div>
<img src="fileadmin/template/images/box_left_bottom.gif" alt="" />
</div>
<div id="submenue">
<img src="fileadmin/template/images/box_left_top.gif" alt="" />
<div class="text_box">
<!-- ###submenue### begin -->
<a href="#">asdasda</a>
<a href="#">asdasda</a>
<!-- ###submenue### end -->
</div>
<img src="fileadmin/template/images/box_left_bottom.gif" alt="" />
</div>
</div>
<div style="float: right;">
<div id="content">
<img src="fileadmin/template/images/box_content_top.gif" alt="" />
<div class="text_box">
<!-- ###content### begin -->
<!-- ###content### end -->
</div>
<img src="fileadmin/template/images/box_content_bottom.gif" alt="" />
</div>
</div>
<span class="clear"><!-- spacer --></span>
</div>
<div id="bottom">
<!-- ###bottom### begin -->
Copyright &copy; MUSIKMANN, 2007. All Rights Reserved
<!-- ###bottom### end -->
</div>
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>

Soweit dieses Problem gelöst.

Nun aber eine andere Frage / Problem: Im IE wird die Seite mittig angezeigt, so wie ich es gerne haben möchte. Beim FF hingegen wird ein Teil des Header-Menüs mittig (zentriert) angezeigt und der Rest der Webseite (also Header und Body) links angezeigt. Wie bekomme ich eine entsprechend einheitliche Ausrichtung der Webseite hin?

Vielen Dank für Denkanstöße.

Musik & Gruss
Gunnar