mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:03 Benutzername: Passwort: Auto-Login

Thema: CSS, Hilfe bei Rollover vom 26.06.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS, Hilfe bei Rollover
Autor Nachricht
Frau_Braun
Threadersteller

Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 26.06.2008 14:52
Titel

CSS, Hilfe bei Rollover

Antworten mit Zitat Zum Seitenanfang

Ich bin sicher, dass es sich nur um eine Kleinigkeit handelt, aber ich krieg sie nicht hin, steh gerade auf dem Schlauch. Könnte da mal einer reinschauen; es geht um das Menü:

Edit: Sache erledigt, Link gelöscht.

Wie man sieht, hebt sich die Schrift, wenn man mit der Maus über den Menüpunkt der gerade aktiven Seite geht, obwohl CSS-Definition (.current_page_item, ganz unten im CSS) etwas anderes vorsieht. Kann es sein, dass dieser Punkt durch das CSS doppelt angesprochen wird? Wie kann man das ändern? Die Schrift soll IMMER oben sein, auch wenn die Maus nicht darüber fährt.

Hier der Code für die Menüleiste:
Code:
<div id="menu">
<ul>
 <li <?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('url'); ?>/" title="Home">Home</a></li>
  <?php wp_list_pages('title_li=&exclude=15'); ?>
</ul>
</div>


CSS:

Code:
#menu {
   float: left;
   z-index: 0;
   position: absolute;
   margin-left: 250px;
   top: 90px;
}

#menu ul {
   padding: 0;
   white-space: nowrap;
   margin: 0;
}

#menu ul li {
   padding: 0;
   display: block;
   float: left;
   text-align: center;
   background: none no-repeat 10px 15px;
}

#menu ul li a {
   color: #fff;
   background-color: transparent;
   text-decoration: none;
   display: block;
   border-style: none;
}

#menu ul li a:link, #menu ul li a:visited {
   background-image: url(images/orange.gif);
   background-repeat: no-repeat;
   height: 26px;
   width: 94px;
   line-height: 26px;
   padding-top: 7px;
}

#menu ul>li+li a:link, #menu ul>li+li a:visited {
   background-image: url(images/gruen.gif);
   background-repeat: no-repeat;
   height: 26px;
   width: 94px;
   line-height: 26px;
   padding-top: 7px;
}

usw.

#menu ul li a:hover, #menu ul li a:active {
   background-image: url(images/orange.gif);
   background-repeat: no-repeat;
   background-position: 0px -66px;
   height: 29px;
   width: 94px;
   line-height: 29px;
   padding-top: 4px;
}

#menu ul>li+li a:hover, #menu ul>li+li a:active {
   background-image: url(images/gruen.gif);
   background-repeat: no-repeat;
   background-position: 0px -66px;
   height: 29px;
   width: 94px;
   line-height: 29px;
   padding-top: 4px;
}

usw.

/* Gerade aktive Seite */

.current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover, .current_page_item a:active {
   background-image: url(images/blau.gif);
   background-repeat: no-repeat;
   background-position: 0px -66px;
   height: 29px;
   width: 94px;
   line-height: 29px;
   padding-top: 4px;
}


Zuletzt bearbeitet von Frau_Braun am Di 01.07.2008 08:52, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 26.06.2008 20:02
Titel

Antworten mit Zitat Zum Seitenanfang

Google "Spezifität".
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Frau_Braun
Threadersteller

Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 26.06.2008 21:24
Titel

Antworten mit Zitat Zum Seitenanfang

Aha! Danke, ich wusste doch, dass es sowas gibt. Wenn ich durch Nachlesen nichts weiterkomme, kehre ich nochmal hierher zurück.
  View user's profile Private Nachricht senden
Psilo

Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht: Männlich
Verfasst Do 26.06.2008 22:57
Titel

Antworten mit Zitat Zum Seitenanfang

#menu ul li a:link, #menu ul li a:visited {
#menu ul>li+li a:link, #menu ul>li+li a:visited

reicht es nicht wenn er einfach
padding-top auf 4px setzt und nicht auf 7px?!?!

mfg
  View user's profile Private Nachricht senden
Frau_Braun
Threadersteller

Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 01.07.2008 08:42
Titel

Spezifität überschreiben

Antworten mit Zitat Zum Seitenanfang

Ich war ein paar Tage nicht an Bord. Der Wink mit der Spezifität hat mir geholfen. Ich habe das ganze div-Alphabet noch mal heruntergebetet, um alle Eigenschaften zu überschrieben:

Code:
html body #menu ul li.page_item.current_page_item a:link


Sieht nicht so elegant aus, funktioniert aber. Danke, wieder was Neues gelernt!
  View user's profile Private Nachricht senden
 
Ähnliche Themen Rollover mit CSS
rollover
rollover-PNG in PS
Rollover
rollover mit ps und golive?
grafik-rollover mit css
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.