Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Horizontales Menu mit verschiedene Grafiken“

MacDan

Noch nicht viel geschrieben

Code:
<div id="menu">
            	<ul id="nav">
                
                <li><a href="#" id="home"></a></li>
                <li><a href="#" id="blub1"></a></li>
                <li><a href="#" id="blub2"></a></li>
                <li><a href="#" id="blub3"></a></li>
                </ul>
            </div><!-- end menu -->

Das ist mein Menu-bereich in der index.html. Habe 1 Datei gespeichert mit beiden "Zuständen" einmal normal und einmal wenn man hover.

Der zugehörige CSS teil

Code:
#nav {
  float: left;
  width: 500px;
  height: 95px;
}

#nav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

#home {
    width:124 px;
    height: 95px;
    text-decoration: none;
    display: block;
    background: url(../images/home.jpg) 0 0;
}

#home:hover {
    background-position: 124px 0;
}

Jetzt hab ich das Problem das er die vollständige Grafik, also beide "Zustände" immer anzeigt. Und diese Grafik auch noch 2 mal.

Original größe ist 248x95px


Jemand eine Idee wo da der Wurm steckt? Liegt es evtl daran das ich die ids in einer Liste habe?


regards denny
 
Zuletzt bearbeitet:

MacDan

Noch nicht viel geschrieben

AW: Horizontales Menu mit verschiedene Grafiken

Ok ich habs jetzt etwas anders gelöst.
mein css

Code:
#logo_menu {
	background: url(../images/logo.jpg) no-repeat;
	height: 67px;
	width: 1280px;
	margin-left: 172px;
	margin-top: 24px;
}

h1 {
	text-indent: -9999px;
	float: left;
}

#home {
	background: url('../images/home.jpg') no-repeat 0 0;
	margin-top: 24px;
	margin-left: 428px;
    width: 124px;
    height: 95px;
    display: block;
    
}

#home:hover {
    background-position: -124px 0;
}

#service {
	background: url('../images/service.jpg') no-repeat 0 0;
	margin-top: 24px;
	margin-left: 552px;
    width: 123px;
    height: 95px;
    display: block;
    
}

#service:hover {
    background-position: -123px 0;
}

#portfolio {
	background: url('../images/portfolio.jpg') no-repeat 0 0;
	margin-top: 24px;
	margin-left: 675px;
    width: 133px;
    height: 95px;
    display: block;
    
}

#portfolio:hover {
    background-position: -133px 0;
}

#kontakt {
	background: url('../images/kontakt.jpg') no-repeat 0 0;
	margin-top: 24px;
	margin-left: 808px;
    width: 120px;
    height: 95px;
    display: block;
    
}

#kontakt:hover {
    background-position: -120px 0;
}



Code:
<div id="logo_menu">
            	<h1><a href="#">Fogward Design</a></h1>
                <a href="#" id="home"></a>
                <a href="#" id="service"></a>
                <a href="#" id="portfolio"></a>
                <a href="#" id="kontakt"></a>
             </div>  <!-- end logo_menu -->

Jetzt werden die Grafiken richtig dargestellt und auch der hover Effekt funktioniert einwandfrei.
ABER
Das logo ist auf der richtigen Postion und der erste Menupunkt ist auf der richtigen Postition, die anderen 3 werden wie eine Treppe nach rechts unten weg gestaffelt.

Wo ist da mein Fehler?

Hoffe jemand kann helfen.

regards denny
 

kywo

Nixnutz

AW: Horizontales Menu mit verschiedene Grafiken

Ich habe mir neulich ein Tutorial angesehen.

Das war zwar ein horizontales Menue, aber wenn ich mich recht erinnere, wurde "float" durch etwas anderes ersetzt, um diesen Treppenefekt zu vermeiden.

kywo
 

MacDan

Noch nicht viel geschrieben

AW: Horizontales Menu mit verschiedene Grafiken

Ich habs jetzt mit postition:absolute gemacht, zwar bissl aufwendig, aber bringt das ergebnis.

Danke trotzdem

grüße denny
 
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.156
Beiträge
2.581.859
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben