• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hovereffekt über href und dynamisches Icon

S

säntis7

Neues Mitglied
Hallo zusammen.
Bin neu hier und hoffe auf einen Tipp oder Bestätigung zu meinen Internet Recherchen.

Ich habe mich entschlossen meine Website www.spshaus.ch zu modernisieren.
Auf spshaus.ch "Weiterbildung" entsteht meine neue Seite ohne Frames, welche ich mit HTML, CSS und PHP aufbauen möchte.

Meine Frage:
Wie kann ich es erreichen, dass der hover Effekt nicht nur über den Text geht, sondern auch über die Grafik "new" oder "akt".
Ganz unten funktioniert der hover Effekt wie gewünscht, dort ist aber die Grafik ganz links angeordnet.

Meine Recherchen:
Eine relative Positionierung der Grafik nach oben und nach rechts geht, aber der Abstand zwischen
den einzelen Links habe ich nicht weggekriegt, da der original Platz der Grafik bleibt.
Eine Lösung wäre mit zwei unterschiedlichen Hintergrundgrafiken zu arbeiten, dann könnte aber die
Breite der sitebar_left nicht mehr so einfach geändert werden.

Hier ein paar Code Ausschnitte:

sitebar_left.php
PHP: 
<?php 
/* Umschaltung der Grafik für My Ricardo */
$Ricardo_aktiv = true;
// aktueller Seitenname ohne Pfad ermitteln
$sitename = basename($site); 
?>
    <header>
        <h3>Kursdaten</h3>
    </header>
    <nav>
        <ul class="menu">
            <li <?php if ($sitename=="ZBW_2013") {echo "id=\"menu-on\"";} ?> >
    <a href="index.php?site=Termine/ZBW_2013">ZBW (2013)</a>
                <?php Icon_Beitrag("08-03-2013"); ?>
            </li>
            
            <li <?php if ($sitename=="Siemens_2013") {echo "id=\"menu-on\"";} ?> >
             <a href="index.php?site=Termine/Siemens_2013">Siemens (2013)</a>
                <?php Icon_Beitrag("09-03-2013", "update"); ?>
            </li>
        </ul>
    </nav>
    <header>
        <h3>SPS-Kurse</h3>
    </header>
    <nav>
        <ul class="menu">
            <li><a href="#">ST-SERV1</a></li>
            <li><a href="#">ST-SERV2</a></li>
            <li><a href="#">ST-SERV3</a></li>
            <li><a href="#">TIA-PRO1</a></li>
            <li><a href="#">ST-PRO2</a></li>
            <li><a href="#">ST-PRO3</a></li>
            <li><a href="#">TIA-SCL</a></li>
            <li><a href="#">WCCFSY1</a></li>
            <li><a href="#">WCCFSY2</a></li>
            <li><a href="#">STR</a></li>
            <li><a href="#">Download</a></li>
        </ul>
    </nav>
    <header>
        <h3>Infos</h3>
    </header>
    <nav>
        <ul class="menu">
            <li><a href="#">Controller</a></li>
            <li><a href="#">HMI</a></li>
            <li><a href="#">NET</a></li>
            <li><a href="#">Motion/EMV</a></li>
            <li><a href="#">Safety</a></li>
        </ul>
    </nav>
    <header>
        <h3>spshaus</h3>
    </header>
    <nav>
        <ul class="menu">
            <li><a href="#">Haustechnik</a></li>
            <li><a href="#">PV-Anlage</a></li>
        </ul>
    </nav>
    
    <header>
        <h3>Links</h3>
    </header>
    <nav>
        <ul class="menu">
            <li><a href="#">Siemens</a></li>
            <li><a href="#">Bücher</a></li>
            <li><a href="#">Diverse</a></li>
        </ul>
    </nav>
 <aside id="eMail">
  <img src="../images/Icon/Icon_mail_16_11.gif"/>
        <script language="JavaScript">
   emailscript("glarnerm", "spshaus", "ch");
  </script>
    </aside>
 <aside id="Ricardo">
  <?php
        if ($Ricardo_aktiv)
            {
                echo "<img src=\"../images/Icon/Icon_Ricardo_on.gif\"/>";
            }
  else
            {
                echo "<img src=\"../images/Icon/Icon_Ricardo_off.gif\"/>";
            }    
        ?>
        <a href="http://info.ricardo.ch/sumsi33" target="_blank">My Ricardo</a>
    </aside>

