Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Linktext & Hover mit unterschiedlichen Grafiken“

Zaolat

Aktives Mitglied

Moin Moin,

ich habe da einen Wunsch für die Gestaltung einer Navigationsbar, jedoch nicht ausreichend Wissen, um das umzusetzten:

Wunsch ist:
Eine <ul> mit einigen <li> Link Elementen, die alle dieselbe Grafik als Hintergrund haben.
Wenn die Maus nun über den Link fährt, soll sich die Grafik ändern.

Derzeit ist es bei mir jedoch so, dass die Grafik nicht ganz dargestellt wird, sondern nur der Teil, welcher vom Link Text eingenommen wird (die Grafik ist größer als der Text).
Wie bekomme ich das hin, dass die Grafik immer komplett angezeigt wird, egal wie kurz der Linktext ist?

HTML:
    <div class="navibar">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a></li>
      </ul>
    </div>

css-code:
Code:
.navibar li {
	width:150px;
	height:50px;
	list-style:none;
	margin:5px;
}

.navibar a {
	width:150px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}
.navibar a:link {
	width:150;
	height:50;
	color: #25c957;
	text-decoration: none;
	background-image:url(images/button.png);
}
.navibar a:visited {
	color: #fff;
	text-decoration: underline;
}
.navibar a:hover, a:active, a:focus {
	text-decoration: none;
	background-image:url(images/button_hover.png);
}
 

yezinia

Noch nicht viel geschrieben

AW: Linktext & Hover mit unterschiedlichen Grafiken

Ganz simpel:

Gib dem li das Hintergrundbild und die :hover pseudoklasse und nicht dem Link
 

Zaolat

Aktives Mitglied

AW: Linktext & Hover mit unterschiedlichen Grafiken

Danke.
Macht natürlich Sinn, deine Antwort. ;-)
Es klappt!
 

Myhar

Hat es drauf

AW: Linktext & Hover mit unterschiedlichen Grafiken

Eine schlechte Lösung, da das Bild zum Link gehört soll es natürlich auch beim Link als Hintergrundbild eingebunden werden.
Wenn das Bild nicht komplett angezeigt wird, muss mit padding der Bereich des Links vergrößert werden. Eine alternative Lösung ist, den Link als Blockelement darstellen zu lassen, damit man mit (min-)width, bzw. (min-)height die Breite, bzw. Höhe einstellen kann.
 

Zaolat

Aktives Mitglied

AW: Linktext & Hover mit unterschiedlichen Grafiken

Danke Myhar,

den Text konnte ich bereits korrekt ausrichten und das Hintergrundbild soll keine Verlinkung zum Ziel haben. Nur die Idee mit dem Blockelement ist eine interessante Alternative.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben