Autor |
Nachricht |
1two1
Threadersteller
Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht:
|
Verfasst Do 07.08.2008 15:35
Titel Problem mit CSS & JQuery |
|
|
Halli Hallo Alle miteinander!
Ich habe da eine kleines Problem wo ich gerade absoulut nicht durchsteige, undzwar möchte ich ein Menü mittels CSS & JQuery erstellen wo der Hintergrund beim Rollover durch einen Fade angezeigt wird, das klappt auch soweit, siehe Hier: http://temp.staystyle.de/test/test.html
Problem nun an der Sache, sobald ich im CSS code folgenden Befehl rauswerfe
Code: |
#navigation a * {
display:none;
} |
um die Texte anzuzeigen, landet der rollover UNTER dem menü .. siehe hier: http://temp.staystyle.de/test/test2.html
Weiss irgendwer von euch woran das liegen kann und wie man dieses Problem umgehen kann? Bin in CSS / Javascript nicht sooo der Oberking, und Google gibt mir auch keine Antworten
Über eure Hilfe würde ich mich freuen!
Danke im voraus!
1two1
Zuletzt bearbeitet von 1two1 am Do 07.08.2008 15:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
BeezyT
Dabei seit: 10.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 10.08.2008 21:55
Titel
|
|
|
das problem ist, dass die beiden spans für den text und den hintergrund einfach hintereinander stehen. da ist ja klar, dass sie hintereinander, bzw untereinander dargestellt werden.
gib doch einfach dem span mit dem text ne klasse, dann kannst dus im css auf die entsprechende breite, und position: absolute setzen. außerdem sollte es dann noch nach (nicht vor) dem hintergrund-span im quelltext erscheinen, das erreichst du dadurch, dass du prepend statt append im js nimmst.
damit sollte es dann alles funktionieren....
|
|
|
|
|
Anzeige
|
|
|
1two1
Threadersteller
Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht:
|
Verfasst Mo 11.08.2008 16:41
Titel
|
|
|
Hallo,
Danke für deine Antwort, nur irgendwie stehe ich gerade auf dem Schlauch
Ich habe dem Span nun folgene classe gegeben:
Code: |
span {
position:absolute;
height:28px;
width:100px;
}
|
Und das "append" durch "prepend" im js ersetzt, doch nun erscheint es genau andersrum .. der text landet unter dem menü. Siehe Hier
Außerdem sind die texte durch die breitenangabe im span verutscht.
Könntest du mir vlt. Code mäßig zeigen, wie du das meinst?! Wäre Super!
Danke und Gruß,
Thomas
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 11.08.2008 17:13
Titel
|
|
|
Code: | body {
font-family: arial;
font-size:11px;
}
#navigation {
height:28px;
width:835px;
list-style: none;
background: url(menue-bg.png);
background-repeat:no-repeat;
padding-left:40px;
}
#navigation li {
float:left;
text-align: center;
}
#navigation a span.hover {
position: absolute;
top: 0;
}
#navigation a,
#navigation a .hover {
padding:0px 20px 0px 20px;
line-height:28px;
text-decoration:none;
color:#ccc;
border-right:1px solid #343434;
outline: none;
display: block;
position: relative;
background: url(menue.png) 0 0 no-repeat;
}
/* individual navigation items */
#navigation a.home {
padding:0px;
background-position: 0 0;
width:100px;
height:28px;
}
#navigation .highlight a.home:hover,
#navigation a.home .hover {
padding:0px;
background-position: 0 -28px;
width:100px;
border-right:1px solid #5a5a5a;
height:28px;
}
|
|
|
|
|
|
1two1
Threadersteller
Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht:
|
Verfasst Mo 11.08.2008 17:54
Titel
|
|
|
Ah, das sieht doch schonmal gut aus! Danke @m .. nur warum wird der text nicht mehr beim rollover angezeigt?!
Gruß,
Thomas
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 11.08.2008 18:01
Titel
|
|
|
Code: | body {
font-family: arial;
font-size:11px;
}
#navigation {
height:28px;
width:835px;
list-style: none;
background: url(menue-bg.png);
background-repeat:no-repeat;
padding-left:40px;
}
#navigation li {
float:left;
text-align: center;
}
#navigation a span.hover {
position: absolute;
top: 0;
left:0
}
#navigation a span {
position: absolute;
top: 0;
left:0;
width: 100px;
}
#navigation a,
#navigation a .hover {
padding:0px 20px 0px 20px;
line-height:28px;
text-decoration:none;
color:#ccc;
border-right:1px solid #343434;
outline: none;
display: block;
position: relative;
background: url(menue.png) 0 0 no-repeat;
}
/* individual navigation items */
#navigation a.home {
padding:0px;
background-position: 0 0;
width:100px;
height:28px;
}
#navigation .highlight a.home:hover,
#navigation a.home .hover {
padding:0px;
background-position: 0 -28px;
width:100px;
border-right:1px solid #5a5a5a;
height:28px;
} |
so müßte es stimmen.
|
|
|
|
|
1two1
Threadersteller
Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht:
|
Verfasst Mo 11.08.2008 18:05
Titel
|
|
|
Wow, super, danke!
Da wäre ich selbst nie drauf gekommen Aber, nun hab ich wieder was dazu gelernt!
Gruß,
Thomas
|
|
|
|
|
|
|
|
Ähnliche Themen |
jQuery Problem
jquery FF und IE8 Problem
problem mit jquery und ie
jquery: Problem mit Safari
Problem mit Jquery und dem Ipad
Problem mit Scroll sticking - jquery
|
|