css.php
Code: 
<? 
/*********************************************************** 
 Navigationsmenü links
************************************************************/ 
?>
#sidebar-left h3{
    width: <?= $Breite_Sidebar_left ?>px;
 height: <?= $Hoehe_Menu_Pkt_sidebar_left ?>px;
    display: block;
    float: left;
    line-height: <?= $Hoehe_Menu_Pkt_sidebar_left ?>px;
    text-indent: 5px;
    margin-top: 5px;
    background:url(../images/System/background_main_header.gif);
}
#sidebar-left .menu{
 list-style-type: none;
    width: <?= $Breite_Sidebar_left ?>px;
}
#sidebar-left .menu li a{
    width: <?=$Breite_Sidebar_left [COLOR=#ff0000]- 31 [/COLOR]?>px;
 height: <?=$Hoehe_Menu_Pkt_sidebar_left?>px;
 float: left;
    
    font-size: 12px;
    line-height: <?=$Hoehe_Menu_Pkt_sidebar_left?>px;
    text-indent: 10px;
    color: #FFF;
    text-decoration: none;
    
    text-shadow: 1px 1px 0px #000;
 webkit-transition: all 300ms ease-in;
 -moz-transition: all 300ms ease-in;
 -ms-transition: all 300ms ease-in;
 -o-transition: all 300ms ease-in;
 -transition: all 300ms ease-in;
}
#sidebar-left .menu li a:hover{
 background: #999;
 webkit-transition: all 300ms ease-in;
 -moz-transition: all 300ms ease-in;
 -ms-transition: all 300ms ease-in;
 -o-transition: all 300ms ease-in;
 -transition: all 300ms ease-in;
}
#sidebar-left .menu #menu-on a{
 background: #568694;
 cursor: default;
}
#sidebar-left .menu li img{
 margin-top: 5px;
}

main.php
PHP: 
<?php 
/*
// ---------------------------------------
// Datum    : 06.03.20013
// Autor    : 
// Funktion : Icon_Beitrag
// ---------------------------------------
// $Date_Veroeffentlichung = Datum an dem der Beitrag veröffentlicht wurde.
// $Iconbild      = Optional: Icon "new" oder "update" wird angezeigt.
// $Tage_neu         = Optional: Anzahl Tage, wie lange das Icon angezeigt werden soll.
// 
*/
function Icon_Beitrag ($Date_Veroeffentlichung, $Iconbild = "new", $Tage_neu = 7)
{
 // Anzahl Tage seit Veröffentlichung berechnen  
 $date1 = strtotime($Date_Veroeffentlichung);
 $date2 = time();
 $Tage  = floor(($date2-$date1)/86400);
 // Prüfen ob das Icon noch ausgegeben werden soll
 if ($Tage <= $Tage_neu)
  { 
  // Entscheiden, welche Grafik ausgegeben werden soll
  if ($Iconbild == "new")
   { echo "<img src=\"../images/Icon/Icon_new.gif\" />" ; }
  else
   { echo "<img src=\"../images/Icon/Icon_update.gif\" />" ; }
  }
}
?>

Wenn ich die Breite nicht um 31 verkleinere, wird die Grafik
auf die nächste Zeile geschrieben.

Für Tipps und Anregungen zur Verbesserung bin ich sehr dankbar.
Gruss Martin
 
Du solltest zunächst noch ein fehlendes > am html-Tag ergänzen, wodurch sich vermutlich die meisten dieser Fehler hier von selbst beheben:
[Invalid] Markup Validation of http://ww3.spshaus.ch/ - W3C Markup Validator

Dann ist deine Frage eine reine CSS-Frage, daher bist Du im HTML-Bereich des Forums falsch. Auch interessiert dein PHP-Code nicht wirklich, da es dir um die Browserausgabe geht.

Und um deine Frage noch zu beantworten .. du hast 2 Möglichkeiten:
Entweder gibst Du dem <li>-Element die hover-Pseudoklasse zur Veränderung von Link und Grafik dahinter, das sähe z.B. so aus:

Code: 
li:hover a { }
li:hover img { }

Oder (und das wäre der beste Weg) du fügst das Bild als Hintergrundgrafik des Links ein. Also z.B. in der HTML-Ausgabe per

HTML: 
<li><a href="#" class="icon_new">Linktitel</a></li>

und im CSS

Code: 
li a { 
 background-position: right center;
 background-repeat: no-repeat;
}
li a.icon_new {
 background-image: url(new.png);
}
li a:hover {
 background-image: url(new_hover.png);
}
 
Das wäre eine dritte Möglichkeit, hat jedoch mehrere Nachteile:
Die Grafiken könnten einzig per JavaScript bei mouseover ausgetauscht werden.
Die Grafiken wären als <img>-Elemente im HTML-Code enthalten, hätten jedoch inhaltlich keinerlei Bedeutung in Zusammenhang mit dem Inhalt der Seite.
Die Grafiken würden beim Laden jeder Seite mitgeladen werden.
 
Danke für die Tipps, hat mir sehr geholfen.
Die Grafik muss sich nicht ändern, dadurch ist noch etwas einfacher.
Werde die beiden Links ganz unten auch noch dementsprechend optimieren und die Fehler beseitigen.

Vielen Dank
Gruss Martin
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben