Forum Moderators: not2easy
Hi all
I'm newish to CSS and I'm really confused with what's going to here.
I have a simple <ul> list which has a image in each of the <li>, above each list I have a heading.
The list items are floated right so the images are horizontal across the page , the problem is I need the heading and the images to line up on the left.
At the moment I can't get the headings and the first image to line up on the left
Any help would be greatly appreciated.
<html>
<head><title>morePhotos</title></head>
<style type="text/css">
.gallery li{
width:55px;
height:41px;
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#fff;
padding:3px;
text-align:center;
position:relative;
float:left;
display:inline;
margin:5px;
}
.gallery li:hover{
border-color:gray;
}
.gallery{
overflow:hidden;
margin:0;
padding:0;
margin-top:30px;
}
.gallery ul{
border:0px;
margin:0px;
}
.gallery h5{
color:gray;
font-family:Verdana, sans-serif;
}</style>
<body>
<div class="gallery">
<h5>Gallery 1</h5>
<ul>
<li><a href="#"><img src="image/1.jpg" /></a></li>
<li><a href="#"><img src="image/2.jpg" /></a></li>
<li><a href="#"><img src="image/3.jpg" /></a></li>
<li><a href="#"><img src="image/4.jpg" /></a></li>
</ul>
</div>
<div class="gallery">
<h5>Gallery 2</h5>
<ul>
<li><a href="#"><img src="image/3.jpg" /></a></li>
<li><a href="#"><img src="image/4.jpg" /></a></li>
<li><a href="#"><img src="image/5.jpg" /></a></li>
<li><a href="#"><img src="image/6.jpg" /></a></li>
</ul>
</div>
<div class="gallery">
<h5>Gallery 3</h5>
<ul>
<li><a href="#"><img src="image/5.jpg" /></a></li>
<li><a href="#"><img src="image/6.jpg" /></a></li>
<li><a href="#"><img src="image/7.jpg" /></a></li>
<li><a href="#"><img src="image/8.jpg" /></a></li>
</ul>
</div>
</body>
</html>
[edited by: eelixduppy at 10:48 pm (utc) on Feb. 3, 2009]
[edit reason] No personal URL, please [/edit]
clear: left"
clear:rightclear:both
