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

Gallerie

L

luki

Neues Mitglied
Ich habe vor diese Gallerie in meine Homepage einzubauen. Bisher klapt auch alles ganz gut. Nur da wo die Pfeile sein sollten ist nichts man kann zwar draufklicken und kommt zu den nächsten bildern aber es ist einfach kein pfeil drauf. KAnn mir jemand sagen an welcher stelle im Code man das bild für den pfeil einfügt?



Habe schon ziemlich lange gesucht aber nichts gefunden.
 
Und da mir die forensoftware sag das der text zu lang war hier nun die css und html codes:



HTML: 
#gallery {

            width:750px;
	        height:550px;
	        margin:0 auto ;
	        position:relative;
	        font-family:verdana, arial, sans-serif;
	        background:#f8f8f8;
	        border-top:1px solid #ddd;
	        border-bottom:1px solid #ddd;
        }

            #gallery #slides {position:absolute; left:0; top:450px; height:120px; width:750px; overflow:hidden; text-align:center; z-index:500;}
            #gallery #slides div {width:750px; height:200px; position:relative; padding-top:10px;}
            #gallery #slides div ul {padding:0; margin:0 auto; list-style:none; width:684px;}
            #gallery #slides div ul li {float:left; padding:10px 0 5px 5px;}
            #gallery #slides div ul li a {display:block; width:92px; height:69px; float:left;}
            #gallery #slides div ul li a b {display:none;}
            #gallery #slides div ul li a.previous {background:url(double-click/previous.png) no-repeat center center;}
            #gallery #slides div ul li a.next {background:url(double-click/next.png) no-repeat center center;}

            #gallery #slides div ul li a img {display:block; width:92px; height:69px; border:0;}
            #gallery #slides div ul li a:focus {outline:0;}


            #gallery #fullsize {position:absolute; left:0; top:0; height:550px; width:750px; overflow:hidden; text-align:center; z-index:200;}

            #gallery #fullsize div {width:750px; height:700px; padding-top:90px; position:relative;}
            #gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:10px solid #fff; width:480px; height:360px; position:relative;}
            #gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:18px;}
            #gallery #fullsize div p {padding:5px 0; margin:0; font-size:12px; line-height:18px;}




HTML: 
<div id="gallery">
	<div id="slides">
		<div id="slide1">
			<ul>
				<li><a href="#slide10" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
				<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
				<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
				<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
				<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
				<li><a href="#slide2" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide2">
			<ul>
				<li><a href="#slide1" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
				<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
				<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
				<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
				<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
				<li><a href="#slide3" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide3">
			<ul>
				<li><a href="#slide2" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
				<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
				<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
				<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
				<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
				<li><a href="#slide4" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide4">
			<ul>
				<li><a href="#slide3" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
				<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
				<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
				<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
				<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
				<li><a href="#slide5" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide5">
			<ul>
				<li><a href="#slide4" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic5"><img src="double-click/pic5.jpg" alt="Green lizard" /></a></li>
				<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
				<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
				<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
				<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
				<li><a href="#slide6" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide6">
			<ul>
				<li><a href="#slide5" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic6"><img src="double-click/pic6.jpg" alt="Feeding the birds" /></a></li>
				<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
				<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
				<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
				<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
				<li><a href="#slide7" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide7">
			<ul>
				<li><a href="#slide6" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic7"><img src="double-click/pic7.jpg" alt="A group of butterflies" /></a></li>
				<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
				<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
				<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
				<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
				<li><a href="#slide8" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide8">
			<ul>
				<li><a href="#slide7" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic8"><img src="double-click/pic8.jpg" alt="Ladybirds" /></a></li>
				<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
				<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
				<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
				<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
				<li><a href="#slide9" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide9">
			<ul>
				<li><a href="#slide8" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic9"><img src="double-click/pic9.jpg" alt="Butterfly" /></a></li>
				<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
				<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
				<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
				<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
				<li><a href="#slide10" class="next"><b>Next</b></a></li>
			</ul>
		</div>
		<div id="slide10">
			<ul>
				<li><a href="#slide9" class="previous"><b>Previous</b></a></li>
				<li><a href="#pic10"><img src="double-click/pic10.jpg" alt="Trees in the mist" /></a></li>
				<li><a href="#pic1"><img src="double-click/pic1.jpg" alt="Winter branches" /></a></li>
				<li><a href="#pic2"><img src="double-click/pic2.jpg" alt="Wading birds" /></a></li>
				<li><a href="#pic3"><img src="double-click/pic3.jpg" alt="Bird on a post" /></a></li>
				<li><a href="#pic4"><img src="double-click/pic4.jpg" alt="Early bloomers" /></a></li>
				<li><a href="#slide1" class="next"><b>Next</b></a></li>
			</ul>
		</div>
	</div>

	<div id="fullsize">
		<div id="pic1">
			<h3>Titel</h3>
			<p><a href=""></a>.</p>
            <img src="double-click/pic1.jpg" alt="Winter branches" />

		</div>
		<div id="pic2">
			<h3>Titel</h3>
			<p><a href="">l</a>.</p>
            <img src="double-click/pic2.jpg" alt="Wading birds" />

		</div>
		<div id="pic3">
			<h3>Titel</h3>
			<p><a href=""></a>.</p>
            <img src="double-click/pic3.jpg" alt="Bird on a post" />

		</div>
		<div id="pic4">
            <h3>Titel</h3>
			<p><a href="h"></a>.</p>
			<img src="double-click/pic4.jpg" alt="Early bloomers" />

		</div>
		<div id="pic5">
            <h3>Titel</h3>
			<p><a href=""></a>.</p>
			<img src="double-click/pic5.jpg" alt="Green lizard" />

		</div>
		<div id="pic6">
            <h3>Titel</h3>
			<p><a href=""></a>.</p>
			<img src="double-click/pic6.jpg" alt="Feeding the birds" />

		</div>
		<div id="pic7">
            <h3>Titel</h3>
            <p><a href=""></a>.</p>
			<img src="double-click/pic7.jpg" alt="A group of butterflies" />


		</div>
		<div id="pic8">
            <h3>Titel</h3>
			<p><a href=""></a></p>
			<img src="double-click/pic8.jpg" alt="Ladybirds" />

		</div>
		<div id="pic9">
            <h3>Titel</h3>
			<p><a href=""></a>.</p>
			<img src="double-click/pic9.jpg" alt="Butterfly" />

		</div>
		<div id="pic10">
            <h3>Titel</h3>
			<p><a href=""></a>.</p>
			<img src="double-click/pic10.jpg" alt="Trees in the mist" />

		</div>
	</div>
</div>
 
Die Bilder für die Pfeile werden hier im Code eingebunden:
Code: 
            #gallery #slides div ul li a.previous {background:url(double-click/previous.png) no-repeat center center;}
            #gallery #slides div ul li a.next {background:url(double-click/next.png) no-repeat center center;}
Ersetze den Teil mit background nach diesem Stil: background: url(unterordner/bild.png);
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben