Hilfe..
Ich habe bei Typo3 eine horizontale Navigation aufgebaut, ist auch schön und gut, aber nun wollte ich ein Untermenü (Dropdown einfügen und das verschiebt das Hauptmenü anstatt sich darunter zu setzen.. ich sitze nun schon seit 2 Tagen und bin am googeln und machen und tun aber ich komme nicht drauf. Vielleicht könnt ihr mir helfen?
temp.menu = HMENU
temp.menu {
1 = TMENU
1.wrap = <ul class="nav"> | </ul>
1.NO.wrapItemAndSub = <li> | </li>
1.NO.allWrap = | | | |*| | | |*| | |
1.ACT.allWrap = | | | |*| | | |*| | |
1.ACT.linkWrap = <span class="act">|</span>
1.NO.ATagBeforeWrap = class = "l1-no"
1.ACT = 1
1.ACT.wrapItemAndSub = <li> | </li>
1.ACT.ATagParams = class = "l1-act"
2 < .1
2.wrap = <ul>|</ul>
}
<div id="navigation">
<!--###MENU###-->
<ul class="nav">
<li><a href="#" class="l1-act">Link1</a></li>
<li><a href="#" class="l1-no">Link2</a>
<!--###UNTERMENU###-->
<ul id="unav">
<li><a href="#" class="l1-no">Link2.1</a></li>
<li><a href="#" class="l1-no">Link2.2</a></li>
</ul>
<!--###UNTERMENU###-->
</li>
<li><a href="#" class="l1-no">Link3</a></li>
</ul>
<!--###MENU###-->
</div>
Interessant wäre hier das gerenderte HTML und das dazugehörige CSS. Ich würde versuchen der Sache mit Firebug beizukommen.
Über firebug habe ich es natürlich als erstes versucht und ich sehe auch den abstand, bekomme ihn aber nicht weg.
Hier einmal HTML und CSS
<!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>
<title> Fedder Reisen - Großenwiehe
</title>
<style type="text/css">
@import url(std.css);
</style>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- ###DOCUMENT_BODY### begin -->
<div id="kopf">
<!--###INSIDE_KOPF###-->
<img src="bilder/logo_oben.jpg" alt="Logo Fedder Reisen" />
<!--###INSIDE_KOPF###-->
</div>
<div id="side">
<!--###CONTENT###-->
<div id="right">
<img style="margin-left:2px;margin-top:30px;" src="bilder/aoklogo.png" alt="Logo AOK" />
<!--###NAVI###-->
<ul class="navi-right">
<li><a href="#" class="l1-act">Link5</a></li>
<li><a href="#" class="l1-no">Link6</a>
<!--###UNTERNAVI###-->
<ul class="untermenu">
<li><a href="#" class="l1-no">Link6</a></li>
<li><a href="#" class="l1-no">Link6</a></li>
</ul>
<!--###UNTERNAVI###-->
</li>
</ul>
<!--###NAVI###-->
<p style="margin-top:25px;">
Fedder Reisen<br>
Schulsteig 6<br>
24969 Großenwiehe<br>
Tel.: 04604-9020-0<br>
Fax: 04604-9020-22<br>
<a href="mailto:reisen@fedder-reisen.de" class="link" >reisen@fedder-reisen.de</a>
<p style="margin-top:25px;">Laden Sie sich unseren neuen Klassenfahrtenkatalog als PDF Datei herunter ...<br><br>
<a href="bilder/downloads/Klassenfahrten_2011.pdf" class="link" target="_blank"><img src="bilder/downloads/Klassenfahrten2011.jpg" /></a>
</p>
<!--###RECHTS###-->
<!--###RECHTS###-->
</div>
<!-- navigation -->
<div id="left">
<!--###MENU###-->
<ul class="navi">
<li><a href="#" class="l1-act">Link1</a></li>
<li><a href="#" class="l1-no">Link2</a>
<!--###UNTERMENU###-->
<ul class="untermenu">
<li><a href="#" class="l1-no">Link2</a></li>
<li><a href="#" class="l1-no">Link2</a></li>
</ul>
<!--###UNTERMENU###-->
</li>
</ul>
<!--###MENU###-->
</div>
<!-- navigation -->
<div id="inhalt">
<!--###TEXT###-->
<!--###TEXT###-->
</div>
<div class="clear"></div>
<!--###CONTENT###-->
</div>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>
* {margin:0; padding:0;}
body
{
margin:0;
background-color:#F0F1F3;
font-family:Arial, Verdana, Helvetica;
font-size:13px;
color:#003399;
margin-left:20px;
width:970px;
}
#side {
background-image:url(bilder/bg_gross2.gif);
background-color:#FFF;
display: block;
overflow: visible;
position: relative;
margin-top:-4px;
}
#left {
display: inline;
float: left;
margin-left: 0px;
position: relative;
width: 200px;
border-top:2px solid #003399;
}
#right {
display: inline;
float: right;
margin-right: 0px;
position: relative;
width: 202px;
border-top:2px solid #003399;
padding-top:0px;
}
#inhalt {
width: 555px;
margin-left:200px;
padding:7px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
p
{
padding:7px;
}
.tx-powermail-pi1_confirmation p
{
padding-left:3px;
}
/*--------------------------------------------------------
Link
*/
#right li
{
width:198px;
}
#right ul
{
margin-top:5px;
}
/*--------------------------------------------------------
Link
*/
#right a.link
{
margin-left:-5px;
margin-top:-2px;
border-bottom: dotted 1px #003399;
width:150px;
}
#right a.link:hover
{
background-color:transparent;
color:#003399;
}
/*--------------------------------------------------------
text
*/
.bodytext
{
/*margin-top:25px;*/
padding-left:10px;
padding-right:10px;
}
h1, h3
{
margin-top:25px;
margin-bottom:25px;
padding-left:12px;
padding-right:5px;
font-size:15px;
}
input, textarea
{
background-color:#f0f1f3;
}
/*--------------------------------------------------------
Powermail
*/
fieldset.tx-powermail-pi1_fieldset legend
{
float:left;
color:#003399;
margin-bottom:15px;
Font-size:15px;
}
.tx-veguestbook-pi1
{
margin-left:15px;
}
div.tx-powermail-pi1
{
width:500px;
}
#c7, #C4
{
padding-left:9px;
}
.tx_powermail_pi1_formconfirmation_back
{
margin-top:5px;
margin-bottom:5px;
margin-bottom:5px;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_text, fieldset.tx-powermail-pi1_fieldset input.powermail_date, fieldset.tx-powermail-pi1_fieldset input.powermail_datetime, fieldset.tx-powermail-pi1_fieldset textarea, fieldset.tx-powermail-pi1_fieldset select, fieldset.tx-powermail-pi1_fieldset input.powermail_captcha
{
width:300px;
}
/*--------------------------------------------------------
Gastebuch
*/
.tx-veguestbook-pi1 .tx-guestbook-field input.tx-guestbook-form-inputfield-med
{
width:20em;
}
.tx-veguestbook-pi1 .tx-guestbook-field textarea.tx-guestbook-form-textarea
{
width:25em;
}
.tx-guestbook-submit
{
margin-left:125px;
}
.internal-link
{
width:500px;
}
Es wirkt als wenn etwas im weg ist, aber ich weiß nicht warum....
Hm, in Deinen Styles kann ich gar keine Selectoren für das Menü finden. Hast Du da ev. noch was vergessen?
Gruß Olli
oliver.christ schrieb
Hm, in Deinen Styles kann ich gar keine Selectoren für das Menü finden. Hast Du da ev. noch was vergessen?
Gruß Olli
Du hast es in Deinem letzten Beitrag schon richtig gesagt – interessant wäre der im Browser ausgegebenen Quellcode. Denn sofern eine verschachtelte Listennavigation angestrebt wird, ist schon der TS-Code falsch. Und das wurde man spätestens beim betrachten den generierten Quellcode feststellen.
temp.menu = HMENU
temp.menu {
1 = TMENU
1.wrap = <ul class="nav"> | </ul>
1.NO.wrapItemAndSub = <li> | </li>
1.NO.allWrap = | | | |*| | | |*| | |
1.ACT.allWrap = | | | |*| | | |*| | |
1.ACT.linkWrap = <span class="act">|</span>
1.NO.ATagBeforeWrap = class = "l1-no"
1.ACT = 1
1.ACT.wrapItemAndSub = <li> | </li>
1.ACT.ATagParams = class = "l1-act"
2 < .1
2.wrap = <ul>|</ul>
}
Anbei ein Kurztutorial wie auf: http://www.ipl-kosmetikstudio.de/
1. Erweiterung "int_ypslideoutmenu" installieren von typo3.org
2. In das Setup:
### Slide-Menü
menue = HMENU
menue {
special = directory
### ID Anpassen (Seitenbaum - Start):
special.value = 35
stdWrap.dataWrap = <ul>|</ul>
stdWrap.required = 1
korek_css = padding-bottom:20px;margin-left:1px;text-align:left
aniLen = 800
hideDelay = 5
minCPUResolution = 10
kore_so_x = -2
div_id_layer = yymenu
1 = tx_menu_ypslideoutmenu
1 {
expAll=1
NO = 1
NO {
linkWrap = |
ATagBeforeWrap = 1
allWrap = <li>|</li>
ATagTitle.field = title
}
ACT = 1
ACT < .NO
ACT.allWrap = <li class="current">|</li>
}
2 = tx_menu_ypslideoutmenu
2 {
moveTo = down
height = 22
width = 177
expAll=1
NO {
ATagTitle.field = title
}
}
3 < .2
3.moveTo = right
3.width= 177
}
CSS:
#MENUE_OBEN {
font-size: 12px;
text-align: left;
position: relative;
width: auto;
height: 40px;
z-index: 200;
float: left;
margin: 0;
padding: 0;
display: block; }
#navy {
float: left;
height: auto;
margin: 0;
padding: 0;
border-width: 0;
}
#navy a {
color: #000000;
text-decoration: none;
position: relative;
float: left;
margin: 0;
padding: 12px 18px 10px;
display: block; }
#navy ul {
font-size: 14px;
text-decoration: none;
position: relative;
float: left;
margin: 0;
padding: 0;
list-style: none; }
#navy li {
float: left;
display: block;
color:#fff;
text-decoration:none;
margin: 0;
border-width: 0; }
#navy ul li {
text-decoration: none;
color: #fff;
font-size: 14px;
font-weight: normal;
float: left;
margin: 0; }
#navy ul li a:visited {
color: #fff;
font-size: 14px;
font-weight: normal;
text-decoration: none;
display: block; }
#navy ul li.current a {
color:#CCCCCC;
text-decoration: none; }
#navy ul li a:hover {
text-decoration: none;
color: #EE7F00;
font-weight: normal; }
#navy ul li a:focus {
color: #EE7F00;
font-weight: normal;
text-decoration: none; }
Und vor Page/Seite im Setup einfügen:
### YP Slide-Menü PHP
seite.includeLibs.ypMenu = typo3conf/ext/int_ypslideoutmenu/class.tx_menu_ypslideoutmenu.php
Dort wo das Menü eingebunden werden soll im HTML:
<!-- Start MENÜ horizontal -->
<div id="MENUE_OBEN">
<div id="navy">###menue###</div>
</div>
<!-- ENDE MENÜ horizontal -->
Fertig ;-)
Das Dropdown css kann unter "/typo3conf/ext/int_ypslideoutmenu/res/ypSlideOutMenus.css" angepasst werden.
matrox schrieb
Anbei ein Kurztutorial wie auf: http://www.ipl-kosmetikstudio.de/
1. Erweiterung "int_ypslideoutmenu" installieren von typo3.org
2. In das Setup:
Fertig ;-)
Ja, sehr schönes Ein- und Ausscrollen. Und das ist enorm wichtig. Denn wenn interessieren schon aktuelle Standards, Zugänglichkeit, Nutzerfreundlichkeit und Semantik – zum Teufel damit. Und am besten, und passen dazu, ein Tabellen-Layout. Da kann nichts mehr schief gehen 😉
EDIT: Oh, ich muss mich entschuldigen. Die von Dir verlinkte Site ist doch auf Zugänglichkeit optimiert. Ich habe in der Eile
<div class="BITV">
übersehen. Wundert mich nur, dass man nicht gleich auch den restlichen Inhalt in einem
<div class="Google">
verpackt hat. Dann wäre sie auch für Suchmaschinen optimiert 😉
.