Antworten auf deine Fragen:
Neues Thema erstellen

Navigationsproblem

J

judie626

Gesperrt

Hallo,
möchte den einzelnen navigationspunkte jeweils ein bild zu ordnen beim hover soll sich das bild änder... geht aber net :D. Die navigation befindet sich in einem weiterm container. innerhalb des container liegt neben der navigation liegt ein bild.

<div id="content">
<img src="images/titel2.gif" width="310" height="100" alt="Highlands" longdesc="images/titel2.gif" />

<div id="navi">
<ul>
<li><a class="home " href=?home.html?></a></li>
<li><a class="service " href=?kontakt.html?></a></li>
<li><a class="blog " href=?blog.html?> </a></li>
<li><a class="contact " href=?contact.html?></a></li>
</ul>
</div>
</div>

#content img{float:left; padding:30px;}

#navi {
width:580px;
height:180px;
border:2px dotted #ffffff;
position:relative;
float: left;


}
#navi ul {
list-style-type:none;

}
#navi li {
height:auto;
width:auto;
display: inline;
padding: 50px;
position:relative;
top: 70px;

}


#navi a.home {

background:url(images/HOME.png) no-repeat;
}
#navi a.home:hover, a.home:active {
background:url(images/HOME2.png) no-repeat;
}
 

H

Herr_D

offline

AW: Navigationsproblem

#navi a.home


ändern in

#navi ul li a.home


bzw.

a.home


am besten noch Höhe und Weite dem Li zuordnen


Außerdem hat der Link ja nix auf was er greifen kann... zumindest ein &nbsp; müßte ins html
 
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

versuch mal

#navi ul li a.home {

background-image:url(images/HOME.png) no-repeat;
}

Edit: Achtung nochmal geändert
 
Zuletzt bearbeitet:
J

judie626

Gesperrt

AW: Navigationsproblem

:D so hab ich es eigentlich schon.
aber nicht einmal listen-style-type: none geht. weiß jmd wie ich die typische link darstellung ausschalte?

Danke für alle antworten
 
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

ich kopier dir mal ein Quelltext aus einer meiner css-Datein.

Allerdings musst du beachten, daß ich für alle Linksmöglichkeiten (hover, visitet .... )
nur eine Grafik habe die sich je nach momentaner Funktion verschiebt.

Dies Spart dir Ladezeit bei z.B Mousover und die Grafik ist gleich da.

