Help with CSS image Gallery
found simple css image gallery. i'm having trouble adjusting needs. ideally want make each small image bigger , have 3 or 4 on each line. want make enlarged image bigger. width need around 550px.
<style type="text/css">
/* *********************************************
* notice must stay intact legal use.
* script created free css menus.
* visit: www.freecssmenus.co.uk more css.
* visit our free online menu creator.
************************************************ */
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
}
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
}
#pg ul li { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
}
#pg ul li img { display:block;
width:50px;
height:50px;
border:0;
}
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#aabb33;
}
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
}
#pg ul li span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
}
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="css rollover map" />
<span>
<strong>
css map.</strong>
css image swap on rollover/hover. simple display of css shows versatility of cascading style sheets. remember animation 100% user accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="large css button" />
<span>
<strong>
css big button.</strong>
css buttons can large , extravagant like. using 1 image can create simple css buttons this. button still hyperlink not image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="css opacity" />
<span>
<strong>
css opacity menu.</strong>
can use styles change opacity of image. creates interesting effects when creating menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="free mp3 downloads: unborn records" />
<span>
<strong>
unborn records </strong>
download free mp3 music ipod or mp3 player. download free music unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="visit trix dog @ www.catandtwodogs.co.u" />
<span>
<strong>
cat , 2 dogs </strong>
visit 3 pets @ www.catandtwodogs.co.uk . picture of trix, he's border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="a picture of colours in swirl" />
<span>
<strong>
a swirl of colours. </strong>
picture of colours in swirl effect.</span>
</a>
</li>
</ul>
</div>
please put on server, , we'll glad take look
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment