|
|||
CSS Menü zickt rum /IE6/IE7/FF
Hallo Leute,
ich habe zwar schon einige Webseiten erstellt aber das ist meine erste mit CSS/XHTML und gleichzeitig meine erste mit Typo3 was aber bei meinem Problem eher nebensächlich ist. Ich habe für meine Hauptnavigation ein horizontales Drop-Down Menü von CSSPLAY eingebunden und damit nun einige Probleme. Wenn das INHALT DIV leer ist, klappt die Anzeige und Auswahl der einzelnen SubLevel Items im IE7 und FF problemlos. Im IE6 werden keine SubLevel angezeigt ? Wenn ein Inhalt in das INHALT DIV kommt klappt es im FF immernoch problemlos aber im IE6 / IE7 können die SubLevel Items nicht mehr ausgewählt werden. Außerdem liegt das Menü im Hintergrund, sprich der Inhalt liegt über dem Menü - egal welchen z-index ich für das Menü vergebe. Kann da mal jemand einen Blick drauf werfen ? Die ganze Seite soll bis Ende Juli fertig sein und ich steck schon 3 Tage bei dem Menü fest TestUrl: Svoboda Bueromoebel: Home LAYOUT-CSS Code:
* { margin: 0; padding: 0; } html, body { overflow-x: hidden; overflow-y: auto; } #gesamt { background-color: #ccc; color: #000; line-height: 1.5em; text-align: left; width: 100%; height: 100%; min-width: 700px; margin: 0 auto; font: 400 1em arial, sans-serif; font-size: 10px; } p { } #lang { padding: 3em 0 0.5em 0; float: left; width: 30%; background-color: #666666; font-size: 10px; } #lang ul { margin: 0; padding: 0 0 0 1.2em; text-align: left; } #lang ul li { list-style: none; display: inline; text-transform: uppercase; font: 400 1em arial, sans-serif; } #lang ul li a { float: left; padding-right: 0em; text-transform: uppercase; font: 400 1em arial, sans-serif; letter-spacing: 0.1em; line-height: 1em !important; line-height: 1em; color: #000000; } #lang ul li .offline { float: left; padding-right: 0em; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1em !important; line-height: 1em; color: #666666; } #cross1 { padding: 3em 0 0.5em 0; float: left; width: 70%; background-color: #666666; text-align: right; font-size: 10px; } #cross1 ul { margin: 0; padding: 0 1.5em 0 0; float: right; } #cross1 ul li { list-style: none; display: inline; } #cross1 ul li a { float: left; padding-right: 0em; text-transform: uppercase; font: 400 1em arial, sans-serif; letter-spacing: 0.1em; line-height: 1em !important; line-height: 1em; color: #000000; } /* CONTENT TEMPLATE 01 */ #logo { float: left; width: 20%; min-width: 200px; height: 90px; background-color: #000; } #logo img { padding: 45px 0 0 1.5em; } #navi { float: left; position: relative; height: 90px; width: 80%; background-color: #000; } #foto { clear: both; float: left; width: 35%; position: relative; height: 400px; min-height: 350px; text-align: right; } #foto img { border: 0; position: absolute; bottom: 1em; } #text { float: left; height: 400px; width: 54%; min-height: 350px; position: relative; } #scroll { float: left; width: 11%; height: 400px; min-height: 350px; position: relative; text-align: right; overflow: auto; padding: 0em 0 0 0; } #scroll img { margin: 5px; } /* CONTENT TEMPLATE 01 - END */ #spacer { padding: 2em 0 0 0; clear: both; width: 100%; } #katalog { padding: 0; color: #fff; width: 100%; height: 40px; background-color: #000; } #search { width: 100%; height: 50px; background-color: #000; } NAVI-CSS Code:
#pmenu { position: absolute; top: 73px; display: block; margin: 0; padding: 0; z-index: 900; font-size: 10px; background-color: #000; } /* remove all the bullets, borders and padding from the default list styling */ #pmenu ul { float: right; margin:0; padding: 0; list-style-type: none; } #pmenu ul ul { width: 130px; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ #pmenu li { padding: 0; margin: 0; float: left; width: 130px; position: relative; } /* style the links for the top level */ #pmenu a, #pmenu a:visited { display:block; text-decoration:none; font: 400 1em arial, sans-serif; letter-spacing: 0.1em; color:#fff; width:125px; height:17px; border-left: #ffffff 1px solid; padding-left:7px; line-height:1.2em; } /* a hack so that IE5.5 faulty box model is corrected */ * html #pmenu a, * html #pmenu a:visited { width:130px; w\idth:95px; } /* style the second level background */ #pmenu ul ul a.drop, #pmenu ul ul a.drop:visited { background:#fff url(../../graphics/drop.gif) bottom right no-repeat; } /* style the second level hover */ #pmenu ul ul a.drop:hover{ background:#666666 url(../../graphics/drop.gif) bottom right no-repeat; } #pmenu ul ul :hover > a.drop { background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat; } /* style the third level background */ #pmenu ul ul ul a, #pmenu ul ul ul a:visited { background:#e2dfa8; } /* style the third level hover */ #pmenu ul ul ul a:hover { background:#b2ab9b; } /* hide the sub levels and give them a positon absolute so that they take up no room */ #pmenu ul ul { visibility:hidden; position:absolute; height:0; top:17px; left:0; width:150px; } /* another hack for IE5.5 */ * html #pmenu ul ul { top:17px; t\op:17px; } /* position the third level flyout menu */ #pmenu ul ul ul{ left:165px; top:0; width:150px; } /* position the third level flyout menu for a left flyout */ #pmenu ul ul ul.left { left:-165px; } /* style the table so that it takes no ppart in the layout - required for IE to work */ #pmenu table {position:absolute; top:0; left:0;} /* style the second level links */ #pmenu ul ul a, #pmenu ul ul a:visited { background:#666; color:#000; font: 400 1em arial, sans-serif; height:auto; line-height:1em; padding:5px 10px; width:145px /* yet another hack for IE5.5 */ } * html #pmenu ul ul a{ width:130px; w\idth:129px; } /* style the top level hover */ #pmenu a:hover, #pmenu ul ul a:hover{ color:#333333; } #pmenu :hover > a, #pmenu ul ul :hover > a { color:#fff; background:#333333; } /* make the second level visible when hover on first level list OR link */ #pmenu ul li:hover ul, #pmenu ul a:hover ul{ visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ #pmenu ul :hover ul ul{ visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ #pmenu ul :hover ul :hover ul{ visibility:visible; } #pmenu ul li a.dropact { background-color: #003a77; color: #ffffff; } #pmenu ul li:hover ul li a.dropact { background-color: #003a77; color: #ffffff; } TEMPLATE: Code:
<body> <!-- ###DOKUMENT### start template for typo3 --> <div id="gesamt"> <div id="lang"> ###LANG### </div> <div id="cross1"> <!-- ###CROSSNAVI1### --> <!-- ###CROSSNAVI1### --> </div> <div id="logo"> <!-- ###HOME### --> <!-- ###HOME### --> </div> <div id="navi"> <!-- ###MENU1### --> <!-- ###MENU1### --> </div> <div id="spacer"> </div> <div id="katalog"> ###KATALOG### </div> <div id="search"> ###SEARCH### </div> </div> <!-- /* Google Analytics, Seitenstatistiken /* --> ###GOOGLE### <!-- /* ENDE GOOGLE ANALYTICS /* --> <!-- ###DOKUMENT### end template for typo3 --> </body> </html> lG Roland |
Sponsored Links |
|
|||
Hallo auch,
Im Idealfall überprüft man das Original und seine Abwandlung auf Unterschiede bezüglich des CSS/HTML-Codes und der Umgebung in der das Menü eingebettet ist. Das sollte schonmal helfen. Ohne zusehr in die Tiefe zu gehen - habe heute keine Zeit - sehe ich einen Scrollbalken (FF) beim div gesamt Irgendeine overflow-Eigenschaft eingestellt? Bei vielen Menüs dieser Art, wenn ich mich recht erinnere, musste man den tiefer verschachtelten Elementen eine zusätzliche oder geänderte Eigenschaft mitgeben, damit der IE die auch angezeigt hat, sei es ein "nutzloser" background oder eine bisher noch nicht verwendete Eigenschaft Also: Wie heißt das Original genau? (Link?) Stu Nicholls sieht es übrigens sehr gerne, wenn man ihn erwähnt Wo soll übrigens der Inhalt rein? Bitte auffüllen, damit der Fehler nachvollzogen werden kann, so funktionierts erstmal im IE7 und FF 2.0.x Edit: Es tut natürlich im FF bei mir nicht - nur wenn ich den Scrollbalken betätige, der IE7 verhält sich wie erwartet. Sry, keine Zeit heute
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (06.07.2007 um 13:37 Uhr) |
Sponsored Links |
|
|||
Hallo Andi,
erstmal Danke für deine Antwort. Es tut schon mal gut zu wissen das man wahrgenommen wird Hier der Link von wo ich den Code für das Menü hergeholt habe: TYPO3.net - CSS Menü Mein Code ist der von Seite 2 (ArminB) - das Original von Stu ist Stu Nicholls | CSSplay | A css only dropdown menu Ich hab die Startseite jetzt mal mit Inhalt befüllt damit man das Problem sieht wenn Inhalt vorhanden ist und das Menü im Hintergrund liegt und man somit nicht auf die SubLevel Items zugreifen kann. Der Scrollbalken (vertikal) ist neu. Der war bislang nicht vorhanden zumindest bei meiner Seitenauflösung. Generell ist das overflow-x: hidden und overflow-y: auto. lG Roland |
|
|||
erledigt !
Hallo Leute,
das Problem hab ich selbst gelöst ! Aber hier ist schon das nächste: http://xhtmlforum.de/46787-3-spaltig...scrollbar.html Bitte um Hilfe ! lG Roland |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe bei CSS Menue gesucht | CSS_Beginner | CSS | 2 | 21.09.2009 18:03 |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
herunterfahrendes Menü mit CSS | Pablo | CSS | 1 | 27.12.2007 18:07 |
IE6 Problem mit CSS Menü | träumer | CSS | 2 | 15.01.2007 17:55 |
Menü mit CSS aber mit JS Animation? | xy2er | CSS | 6 | 20.03.2005 21:47 |