zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS von Superfish anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.09.2012, 14:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2012
Beiträge: 3
Dummchen befindet sich auf einem aufstrebenden Ast
Frage CSS von Superfish anpassen

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;
}
Und zur Verständlichkeit der Link zur Website:
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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.09.2012, 15:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Dummchen Beitrag anzeigen
Wenn ich die Unternavigation mit Float:right erscheinen lasse und die dazugehörige <UL> auf 100% Breite setze wird das Float ignoriert.
Dieses Float spielt keine Rolle. Da das ul-Element absolut positioniert ist, ist float wirkungslos.

Zitat:
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.
So ist es.
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 ....

Geändert von fricca (06.09.2012 um 15:34 Uhr) Grund: Sorry, Fehler.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.09.2012, 15:47
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Mit der CSS für die Navigation, die ich Dir geschrieben hatte, lief doch alles bestens.
Du hattest bloß, trotz meiner wiederholten Warnungen, ein paar falsche Veränderungen gemacht.
Statt die CSS auszutauschen, hättest Du Dich lieber um den restlichen Code der Seite gekümmert.
Aber egal – ich mag eh nicht mehr.

Viel Erfolg!

P.S.: Dummchen, ich bin im TYPO3-Forum aufgewachsen, geboren bin ich aber in diesem hier

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #4 (permalink)  
Alt 06.09.2012, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2012
Beiträge: 3
Dummchen befindet sich auf einem aufstrebenden Ast
Standard

@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
Mit Zitat antworten
  #5 (permalink)  
Alt 06.09.2012, 16:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.09.2012, 16:29
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Dummchen Beitrag anzeigen
,,, Dachte dieses Forum ist für CSS-Fragen bestimmt besser als in Typo3 nachzufragen... deshalb der Wechsel!
Ist es auch. Der Wechsel von mir zu fricca ist so, als ob Du den Schüler mit der Lehrerin ersetzest hast.
Zitat:
Zitat von Dummchen Beitrag anzeigen
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.
Hatte ich Dir aber schon in diesem Beitrag geschrieben, dass ich die IEs erst mal nicht berücksichtige. Das wäre später gekommen.
Zitat:
Zitat von Dummchen Beitrag anzeigen
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!).
Wie schon mehrmals gesagt, helfen tue ich gern (wo ich kann ).
Zitat:
Zitat von Dummchen Beitrag anzeigen
Den restlichen Code der Site habe ich übrigens versucht zu überarbeiten aber vermutlich passt Dir das auch wieder nicht!
Recht hast Du.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 06.09.2012, 16:31
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

@Dummchen
Zitat:
Zitat von fricca Beitrag anzeigen
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.
Kommt Dir das bekannt vor?

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 06.09.2012, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2012
Beiträge: 3
Dummchen befindet sich auf einem aufstrebenden Ast
Standard

@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!
Mit Zitat antworten
Antwort

Stichwörter
navbar, rechts, superfish

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:31 Uhr.