|
|||
![]()
Hallo Zusammen
Habe auf einer Typo3 Seite das Superfish-Menu in horizontaler Variante (navbar) eingebaut. Die dazugehörigen CSS-Dateien habe ich in meine CSS-Datei integriert und soweit schon intensiv an das Layout der Website angepasst. Nun funktioniert alles Bestens bis auf eine Kleinigkeit: Wenn ich die Unternavigation mit Float:right erscheinen lasse und die dazugehörige <UL> auf 100% Breite setze wird das Float ignoriert. Mit width: auto geht es zwar, aber dafür deckt die Hoover-Navigation nicht immer Alles ab, da die Breite zum Teil zu gering ist. Ich hoffe ich habe mich nicht allzu unklar ausgedrückt!?! Wie löse ich diese "Kleinigkeit"? Anbei der CSS-Code Code:
/* SUPERFISH-Navigation */ .sf-menu { list-style: none; width: 100%; position: relative; } .sf-menu ul { position: absolute; top: -999em; float: right; width: 100%; } .sf-menu li ul { width: auto; /*IE6 soils itself without this*/ background-image: url(http://musikschule.ledair.ch/typo3/fileadmin/Bilder_Template/unternavigation.jpg); background-repeat: no-repeat; background-position: right 0; } .sf-menu li { float: left; position: static; height: 38px; border-left: 2px solid #676767; padding: 0px; } .sf-menu li.first { border-left: none; padding-left: 262px;} .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { right: 0; top: 40px; /* match top ul list item height */ z-index: 99; } .sf-menu a { display: block; padding: .35em .46em .2em; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ font-size: 22px; font-variant: small-caps; letter-spacing: 1px; color: #ccc; } .sf-menu li li a, .sf-menu li li a:visited { color: #676767; font-size: 21.5px; letter-spacing: -0.1px; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { color: #004090; } ul.sf-menu .current ul, ul.sf-menu ul li:hover ul, ul.sf-menu ul li.sfHover ul { right: 0; top: 40px; /* match top ul list item height */ } .sf-menu li.current > a, .sf-menu li li.current > a, .sf-menu li li:hover > a { color: #004090; } Startseite Musikschule Huttwil: home Das "Problem" sieht man am Besten wenn der Menüpunkt "Angebot" aktiv ist und man über "Aktuell" hoovert! Für einen CSS-Profi wohl kaum ein Problem... Für mich seit Wochen Eins! ![]() |
Sponsored Links |
|
|||
![]() Zitat:
Zitat:
Mach das linke Padding beim ersten li-Element der Subliste so groß, dass es auf jeden Fall ausreicht. Gib gleichzeitig einen negativen Margin in der gleichen Größe an. edit: Falsch, nicht für das erste li-Element angeben, sondern für das ul-Element (denn da ist der Hintergrund drin). Falls etwas übersteht wird es durch overflow:hidden weggeschnitten. BTW: Es heißt Hover. Hoover macht Staubsauger ....
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (06.09.2012 um 15:34 Uhr) Grund: Sorry, Fehler. |
Sponsored Links |
|
|||
![]()
@Fricca: Danke für die schnelle und hilfreiche Antwort! Das war genau die "Kleinigkeit" die ich einfach nicht gefunden habe! Nun funktioniert alles wie gewünscht!
Habe nur gerade bemerkt, dass im IE mal wieder etwas nicht ganz klappt... Habe wohl etwas zuviel aus der Original-CSS-Datei gelöscht. Werd ich bestimmt auch noch finden... @Etux Hey, schön Dich hier auch zu treffen! ![]() Dachte dieses Forum ist für CSS-Fragen bestimmt besser als in Typo3 nachzufragen... deshalb der Wechsel! Dachte eigentlich, dass alles wunderbar mit Deiner Hilfe funktioniert hat und war auch voll zufrieden. Bis leider Einer die Seite im IE getestet hat und die Navigation überhaupt nicht für gut befunden wurde. Da ich Dich nicht schon wieder belasten wollte habe ich das halbe Internet nach einer Lösung durchforstet und bin halt auf Superfish gestossen (soll ja auch für IE tauglich sein!). Den restlichen Code der Site habe ich übrigens versucht zu überarbeiten aber vermutlich passt Dir das auch wieder nicht! ![]() Gruss Dummchen |
|
|||
![]()
Wenn du mehrere Foren mit deinen Problemen beschäftigst, machst du dich schnell unbeliebt. Bitte lies dazu:
http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html Querverlinkung ist das mindeste. Niemand hat Lust und Zeit, bereits gesagtes zu wiederholen. Bitte informier dich unbedingt über den "Doctype Switch" und nimm die Browser aus dem Quirksmodus. Google hilft dabei. Sonst hat es überhaupt keinen Sinn, über Darstellungsfehler in einem IE (welchem?!) sprechen zu wollen. Insgesamt ist der Code ziemlich katastrophal. Die Zeiten, in denen man Tabellen fürs Layout missbraucht hat, sind lange(!) vorbei. Ich empfehle Little Boxes komplett durchzuarbeiten und dann neu zu beginnen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
![]() Zitat:
![]() Zitat:
Zitat:
![]() Zitat:
![]() |
|
||||
![]()
@Dummchen
Zitat:
![]() . |
|
|||
![]()
@Fricca: Ich habe nicht mehrere Foren mit dieser Frage beschäftigt. Ich hatte mit Etux in einem anderen Forum zu tun, aber dabei ging es eigentlich um die Funktion der Navigation und Typoscript. und die Querverlinkung hätte nicht mit meiner eigentlichen Frage zu tun gehabt!
Ich danke Euch Beiden für Eure Anmerkungen. Werde bestimmt mal wegen Doctype Switch und Quirksmodus nachlesen. Habe bis auf eine Kleinigkeit in der Navigation alles zum Laufen gebracht und werde den restlichen kleinen Fehler selber ausmerzen. Somit ist für mich dieses Problem gelöst. Kenne halt von "damals" das Erstellen einer Website mit Tabellen. Es ist mir klar, dass immer wieder viel Ändert und man alles Anders und Besser machen kann! Aber als Nicht-Profi habe ich auch einfach nicht die Zeit und den Anspruch alles Perfekt zu machen! Es funktioniert und nur weil es nicht mehr "In" ist muss nicht einfach alles falsch sein! |
![]() |
Stichwörter |
navbar, rechts, superfish |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 16:01 |
CSS Design soll sich dem Content anpassen | hujuzka | CSS | 7 | 10.06.2009 11:45 |
Doctype und CSS Problem | tech | CSS | 3 | 29.05.2009 20:16 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 11:39 |
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe | trequ | CSS | 3 | 05.09.2004 11:29 |