Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Frau_Braun
Threadersteller
Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.06.2008 14:52
Titel CSS, Hilfe bei Rollover |
|
|
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
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 26.06.2008 20:02
Titel
|
|
|
Google "Spezifität".
|
|
|
|
|
Anzeige
|
|
|
Frau_Braun
Threadersteller
Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.06.2008 21:24
Titel
|
|
|
Aha! Danke, ich wusste doch, dass es sowas gibt. Wenn ich durch Nachlesen nichts weiterkomme, kehre ich nochmal hierher zurück.
|
|
|
|
|
Psilo
Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Do 26.06.2008 22:57
Titel
|
|
|
#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
|
|
|
|
|
Frau_Braun
Threadersteller
Dabei seit: 26.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 01.07.2008 08:42
Titel Spezifität überschreiben |
|
|
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!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Rollover mit CSS
rollover
rollover-PNG in PS
Rollover
rollover mit ps und golive?
grafik-rollover mit css
|
|
|
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.
|
|