| Autor |
Nachricht |
fischchen
Threadersteller
Dabei seit: 06.03.2003
Ort: Kassel
Alter: 45
Geschlecht: 
|
Verfasst Mo 21.02.2005 17:34
Titel CSS - Bildaustausch per Rollover |
  |
|
Hallo zusammen,
ich gestalte gerade eine neue Seite für mich. Sie soll komplett in CSS layoutet werden. Also bei meinem Hauptmenü möchte die Menüpunkt bei rollover sowie aktive austauschen. Ich mache dies indem ich jeweils background-image benutze. Leider funzt das nicht so wie ich das will und ich finde den Fehler nicht. Im IE6 hat es funktioniert. Allerdings hab ich jetzt schon wieder ein bißchen probiert und es im IE nicht nochmal probiert. es dürfte eigentlich kein akt sein, aber irgendwo hab ich einen Fehler.
Hier mal der Link zum gucken.
Website
und hier mal das CSS dazu. ich denke ab .menue-punkt sollte das interessante stehen.
| Code: |
body {
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #818181;
}
h4 {
font-family: Verdana;
font-weight: bold;
font-size: 10px;
margin-top: 0px;
color: #C54214;
}
.navi {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
padding-left: 35px;
text-align: center;
}
.subnavi {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
padding-left: 10px;
}
.menue-punkt {
background-image: url("../media/menu/menu_punkt_bg.jpg");
background-position: center;
background-repeat: no-repeat;
color: #818181;
width: 109px;
height: 20px;
z-index: 5;
}
.menue-punkt a:hover {
background-image: url("../media/menu/menu_punkt_bg_over.jpg");
background-position: center;
background-repeat: no-repeat;
display: block;
color: #818181;
width: 109px;
height: 20px;
z-index: 5;
}
.menue-punkt a:active {
background-image: url("../media/menu/menu_punkt_bg_active.jpg");
background-position: center;
background-repeat: no-repeat;
display: block;
color: #818181;
width: 109px;
height: 20px;
z-index: 5;
}
a {
text-decoration: none;
color: #818181;
}
a:hover, a:active {
color: #C54214;
}
#rand-left {
position: absolute;
float: left;
width: 19px;
height: 100%;
top: 0px;
background-image: url("../media/bg_rand.jpg");
background-repeat: repeat-y;
}
#container-menue {
position: absolute;
height: 34px;
width: 710px;
margin-left: 30px;
z-index: 5;
}
#container-submenue {
position: absolute;
height: 18px;
width: 710;
margin: 30px 0px 0px 278px;
z-index: 5;
display: block;
}
|
ich hab momentan einfach keinen plan und noch weniger zeit.
vielleicht kann mir jemand helfen.
vielen dank schon einmal
|
|
| |
   |
 |
mööp
Dabei seit: 29.08.2003
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 21.02.2005 18:11
Titel
|
|
|
du sagst es funktioniert nicht so wie du willst, aber was dich genau stört sagst du nicht. Ich schätze mal es soll sich nicht so verschieben, obwohl das im Grunde kein Fehler sein muss, wenn mans noch etwas schöner hinbekommt.
da du tabellen und dann ein CSS menue benutzt frag ich mich, wo da die konsequenz liegt, wenn du "komplett in CSS" layouten willst.
hier mal ein tut für rollover mit dem span Tag:
http://www.idee-c.de/wissen_c.php?id=3
für eine navigation gabs hier mal ein thread, wo der rollover mit Listen Tags umgesetzt war. ist eigentlich besser für ein menue. musst mal suchen.
|
|
| |
|
|
|
Anzeige
|
|
|
fischchen
Threadersteller
Dabei seit: 06.03.2003
Ort: Kassel
Alter: 45
Geschlecht:
|
Verfasst Mo 21.02.2005 19:44
Titel
|
|
|
Hi mööp,
ja das problem ist das beim rollover die fläche hinter dem wort grau werden soll. wenn der link active ist soll die fläche grau sein und der pfeil nach unten zeigen. im IE6 wird es korrekt dargestellt. außer natürlich das es springt. in allen anderen relevanten browsern wird mir der active link nicht angezeigt. gibt es da ne möglichkeit das zu umgehen. wundert mich das der IE was kann, was die anderen nicht können. 
das mit den td-tags war gestern ne schnelle lösung. ich wollte das eigentlich als listenmenü machen. du bekommst die listenpunkte aber nur mit float:left; nebeneinander. das unterstützt aber leider der IE wiedernicht. 
also, hat einer eine idee wegen dem actice problem ?
|
|
| |
|
|
shaly
Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 21.02.2005 19:48
Titel
|
|
|
du musst die richtige reihenfolge der pseudo-klassen einhalten:
link, visited, hover, active
ausserdem solltest du bedenken, dass avtive nur solange gilt, wie du mit der maus nicht woanders hin klickst.
|
|
| |
|
|
fischchen
Threadersteller
Dabei seit: 06.03.2003
Ort: Kassel
Alter: 45
Geschlecht:
|
Verfasst Mo 21.02.2005 20:00
Titel
|
|
|
das mit dem springen hab ich zumindest im firefox erstmal gelöst. das lag an den width-angaben in hover und active. im IE macht er das allerdings trotzdem noch. 
auf die reihenfolge hab ich jetzt geachtet. aber der active-link funzt trotzdem nur im IE. Nicht im Firefox. 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
bildaustausch
Bildaustausch per Klick und Link mit Javascript
probleme beim bildaustausch mit js in dreamweaver
Per Textlink Bildaustausch von Hintergrundbild in div/table?
Bildaustausch mit JavaScript - getauschtes Bild mit Link
rollover-PNG in PS
|
|
Willkommen auf dem Portal für Mediengestalter
