CSS display attribute options
I have a container that includes several thumbnails. I used to do div from all thumbs up, but it was ineffective. now i include all diff tags in tags and include them in one class.
in class i attributes:
.thumb-wrap {
float: left;
display: block;
margin: 5px;
}
.thumb {
padding: 4px;
}
.thumb-img {
width: 100px;
height: 75px;
border: 1px solid #999;
padding: 5px;
background-image:url(slide-bg.jpg);
}
html:
<div class="thumb-wrap">
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
<a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/> </a>
</div>
however, thumbs appear in the center. I do not want it. I want them to be aligned to the left. please, help.
0
a source to share
3 answers
You also don't need a thumb class on a link, or a thumb-img on images if you wrap them in a thumb div.
Just use the parenting relationship:
.thumb-wrap {
float: left;
display: block;
margin: 5px;
}
.thumb-wrap a {
padding: 4px;
}
.thumb-wrap img {
width: 100px;
height: 75px;
border: 1px solid #999;
padding: 5px;
background-image:url(slide-bg.jpg);
}
This will keep your HTML cleaner.
+2
a source to share
Instead of using a div to hold the thumbs up, it's much more semantical to use a list:
<ul class="thumbs">
<li><a href="#"><img src="img0-thumb0.jpg" /></a>
<li><a href="#"><img src="img1-thumb1.jpg" /></a>
<li><a href="#"><img src="img2-thumb2.jpg" /></a>
<li><a href="#"><img src="img3-thumb3.jpg" /></a>
</ul>
Then you don't need classes on every anchor and every image in the list, because you can target this way:
ul.thumbs li a {
/* anchor styles here */
}
ul.thumbs li a img {
/* image styles here */
}
+1
a source to share