Suckerfish

Hallo zusammen!
Ich plage mich nun schon seit ein paar Tagen mit dem Suckerfish Menü rum.
Es ist halt Wunsch und muss so umgesetzt werden ;-).
Ich habe eine Seitenstruktur angelegt, die auch ohne Stylesheets im Browser angezeigt wird wie es sein soll (Screenshot). Mit Stylesheets hängt TL alle Menüpunkte aneinander (Screenshot). Ich habe mich an dieses Tutorial gehalten (http://de.contaowiki.org/TutorialsSuckerfish). Auch die CSS Datei und das Modul dazu angelegt. Die CSS sieht wie folgt aus:

Code:

---

.submenu
{
    position:absolute;
    overflow:visible;
    z-index:999;

}

.submenu p
{
    margin:0px;
    padding:0px;
}

.submenu ul
{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

.submenu li
{
    width:160px; /* Breite eines Menüpunktes festlegen */
    position:relative; /* Position */
    float:left; /* links nebeneiander anordnen */
    background-color:#999999; /* eine Hintergrundfarbe */
    border-right:1px solid #ffffff; /* optischer Rahmen */
    border-bottom:1px solid #ffffff; /* optischer Rahmen */
    border-left:1px solid #ffffff; /* optischer Rahmen */
    line-height:35px; /* bestimmt die Höhe eines Menüeintrages */
}
.submenu li ul
{
    bottom:0px;
    left:-1px;
    right:0px;
    top:36px;
    position:absolute;
    display:none; /* Ausbleden der Untermenüs */
   
}


.submenu li ul ul
{
    left:161px;
        top:0px;
    position:absolute;
}

.submenu li:hover ul
{
    display:block;
}

.submenu ul li:hover ul ul
{
    display:none;
}

.submenu ul ul li:hover ul
{
    display:block;
}

---

Ich hoffe mir kann wer helfen.

Seite mal in mod_navigation.tpl ein

HTML-Code:

---

<div class="clear"> </div>

---

, am besten direkt vor oder nach dem unteren "#skipNavigation".

Dann würde meine mod_navigation.tpl so ausschauen:

PHP-Code:

---

<!-- indexer::stop -->
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
<div class="clear"> </div>
<?php echo $this->items; ?> 
<a name="<?php echo $this->skipId; ?>" id="<?php echo $this->skipId; ?>" class="invisible">&nbsp;</a>

<!-- indexer::continue -->

---

Habe in der fe_page.tpl die ID zum Menü geändert.
<div id="submenu">

Nun wird es untereinander angezeigt. Aber links am Rand und alle Menüpunkte (nichts zum klappen) -> (Screenshot)

Gebe ich in der fe_page.tpl noch ein <div id="menu"> an stehts wieder oben drin - nebeneinander.

Code:

---

<div id="menu">
<div id="submenu">
<?php echo $this->header; ?>
</div></div>

---

tja, schade, dass mir niemand helfen kann.
ich weiß das es schon oft diskutiert wurde und es viele anleitungen dazu gibt.
aber wenn man sich das schon alles durchgelesen und ausprobiert hat und es immer noch nicht funktioniert ist man frustriert :(.

Ein allgemeiner Tipp: Ein Link zu einer Website hilft immer wesentlich mehr, als wenn man nur den CSS-Code postet. Dann kann man den Effekt direkt sehen und z. B. mittels Firebug bestimmte Zusammenhänge erkennen, die aus einem isolierten Code-Stück gar nicht ersichtlich wären.

Hallo Nina,

ich habe es bis jetzt nur lokal mittels XAMPP auf dem Rechner.
Von daher kann ich leider keinen Link posten :(.
Und nu?!

Quellcode hier rein ...?!

Versuchs mal andersrum:

PHP-Code:

---

<!-- indexer::stop -->
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
<?php echo $this->items; ?> 
<div class="clear"> </div>
<a name="<?php echo $this->skipId; ?>" id="<?php echo $this->skipId; ?>" class="invisible">&nbsp;</a>

<!-- indexer::continue -->

---

Wichtig ist, dass in der fe_page.tpl im Header noch das $this->framework steht, denn das bindet die 'system/typolight.css' ein, die die Anweisungen für .clear enthält.

Meine fe_page.tpl

Code:

---

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="plugins/slimbox/css/suckerfish.css" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<?php if ($this->header): ?>

<br />

<?php //echo $this->header; ?>


<div id="header">
<div id="logo">&nbsp;</div>
        <h1></h1>
</div>
<!-- end #header -->
<!-- <div id="menu"> -->
<div id="submenu">

<?php echo $this->header; ?>

</div> <!-- </div> -->

<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

<?php if ($this->left): ?>


<?php endif; ?>
<?php if ($this->right): ?>

<?php echo $this->right; ?>
<?php endif; ?>


<?php if ($this->footer): ?>


<?php endif; ?>

<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
<?php echo $this->mootools; ?>

<?php if ($this->urchinId): ?>

<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>

<?php endif; ?>


<!-- end #menu -->
<div id="content">
        <div id="posts">
                <div class="post">

                        <div class="story">
                        <?php echo $this->main; ?>
                                </div>
                </div>
                <div class="post">
                        <h2 class="title"></h2>
                       
                </div>
        </div>
        <!-- end #posts -->
       
        <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #content -->
<div id="footer">
        <p id="legal"></a></p>
</div>
<!-- end #footer -->
</body>
</html>

---

mod_navigation.tpl

Code:

---

<!-- indexer::stop -->
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
<?php echo $this->items; ?>
<div class="clear"> </div>
<a name="<?php echo $this->skipId; ?>" id="<?php echo $this->skipId; ?>" class="invisible">&nbsp;</a>

<!-- indexer::continue -->

---

Hi, mit der Formatierung kann man halt viel Zeit verbringen. Ich habe das CSS an die neuen Classen von Typolight angepaßt. Im Template selber habe ich nichts verändert. Geht auch so. Das Menü funzt auch im Opera, Firefox, IE 7, IE 8 sowie Google Chrome. Den IE 6 habe ich ausgelassen, die Bedienung der Seite funktioniert aber trotzdem.

Zu sehen unter: http://www.exklusiv-usedom.de

Ich hoffe damit ist Dir geholfen. Grüße von der Insel Usedom

Hier der Code dazu:

Code:

---

.mod_navigation{width:auto;height:45px;left:0px;position:relative;overflow:visible;float:left;margin:5px 0px 0px 0px;border:0px;z-index: 999;}
.mod_navigation a{padding:0px 15px;font-weight:bold;text-decoration:none;color:#ffffff;}
.mod_navigation li:hover,.mod_navigation li.sfhover{background: url(tl_files/usedom-exklusiv/img/menu_hover.png) top left repeat-x;}
.mod_navigation li.active{margin:0px;padding:0px;font-weight:bold;color:#FFD700;cursor: pointer;}
.mod_navigation span.active{padding:0px 15px;}
.mod_navigation ul{margin:0px;padding:0px;list-style-type:none;}
.mod_navigation li{width:auto;position:relative;float:left;margin:0px;border-right:1px solid #6FA2D5;line-height:30px;}
.mod_navigation li ul{bottom:0px;left:0px;right:0px;top:30px;position:absolute;display:none;}
.mod_navigation li ul li{width:250px;background-color:#4682B4;border-bottom:1px solid #CCCCCC;}
.mod_navigation li ul ul{left:251px;top:0px;position:absolute;}
.mod_navigation li:hover ul{display:block;}
.mod_navigation ul li:hover ul ul{display:none;}
.mod_navigation ul ul li:hover ul{display:block;}

---