#navidiv a:link {
background-image: url(navipng.png);
background-repeat: no-repeat;
background-position: 0px -2px;
color: #CCC;
padding-left: 20px;
text-decoration: none;
}
#navidiv a:visited {
background-image: url(navipng.png);
background-repeat: no-repeat;
background-position: 0px -23px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navidiv a:hover {
background-image: url(navipng.png);
background-repeat: no-repeat;
background-position: 0px -43px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navidiv a:active {
background-image: url(navipng.png);
background-repeat: no-repeat;
background-position: 0px -63px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
 
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

gerne, musst dir halt ein bisschen umschreiben was aber kein großes Problem sein dürfte.
 
J

judie626

Gesperrt

AW: Navigationsproblem

Funktioniert net :
hier der komplett quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&bull; Scottish Highlands &bull;</title>

<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" href="panning-slideshow.css"/>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.timer.js"></script>
<script src="image-rotator.js"></script>


</head>

<body>

<div class="page">

<div id="header">
<div id="window">
<ul id="slideshow">
<li class="box1"><img src="http://www.psd-tutorials.de/modules/Forum/images/tiger.jpg" alt="Tiger"/></li>
<li class="box2"><img src="http://www.psd-tutorials.de/modules/Forum/images/macaw.jpg" alt="Macaw"/></li>
<li class="box3"><img src="http://www.psd-tutorials.de/modules/Forum/images/bald-eagle.jpg" alt="Bald Eagle"/></li>
<li class="box4"><img src="http://www.psd-tutorials.de/modules/Forum/images/panda.jpg" alt="Panda"/></li>
</ul>
</div>
</div>

<div id="content">
<img src="http://www.psd-tutorials.de/modules/Forum/images/titel2.gif" width="310" height="100" alt="Highlands" longdesc="http://www.psd-tutorials.de/modules/Forum/images/titel2.gif" />

<div id="navidiv">
<ul>
<li><a class="home" href="#" ><img src="http://www.psd-tutorials.de/modules/Forum/images/HOME.png" width="95" height="95" alt="Home" /></a></li>
<li><a class="service" href="#" ><img src="http://www.psd-tutorials.de/modules/Forum/images/HOME.png" width="95" height="95" alt="Home" /></a></li>
<li><a class="blog" href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/HOME.png" width="95" height="95" alt="Home" /></a></li>
<li><a class="contact" href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/HOME.png" width="95" height="95" alt="Home" /></a></li>
</ul>
</div>





</div>

<div id="body">


</div>

<div id="footer">




</div>
</div>

</body>
</html>

so sieht gerade die navi aus :
Yfrog Photo : yfrog.com/5uunbenanntrsbp - Shared by judie62626
 
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

Jetzt verlinkst du ja die Bilder.

Wenn auf Bilder ein Link gemacht habe bekommen sie einen Rand, musst also noch Border auf 0 setzen.

Warum die Grafik nicht richtig geht, kann ich an dem Quellcode nicht sehen da das ist deiner css.css festgelegt ist.
 
J

judie626

Gesperrt

AW: Navigationsproblem

wenn ich die bilder über css reinstell geht gar nix wenn ich über html mach geht wenigstens einbisschen was

body {

background-color:#464646;
font:15px/25px Georgia,"Times New Roman",Times,serif;
min-width:1080px;
width:100%;


}
.page {
background-color: #464646;
font-size:12px;
margin:0 auto;
min-height:100%;
position:relative;
width:960px;
}
#header {
background-color: #464646;
font-size:12px;
margin:0 auto;
min-height:100%;
position:relative;
width:960px;

}
#navidiv a:link {
background-image:url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px -2px;
color: #CCC;
padding-left: 20px;
text-decoration: none;
}
#navidiv a:visited {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px -23px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navidiv a:hover {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px -43px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navidiv a:active {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px -63px;
padding-left: 20px;
color: #CCC;
text-decoration: none;

}
#content{background:#131310 url('images/speech-bubble.gif') top left no-repeat; width:960px; margin:0px auto 10px auto; overflow:hidden; padding-top:20px;}
#content img{float:left; padding:30px;}
 
Zuletzt bearbeitet:
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

kann ja nicht gehen.

du hast ja meine css 1zu1 übernommen.

duhast doch garkein div mit der id navidiv ausserdem passt ja die position der Grafik nicht, da das auf meine Grafik abgestimmt war.

Wichtig: ich habe das nur aus einer meiner Seiten rauskopiert, damit du den Aufbau verstehtst, du kannst es aber so nicht auf deine anwenden.
 
J

judie626

Gesperrt

AW: Navigationsproblem

ok.
ne kleine frage:
muss ich jetzt dem link dann die größe des bilder zufügen?
also
#navi ul li a { width: 95px;
height: 95px;
}
oder
#navi ul li:a { width: 95px;
height: 95px;
}
 
Mway

Mway

Aktives Mitglied

AW: Navigationsproblem

nein musst nicht, wenn du nichts angibst wird er Automatisch 95PX da deine verlinkte Grafik so groß ist.
 
J

judie626

Gesperrt

AW: Navigationsproblem

naja egal geht halt net: hab jetzt so gemachzt

#navi ul li {
float:left;
list-style-type:none;
position:relative;
top: 30px;
padding-left: 50px;
}


#navi a:link {
background-image:url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px 0px;
color: #CCC;
padding-left: 20px;
text-decoration: none;
}
#navi a:visited {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navi a:hover {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 20px;
color: #CCC;
text-decoration: none;
}
#navi a:active {
background-image: url(images/HOME.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 20px;
color: #CCC;
text-decoration: none;

}
<div id="navi">
<ul>
<li><a class="home" href="#" >Home</a></li>
<li><a class="service" href="#" >Home</a></li>
<li><a class="blog" href="#">Home</a></li>
<li><a class="contact" href="#">Home</a></li>
</ul>
</div>
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 46 (Mitglieder: 0, Gäste: 46)
Robots: 848

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben