cssimagegalerikodu
CSS KOD<style type="text/css">body { background: #e3e3e3 url(http://img292.imageshack.us/img292/3042/fadingbackgroundqk0.png) repeat-x; margin: 0; padding: 0; font: normal 13px verdana, arial, helvetica, sans-serif; color: #666; } html { margin: 0; padding: 0; } #maincontainer { width: 554px; margin: 0 auto; } #contentwrapper { float: left; width: 100%; } /* GALLERY STYLES */ /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .gallerycontainer { background: url(http://img373.imageshack.us/img373/7420/camerafl6.gif) no-repeat 68px 22px; position: relative; } .gallerycontainer .text { font-size: 11px; margin-bottom: 10px; } .gallerycontainer a,.gallerycontainer a:link,.gallerycontainer a:visited { font-weight: normal; } .gallerycontainer li, .gallerycontainer ul { list-style-type: none; margin: 0; padding: 0; } .thumbnail img { border: 2px solid #333; margin: 0 0 20px 0; width: 48px; height: 36px; } .thumbnail:hover { background-color: transparent; } .thumbnail:hover img { border: 2px solid #999; } .thumbnail span { position: absolute; left: -2000px; visibility: hidden; text-decoration: none; } .thumbnail:hover span img { margin: 22px 0 5px 0; border: 2px solid #333; height: 360px; width: 480px; } .thumbnail:hover span { visibility: visible; top: 0; left: 68px; z-index: 50; font-size: 12px; color: #333; } /* NAVIGATION STYLES */ #navlist { padding: 3px 0; margin: 0 0 10px 0; border-bottom: 1px solid #333; font: bold 12px Verdana, sans-serif; text-align: right; } #navlist li { list-style: none; margin: 0 5px 0 0; display: inline; } #navlist li a { padding: 3px 0.5em; border: 1px solid #333; border-bottom: none; background: #999; outline: none; text-decoration: none; } #navlist li a:link { color: #fff; } #navlist li a:visited { color: #fff; } #navlist li a:hover { color: #fff; background: #333; border-color: #333; border-bottom: 1px solid #333; } #navlist li a#current { color: #666; background: #fff; border-bottom: 1px solid #fff; } /* GLOBAL STYLES */ a,a:link,a:active,a:visited { color: #666; outline: none; font-weight: bold; text-decoration: none; } a:hover { color: #999; text-decoration: none; } h1 { background: url(http://img373.imageshack.us/img373/3378/h1um0.gif) no-repeat 0% 0%; font-weight: normal; font-size: 23px; color: #999; margin: 0 0 0 20px; padding: 0 0 0 35px; height: 35px; } h2 { font-weight: normal; font-size: 17px; margin: 0 0 10px 0; } .copyright { margin: 5px 5px 0 0; font-size: 11px; text-align: right; }
</style>
HTML KOD
<div class="copyright">Created by <a href="http://www.guckanweb.tr.gg" _fcksavedurl="http://www.guckanweb.tr.gg" _fcksavedurl="http://www.guckanweb.tr.gg">ğolozlu</a> | Credits: <a href="http://www.guckanwebtasarim.tr.gg/" _fcksavedurl="http://www.guckanwebtasarim.tr.gg/" _fcksavedurl="http://www.guckanwebtasarim.tr.gg/">Tasarım</a>, <a href="http://cssmenu.de.tl/" _fcksavedurl="http://cssmenu.de.tl/" _fcksavedurl="http://cssmenu.de.tl/">css menü</a> <a href="http://www.cssjavascript.tr.gg/" _fcksavedurl="http://www.cssjavascript.tr.gg/" _fcksavedurl="http://www.cssjavascript.tr.gg/">cssjavascript</a></div>
<h1>CSS Image Gallery</h1>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html" _fcksavedurl="index.html" _fcksavedurl="index.html" id="current">Gallery 1</a></li>
<li><a href="#sitename" _fcksavedurl="#sitename" _fcksavedurl="#sitename">Gallery 2</a></li>
<li><a href="#sitename" _fcksavedurl="#sitename" _fcksavedurl="#sitename">Gallery 3</a></li>
<li><a href="#sitename" _fcksavedurl="#sitename" _fcksavedurl="#sitename">Gallery 4</a></li>
<li><a href="#sitename" _fcksavedurl="#sitename" _fcksavedurl="#sitename">Gallery 5</a></li>
</ul>
</div>
<div id="maincontainer">
<div id="contentwrapper">
<h2>Gallery 1 - Gallery Description</h2>
<div class="gallerycontainer">
<div class="text"><img height="8" width="50" alt="Arrow" src="http://img136.imageshack.us/img136/6256/arrowmp2.gif" />BÜYÜK HALİNİ GÖRMEK İÇİN RESMİN ÜZERİNE GELİNİZ!</div>
<ul> <!-- Start Gallery --> <!-- Image 1 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><span><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><br />
Resim 1... </span></a></li>
<!-- Image 2 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img225.imageshack.us/img225/680/image02xu8.jpg" /><span><img alt="" src="http://img225.imageshack.us/img225/680/image02xu8.jpg" /><br />
Reim 2... </span> </a></li>
<!-- Image 3 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><span><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><br />
Resim 3... </span> </a></li>
<!-- Image 4 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img156.imageshack.us/img156/9898/image01ho7.jpg" /><span><img alt="" src="http://img156.imageshack.us/img156/9898/image01ho7.jpg" /><br />
Resim 4... </span></a></li>
<!-- Image 5 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img225.imageshack.us/img225/680/image02xu8.jpg" /><span><img alt="" src="http://img225.imageshack.us/img225/680/image02xu8.jpg" /><br />
Resim 5... </span> </a></li>
<!-- Image 6 -->
<li><a href="#thumb" class="thumbnail"><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><span><img alt="" src="http://img132.imageshack.us/img132/2516/image03oe4.jpg" /><br />
Resim 6... </span> </a></li>
<!-- End Gallery --> </ul>
</div>
</div>
</div>