Ergebnis 1 bis 10 von 10

Thema: Suckerfish

  1. #1
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Standard 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.
    Geändert von newbie (24.07.2009 um 09:35 Uhr)

  2. #2
    Contao-Urgestein Avatar von FloB
    Registriert seit
    19.06.2009.
    Ort
    Sonnensystem
    Beiträge
    1.618

    Standard

    Seite mal in mod_navigation.tpl ein
    HTML-Code:
    <div class="clear"> </div>
    , am besten direkt vor oder nach dem unteren "#skipNavigation".
    So long,
    FloB since Nov. 2007 +706P +115P and counting

  3. #3
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Standard

    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 -->

  4. #4
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Standard

    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>
    Geändert von newbie (24.07.2009 um 09:35 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Standard

    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 .

  6. #6
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.756
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  7. #7
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Trauriges Gesicht

    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 ...?!

  8. #8
    Contao-Urgestein Avatar von FloB
    Registriert seit
    19.06.2009.
    Ort
    Sonnensystem
    Beiträge
    1.618

    Standard

    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.
    So long,
    FloB since Nov. 2007 +706P +115P and counting

  9. #9
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    42

    Standard

    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 -->

  10. #10
    Contao-Nutzer Avatar von wandski
    Registriert seit
    06.07.2009.
    Ort
    Insel Usedom
    Beiträge
    26

    Standard Suckerfish-Menu

    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;}
    Geändert von wandski (17.07.2009 um 02:32 Uhr) Grund: Code geändert

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Umrandungen bei suckerfish
    Von saromir im Forum Layout / Templates / Holy Grail
    Antworten: 10
    Letzter Beitrag: 24.11.2010, 13:30
  2. scrollbar im ie6 (suckerfish)
    Von Kralle im Forum Fertige Tutorials
    Antworten: 4
    Letzter Beitrag: 30.08.2010, 23:17
  3. Vertikales Suckerfish Men
    Von zhuh im Forum Layout / Templates / Holy Grail
    Antworten: 7
    Letzter Beitrag: 11.03.2010, 07:57
  4. Suckerfish Menü?
    Von pix im Forum Layout / Templates / Holy Grail
    Antworten: 9
    Letzter Beitrag: 24.02.2010, 13:23
  5. Suckerfish, IE6 und TYPOlight 2.7.6
    Von Carino im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 30.12.2009, 08:12

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •