| Autor |
Nachricht |
FloKu
Threadersteller
Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht: 
|
Verfasst So 15.03.2009 23:24
Titel [HTML/CSS] Roll-Over-Menü funktioniert nur in Firefox |
  |
|
Hallo alle zusammen,
Ich probiere gerade mit hilfe von ein wenig fachliteratur ein bisschen mit CSS und Html rum, um irgendwann mal selber ein par kleine Projekte auf die Beine stellen zu können.
Nun hab ich mir ein "schönes" menü gebastelt mit roll-over effekt, aber irgendwie funktionierts nur mit firefox. im internet explorer passiert garnichts, da funktionieren nichtmal die links...
handelt sich um http://www.tsv-timmaspe.de/test/
code fürs menü ist:
| Code: | div#nav-1 {
margin:auto;
width:700px;
height:20px;
position:relative;
}
div#nav-1 ul {
list-style:none;
position:absolute;
}
div#nav-1 li {
float:left;
height:20px;
width:140px;
}
div#nav-1 li a {
display:block;
heigth:18px;
}
div#nav-1 li#aktuelles a {
background:url(images/button/but_akt_00.png);
}
div#nav-1 li#aktuelles a:focus, div#nav-1 li#aktuelles a:hover, div#nav-1 li#aktuelles a:active {
background:url(images/button/but_akt_01.png);
}
div#nav-1 li#verein a {
background:url(images/button/but_ver_00.png);
}
div#nav-1 li#verein a:focus, div#nav-1 li#verein a:hover, div#nav-1 li#verein a:active {
background:url(images/button/but_ver_01.png);
}
div#nav-1 li#sparten a {
background:url(images/button/but_spa_00.png);
}
div#nav-1 li#sparten a:focus, div#nav-1 li#sparten a:hover, div#nav-1 li#sparten a:active {
background:url(images/button/but_spa_01.png);
}
div#nav-1 li#kurse a {
background:url(images/button/but_kur_00.png);
}
div#nav-1 li#kurse a:focus, div#nav-1 li#kurse a:hover, div#nav-1 li#kurse a:active {
background:url(images/button/but_kur_01.png);
}
div#nav-1 li#kontakt a {
background:url(images/button/but_kon_00.png);
}
div#nav-1 li#kontakt a:focus, div#nav-1 li#kontakt a:hover, div#nav-1 li#kontakt a:active {
background:url(images/button/but_kon_01.png);
}
div#nav-1 li, div#nav-1 li a {
text-decoration:none;
text-indent: -999em; |
etwas viel aber es funktioniert halt so wie ich wollte.
fehlt da noch was, damit der ie es versteht?
freue mich auf info...
Gruß, Flo
|
|
| |
   |
 |
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 16.03.2009 10:50
Titel
|
|
|
Der IE hat ein Problem mit dem text-indent. Sobald ein Wert dafür definiert ist tut sich der IE schwer den eigentlichen Bereich zu rendern. Dies ist ein bekannter Bug. Umgehen kannst du das Problem indem du dem li a auch eine Breite gibst.
div#nav-1 li a {
display:block;
heigth:18px;
width:140px;
}
|
|
| |
|
|
|
Anzeige
|
|
|
Falk Wussow
Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht:
|
Verfasst Mo 16.03.2009 14:25
Titel
|
|
|
@FloKu: Da ist übrigens einmal der Schreibfehler "heigth" im CSS-Code. Das sollte gleich mit korrigiert werden.
http://jigsaw.w3.org/css-validator hat mich drauf gebracht.
Zuletzt bearbeitet von Falk Wussow am Mo 16.03.2009 14:26, insgesamt 1-mal bearbeitet
|
|
| |
|
|
FloKu
Threadersteller
Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht:
|
Verfasst Mo 16.03.2009 14:32
Titel
|
|
|
Oha, vielen dank schonmal.
werde das alle heute abend mal korrigieren wenn ich von der arbeit komme.
wenn ich glück habe, erklärt das auch den blitzer der in alten firefox versionen und beim ie zu sehen ist.
Hatte das menü ja mit .pngs gebastelt die genau 18px hoch waren, aber wenn ich das immer eingegeben habe, hat er da zwei pixel verschluckt. jetzt hab height auf 20 und bei firefox3 siehts alles normal aus, obwohl halt der blitzer da sein müsste. hat mich total verwirrt, mal sehn obs davon weggeht 
EDIT: Juhu! zumindest hier auf der arbeit funktionierts nun einwandfrei mit ff, safari und ie ;D
vielen dank!
und eine frage hätte ich da noch:
wollte eigentlich einen footer einbauen mit top: 100% und dann margin:-20px.
leider brauche ich margin schon fürs zentrieren und ich kanns ja schlecht zweimal anwenden, dann stellt er es mir immer an rand...
als bild in ein div reinpacken und align=center?
Zuletzt bearbeitet von FloKu am Mo 16.03.2009 14:43, insgesamt 2-mal bearbeitet
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 16.03.2009 15:01
Titel
|
|
|
| FloKu hat geschrieben: |
und eine frage hätte ich da noch:
wollte eigentlich einen footer einbauen mit top: 100% und dann margin:-20px.
leider brauche ich margin schon fürs zentrieren und ich kanns ja schlecht zweimal anwenden, dann stellt er es mir immer an rand...
als bild in ein div reinpacken und align=center? |
Das versteh ich jetzt nich ganz. Du kannst für jede Klasse oder ID das Margin neu bestimmen so wie alle anderen Eigenschaften auch.
|
|
| |
|
|
FloKu
Threadersteller
Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht:
|
Verfasst Mo 16.03.2009 15:23
Titel
|
|
|
Okay... verwechsel da wohl schon wieder was.
also mein footer sieht wie folgt aus:
| Code: | div#footer {
position:fixed;
top:100%;
margin-top:-16px;
height:14px;
width:694px;
background-color:#e0e0e0;
border-color:#808080;
border-top-width:2px;
border-left-width:3px;
border-right-width:3px;
border-bottom-width:0px;
border-style:solid;
} |
hab ich auch mal schnell eingebaut (hab zum glück grad leerlauf hier)
Auf der Seite steht er jetzt auch an der richtigen stelle, nur halt nicht zentriert...
wahrscheinlich ganz einfache lösung und ich stell mir das zu kompliziert vor...
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 16.03.2009 15:43
Titel
|
|
|
wenn du
| Code: | left:50%;
margin:-16px 0px 0px -347px; |
machst?
|
|
| |
|
|
FloKu
Threadersteller
Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht:
|
Verfasst Mo 16.03.2009 15:57
Titel
|
|
|
hey, nicht schlecht. mit 350px hinten klappt das super!
Vielen vielen dank. damit habt ihr euch alle den titel: "hero of the day" gesichert!
dann kann ich ja das menü oben auch endlich fixed machen.
dazulernen macht spaß 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[HTML] - Anker funktioniert nicht im Firefox
URL-Popup-Menü funktioniert im IE nicht
Code für drop down menü funktioniert nicht
DropDown-Menü funktioniert im FF, aber nicht im IE
Problem Dropdown Menü im Firefox [gelöst]
Hintergrundmusik funktioniert bei Firefox nicht
|
|
Willkommen auf dem Portal für Mediengestalter
