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

Bild als Hover Effekt und Div-Größe

X

xFrager

Mitglied
Hallo,
ich möchte gerne ein Bild als Hover-Effekt für meine Navigation haben. Doch wenn ich mit der Maus über den Eintrag in der Navi fahre, wird das Bild auf den Bereich der Schrift verzert. Ich müsste dem Eintrag in der Navi doch eigentlich die Größe des Bildes geben, oder? Ich habe schon versucht ihnen die Größe des Bildes zu geben, doch es geht nicht.

HTML-Code
HTML: 
<html>
    <head>
        <title>Seite</title>
        <link href="main.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
          <div id="navigation">
              <div id="navi">
              <ul>
                  <a href="#"><li id="ele_aktuell">Startseite</li></a>
                  <a href="#"><li id="ele">Neuigkeiten</li></a>
                  <a href="#"><li id="ele">Downloads</li></a>
                  <a href="#"><li id="ele">Projekte</li></a>
                  <a href="#"><li id="ele">Portfolio</li></a>
                  <a href="#"><li id="ele">Kontakt</li></a>
              </ul>
              </div>
          <div style="clear: both"></div>
          </div>
          <div id="content">
            <div id="content-text">
                <h1>Lorem Ipsum</h1>
            </div>
            <div style="clear: both;"></div>
          </div>
    </body>
</html>

CSS-Code
Code: 
#navigation 
{
    background-image: url(img/navigation.png); 
    width: 1020px;
    height: 101px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;  
}

#navi ul 
{
  padding-top: 35px;
  padding-left: 35px;
  font-family: pro;
  color: #757474;
}

#navi ul li
{
  margin-right: 35px;
  display: inline; 
}

#ele
{
    width: 108px;
    height: 78px;
    background-image: url(img/navi_hover.png);
}

#ele_aktuell
{

}
 
Werbung:
hallö,
zeige das besser in Aktion.

dein Menü ist fehlerhaft, a li ist falsch li a ist richtig.

cheffchen
 
Was meinst du mit "zeige das besser in Aktion"? Ich habe leider keinen Webspace, kann aber auch nicht anhängen. Ich habe nun die Links in die Div's reingesetzt, wenn es das war, was du meintest.
 
Werbung:
Nochmal deutlicher geschrieben:

falsch:
HTML: 
<a href="#"><li id="ele_aktuell">Startseite</li></a>

Richtig:
HTML: 
<li id="ele_aktuell"><a href="#">Startseite</a></li>

"In Aktion" meint wirklich einen Link auf die Seite auf der Du dieses Problem hast. Wenn Du bisher keinen Webspace hast, such dir einen kostenfreien und lad deine Seite dort hoch, so dass wir sie uns dort anschauen können. Kostenfreie Webspaces findest Du z.B. hier: http://meine-erste-homepage.com/webspace_gratis.php
 
Werbung:
Hallo,

also das mit denn ids wurde ja schon gesagt und wast bremst dich jetzt ein einfache hover zu nutzen?
HTML: 
#navi ul a:hover{ background-image: url(img/navi_hover.png); }
Cheffchen
 
Dann wird das Bild nur auf Größe der Schriftbox dargestellt. Das bild ist größer, aber es klappt nicht den li - Elementen die Größe des Bildes zu geben.
 
Werbung:
Doch, ich habe nun eine Klasse benutzt und die Fehler, die mir der Validator angezeigt hat behoben. Hover Klasse hatte ich tatsächlich nicht drinn, aber es will trotzdem nicht funktionieren oder ich habe grade ein Brett vor'm Kopf..
 
hallö,

na wenn ein Bild als hover anzeigen mochtest dann musst a auch die große geben wie das Bild.
wo her soll der Browser wissen wie gross das haben möchtest?

cheffchen
 
Ich habe nun diesen Code für die Hoverklasse:
Code: 
.ele:hover
{
    width: 108px;
    height: 78px;
    background-image: url(img/navi_hover.png);   
}

Trotzdem wird das Bild nicht richtig angezeigt.
 
Werbung:
Hallo,

das fehlt noch im hover,
Code: 
display: inline-block !important;

aber da stimmt glaube ich was im grundsatz nicht.
wie so soll das auf einmal 78px hoch sein beim hover?
und soll nicht der Link größer werden also so .ele a:hover

Cheffchen
 
Der Bereich, damit der Hover aktiviert wird soll so groß sein.

Nun wird das Bild zwar angezeigt, doch ich weiß nicht, wie ich denn nun verschieben soll?!

Link

Und warum verschieben sich die li-Element? Ich habe festgelegt, dass der Abstand nach rechts immer 35px sein soll. Wie muss ich das ändern, damit die 35px beim Hovern "verkleinert" werden?
 
Zuletzt bearbeitet:
Hallo,
Und warum verschieben sich die li-Element?
Zum Vergrößern anklicken....
na weil die li keine feste breiten haben, nur das hover bekommt dies.

Zeichne doch einfach mal das auf was am ende vorstellst inkl. 1 der als hover ist.
Denn ich blick nicht so ganz was eigentlich vorstellst.

Cheffchen
 
Werbung:
Blöde Frage vielleicht, aber warum verwendest du überhaupt ul und li. Das geht doch ohne problemloser.
HTML: 
        <div id="navigation">
              <div id="navi">
                <p class="andereseiten"> <a href="agenturprofil.html">Agenturprofil</a></p>
                <p class="ele_aktuell"><a href="#">Startseite</a></p>
                <p class="ele"><a href="#">Neuigkeiten</a></p>
                <p class="ele"><a href="#">Downloads</a></p>
                <p class="ele"><a href="#">Projekte</a></p>
                <p class="ele"><a href="#">Portfolio</a></p>
                <p class="ele"><a href="#">Kontakt</a></p>
          </div>
li haben keine feste Breiten, die Klassen natürlich schon. Denen gibst du einfach die Größe der Grafik. Fertig.
Bernie
 
Werbung:
Hallo,

toll, nun hast das aber falsch gemacht und Suchmaschine erkennen das nun nicht mehr als Menü :O)

Menü hat eine ul li liste zu sein wie das ja nun hattest, das mit p zu machen ist einfach falsch.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben