Horizontales Menü durch Submenü verschoben [Gelöst]

  • 0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    05. 07. 2011, 09:02

    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?

    1. temp.menu = HMENU
    2. temp.menu {
    3. 1 = TMENU
    4. 1.wrap = <ul class="nav"> | </ul>
    5. 1.NO.wrapItemAndSub = <li> | </li>
    6. 1.NO.allWrap =  | | |  |*| | |  |*| | | 
    7. 1.ACT.allWrap =  | | |  |*| | |  |*| | | 
    8. 1.ACT.linkWrap = <span class="act">|</span>
    9. 1.NO.ATagBeforeWrap = class = "l1-no"
    10. 1.ACT = 1
    11. 1.ACT.wrapItemAndSub = <li> | </li>
    12. 1.ACT.ATagParams = class = "l1-act"
    13. 2 < .1
    14. 2.wrap = <ul>|</ul>
    15. }

    1. <div id="navigation">
    2. <!--###MENU###-->
    3. <ul class="nav">
    4. <li><a href="#" class="l1-act">Link1</a></li>
    5. <li><a href="#" class="l1-no">Link2</a>
    6. <!--###UNTERMENU###-->
    7. <ul id="unav">
    8. <li><a href="#" class="l1-no">Link2.1</a></li>
    9. <li><a href="#" class="l1-no">Link2.2</a></li>
    10. </ul>
    11. <!--###UNTERMENU###-->
    12. </li>
    13. <li><a href="#" class="l1-no">Link3</a></li>
    14.  
    15. </ul>
    16. <!--###MENU###-->
    17. </div>

    Anhänge (1)
    Unbenannt.JPG image/jpeg 0,00 B 200 heruntergeladen

  • 1
  • oliver.christ oliver.ch...
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    21. 07. 2011, 18:37

    Interessant wäre hier das gerenderte HTML und das dazugehörige CSS. Ich würde versuchen der Sache mit Firebug beizukommen.

  • 0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    02. 09. 2011, 11:44

    Ü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

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2.  
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4.  
    5.  
    6. <title> Fedder Reisen - Gro&szlig;enwiehe
    7. </title>
    8.  
    9. <style type="text/css">
    10. @import url(std.css);
    11. </style>
    12.  
    13. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    14. </head>
    15.  
    16. <!-- ###DOCUMENT_BODY### begin -->
    17. <div id="kopf">
    18. <!--###INSIDE_KOPF###-->
    19. <img src="bilder/logo_oben.jpg" alt="Logo Fedder Reisen" />
    20. <!--###INSIDE_KOPF###-->
    21. </div>
    22.  
    23. <div id="side">
    24. <!--###CONTENT###-->
    25.  
    26. <div id="right">
    27.  
    28. <img style="margin-left:2px;margin-top:30px;" src="bilder/aoklogo.png" alt="Logo AOK" />
    29.  
    30. <!--###NAVI###-->
    31. <ul class="navi-right">
    32. <li><a href="#" class="l1-act">Link5</a></li>
    33. <li><a href="#" class="l1-no">Link6</a>
    34.  
    35. <!--###UNTERNAVI###-->
    36. <ul class="untermenu">
    37. <li><a href="#" class="l1-no">Link6</a></li>
    38. <li><a href="#" class="l1-no">Link6</a></li>
    39. </ul>
    40. <!--###UNTERNAVI###-->
    41.  
    42. </li>
    43. </ul>
    44. <!--###NAVI###-->
    45.  
    46. <p style="margin-top:25px;">
    47. Fedder Reisen<br>
    48. Schulsteig 6<br>
    49. 24969 Gro&szlig;enwiehe<br>
    50. Tel.: 04604-9020-0<br>
    51. Fax: 04604-9020-22<br>
    52. <a href="mailto:reisen@fedder-reisen.de" class="link" >reisen@fedder-reisen.de</a>
    53.  
    54.  
    55. <p style="margin-top:25px;">Laden Sie sich unseren neuen Klassenfahrtenkatalog als PDF Datei herunter ...<br><br>
    56.  
    57. <a href="bilder/downloads/Klassenfahrten_2011.pdf" class="link" target="_blank"><img src="bilder/downloads/Klassenfahrten2011.jpg" /></a>
    58. </p>
    59.  
    60. <!--###RECHTS###-->
    61. <!--###RECHTS###-->
    62. </div>
    63.  
    64. <!-- navigation -->
    65. <div id="left">
    66.  
    67. <!--###MENU###-->
    68. <ul class="navi">
    69. <li><a href="#" class="l1-act">Link1</a></li>
    70. <li><a href="#" class="l1-no">Link2</a>
    71.  
    72. <!--###UNTERMENU###-->
    73. <ul class="untermenu">
    74. <li><a href="#" class="l1-no">Link2</a></li>
    75. <li><a href="#" class="l1-no">Link2</a></li>
    76. </ul>
    77. <!--###UNTERMENU###-->
    78.  
    79. </li>
    80. </ul>
    81. <!--###MENU###-->
    82.  
    83. </div>
    84. <!-- navigation -->
    85.  
    86. <div id="inhalt">
    87. <!--###TEXT###-->
    88.  
    89. <!--###TEXT###-->
    90. </div>
    91.  
    92. <div class="clear"></div>
    93.  
    94. <!--###CONTENT###-->
    95. </div>
    96.  
    97. <!-- ###DOCUMENT_BODY### end -->
    98. </body>
    99.  
    100. </html>

    1. * {margin:0; padding:0;}
    2.  
    3. body
    4. {
    5. margin:0;
    6. background-color:#F0F1F3;
    7. font-family:Arial, Verdana, Helvetica;
    8. font-size:13px;
    9. color:#003399;
    10. margin-left:20px;
    11. width:970px;
    12. }
    13.  
    14. #side {
    15.  
    16. background-image:url(bilder/bg_gross2.gif);
    17. background-color:#FFF;
    18. display: block;
    19. overflow: visible;
    20. position: relative;
    21. margin-top:-4px;
    22. }
    23.  
    24. #left {
    25. display: inline;
    26. float: left;
    27. margin-left: 0px;
    28. position: relative;
    29. width: 200px;
    30. border-top:2px solid #003399;
    31. }
    32.  
    33. #right {
    34. display: inline;
    35. float: right;
    36. margin-right: 0px;
    37. position: relative;
    38. width: 202px;
    39. border-top:2px solid #003399;
    40. padding-top:0px;
    41. }
    42.  
    43. #inhalt {
    44. width: 555px;
    45. margin-left:200px;
    46. padding:7px;
    47. }
    48.  
    49. .clear {
    50. clear: both;
    51. height: 1px;
    52. overflow: hidden;
    53. }
    54.  
    55. p
    56. {
    57. padding:7px;
    58. }
    59.  
    60. .tx-powermail-pi1_confirmation p
    61. {
    62. padding-left:3px;
    63. }
    64.  
    65.  
    66.  
    67. /*--------------------------------------------------------
    68. Link
    69. */
    70.  
    71. #right li
    72. {
    73. width:198px;
    74. }
    75.  
    76. #right ul
    77. {
    78. margin-top:5px;
    79. }
    80.  
    81. /*--------------------------------------------------------
    82. Link
    83. */
    84.  
    85. #right a.link
    86. {
    87. margin-left:-5px;
    88. margin-top:-2px;
    89. border-bottom: dotted 1px #003399;
    90. width:150px;
    91. }
    92.  
    93. #right a.link:hover
    94. {
    95. background-color:transparent;
    96. color:#003399;
    97. }
    98.  
    99. /*--------------------------------------------------------
    100. text
    101. */
    102.  
    103. .bodytext
    104. {
    105. /*margin-top:25px;*/
    106. padding-left:10px;
    107. padding-right:10px;
    108. }
    109.  
    110. h1, h3
    111. {
    112. margin-top:25px;
    113. margin-bottom:25px;
    114. padding-left:12px;
    115. padding-right:5px;
    116. font-size:15px;
    117. }
    118.  
    119.  
    120. input, textarea
    121. {
    122. background-color:#f0f1f3;
    123. }
    124.  
    125.  
    126. /*--------------------------------------------------------
    127. Powermail
    128. */
    129. fieldset.tx-powermail-pi1_fieldset legend
    130. {
    131. float:left;
    132. color:#003399;
    133. margin-bottom:15px;
    134. Font-size:15px;
    135. }
    136.  
    137. .tx-veguestbook-pi1
    138. {
    139. margin-left:15px;
    140. }
    141.  
    142. div.tx-powermail-pi1
    143. {
    144. width:500px;
    145. }
    146.  
    147. #c7, #C4
    148. {
    149. padding-left:9px;
    150. }
    151.  
    152. .tx_powermail_pi1_formconfirmation_back
    153. {
    154. margin-top:5px;
    155. margin-bottom:5px;
    156. margin-bottom:5px;
    157.  
    158. }
    159.  
    160. 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
    161. {
    162. width:300px;
    163. }
    164.  
    165. /*--------------------------------------------------------
    166. Gastebuch
    167. */
    168.  
    169. .tx-veguestbook-pi1 .tx-guestbook-field input.tx-guestbook-form-inputfield-med
    170. {
    171. width:20em;
    172. }
    173.  
    174. .tx-veguestbook-pi1 .tx-guestbook-field textarea.tx-guestbook-form-textarea
    175. {
    176. width:25em;
    177. }
    178.  
    179. .tx-guestbook-submit
    180. {
    181. margin-left:125px;
    182. }
    183.  
    184.  
    185. .internal-link
    186. {
    187. width:500px;
    188. }

    Es wirkt als wenn etwas im weg ist, aber ich weiß nicht warum....

  • oliver.christ oliver.ch...
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2011, 11:16

    Hm, in Deinen Styles kann ich gar keine Selectoren für das Menü finden. Hast Du da ev. noch was vergessen?

    Gruß Olli

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    03. 09. 2011, 13:15

    [quote="oliver.christ"]
    Hm, in Deinen Styles kann ich gar keine Selectoren für das Menü finden. Hast Du da ev. noch was vergessen?

    Gruß Olli
    [/quote]
    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>
    }

  • matrox matrox
    R2-D2
    0 x
    103 Beiträge
    1 Hilfreiche Beiträge
    03. 09. 2011, 17:26

    Anbei ein Kurztutorial wie auf: http://www.ipl-kosmetikstudio.de/

    1. Erweiterung "int_ypslideoutmenu" installieren von typo3.org

    2. In das Setup:

    1. ### Slide-Menü
    2. menue = HMENU
    3. menue {
    4. special = directory
    5.  
    6. ### ID Anpassen (Seitenbaum - Start):
    7. special.value = 35
    8.  
    9. stdWrap.dataWrap = <ul>|</ul>
    10.  
    11. korek_css = padding-bottom:20px;margin-left:1px;text-align:left
    12. aniLen = 800
    13. hideDelay = 5
    14. minCPUResolution = 10
    15. kore_so_x = -2
    16. div_id_layer = yymenu
    17.  
    18. 1 = tx_menu_ypslideoutmenu
    19. 1 {
    20.  
    21. expAll=1
    22. NO = 1
    23. NO {
    24. linkWrap = |
    25. ATagBeforeWrap = 1
    26. allWrap = <li>|</li>
    27. ATagTitle.field = title
    28. }
    29.  
    30. ACT = 1
    31. ACT < .NO
    32. ACT.allWrap = <li class="current">|</li>
    33.  
    34. }
    35. 2 = tx_menu_ypslideoutmenu
    36. 2 {
    37. moveTo = down
    38. height = 22
    39. width = 177
    40. expAll=1
    41. NO {
    42. ATagTitle.field = title
    43. }
    44. }
    45. 3 < .2
    46. 3.moveTo = right
    47. 3.width= 177
    48. }

    [b]CSS:[/b]

    1. #MENUE_OBEN {
    2. font-size: 12px;
    3. text-align: left;
    4. position: relative;
    5. width: auto;
    6. height: 40px;
    7. z-index: 200;
    8. float: left;
    9. margin: 0;
    10. padding: 0;
    11. display: block; }
    12.  
    13. #navy {
    14. float: left;
    15. height: auto;
    16. margin: 0;
    17. padding: 0;
    18. border-width: 0;
    19.  
    20. }
    21. #navy a {
    22. color: #000000;
    23. text-decoration: none;
    24. position: relative;
    25. float: left;
    26. margin: 0;
    27. padding: 12px 18px 10px;
    28. display: block; }
    29. #navy ul {
    30. font-size: 14px;
    31. text-decoration: none;
    32. position: relative;
    33. float: left;
    34. margin: 0;
    35. padding: 0;
    36. list-style: none; }
    37. #navy li {
    38. float: left;
    39. display: block;
    40. color:#fff;
    41. text-decoration:none;
    42. margin: 0;
    43. border-width: 0; }
    44. #navy ul li {
    45. text-decoration: none;
    46. color: #fff;
    47. font-size: 14px;
    48. font-weight: normal;
    49. float: left;
    50. margin: 0; }
    51. #navy ul li a:visited {
    52. color: #fff;
    53. font-size: 14px;
    54. font-weight: normal;
    55. text-decoration: none;
    56. display: block; }
    57. #navy ul li.current a {
    58. color:#CCCCCC;
    59. text-decoration: none; }
    60. #navy ul li a:hover {
    61. text-decoration: none;
    62. color: #EE7F00;
    63. font-weight: normal; }
    64.  
    65. #navy ul li a:focus {
    66. color: #EE7F00;
    67. font-weight: normal;
    68. text-decoration: none; }

    Und [b]vor Page/Seite im Setup [/b]einfügen:

    1. ### YP Slide-Menü PHP
    2. seite.includeLibs.ypMenu = typo3conf/ext/int_ypslideoutmenu/class.tx_menu_ypslideoutmenu.php

    Dort wo das Menü eingebunden werden soll im HTML:

    1. <!-- Start MENÜ horizontal -->
    2. <div id="MENUE_OBEN">
    3. <div id="navy">###menue###</div>
    4. </div>
    5. <!-- ENDE MENÜ horizontal -->

    Fertig ;-)

    Das Dropdown css kann unter "/typo3conf/ext/int_ypslideoutmenu/res/ypSlideOutMenus.css" angepasst werden.

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    03. 09. 2011, 19:06

    [quote="matrox"]
    Anbei ein Kurztutorial wie auf: http://www.ipl-kosmetikstudio.de/

    1. Erweiterung "int_ypslideoutmenu" installieren von typo3.org

    2. In das Setup:

    Fertig ;-)

    [/quote]

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

    [b]EDIT:[/b] 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 ;)

    .

  • 1