mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 01:48 Benutzername: Passwort: Auto-Login

Thema: CSS - Bildaustausch per Rollover vom 21.02.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS - Bildaustausch per Rollover
Autor Nachricht
fischchen
Threadersteller

Dabei seit: 06.03.2003
Ort: Kassel
Alter: 38
Geschlecht: Männlich
Verfasst Mo 21.02.2005 16:34
Titel

CSS - Bildaustausch per Rollover

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mööp

Dabei seit: 29.08.2003
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 21.02.2005 17:11
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
fischchen
Threadersteller

Dabei seit: 06.03.2003
Ort: Kassel
Alter: 38
Geschlecht: Männlich
Verfasst Mo 21.02.2005 18:44
Titel

Antworten mit Zitat Zum Seitenanfang

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. Grins

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. * Ich geb auf... *

also, hat einer eine idee wegen dem actice problem ?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
shaly

Dabei seit: 19.11.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 21.02.2005 18:48
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
fischchen
Threadersteller

Dabei seit: 06.03.2003
Ort: Kassel
Alter: 38
Geschlecht: Männlich
Verfasst Mo 21.02.2005 19:00
Titel

Antworten mit Zitat Zum Seitenanfang

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. Meine Güte!

auf die reihenfolge hab ich jetzt geachtet. aber der active-link funzt trotzdem nur im IE. Nicht im Firefox. *Schnief*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
Rollover mit CSS
tabellen rollover -> css
grafik-rollover mit css
CSS, Hilfe bei Rollover
Hilfe bei CSS-Rollover
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.