pic+link

[lemur]

Hi there,

I need put on website few image in one line with some link under the pic. What is the best code for that. List item ?? How to put link item exactly under the pic?

[twiss]

<div><img/><a>bla bla</a></div>

... should do that. Unless you mess it up with css :)

[matricol]

give some float left style to the links

[lemur]

i done this in this way:

<div class="hs_1">
             <ul class="product">
             <img src="img/boots_womens_small.jpg" width="80" height="60" alt="womens boots" />
         	 </ul>
              <li class="product_link">
              <a href="#">Womens Suede Boots</a>
               </li>
               </div>
                           
                           
                           
                             <div class="hs_1">
                             <ul class="product">
                          <img src="img/shoes_mens_small.jpg" width="80" height="60" alt="mens small shoes" />
                          </ul>
                           <li class="product_link">
                    <a href="#">Mens Shoes</a>
                    </li>
                    </div>

but still, it doesnt display each div in one line; and another importent thing is link below pic must be same width like pic.

thanks for any hint.

[pixelsoul]

Just a quick rough example of the way I might approach it:

<style>
.hs_1{border:solid 1px;padding:5px;margin:0px;width:800px}
.hs_1 ul{display:block;list-style:none;}
.hs_1 ul li{float:left;border:solid 1px #CCC;max-width:150px;text-align:center;padding:10px;margin:5px;}
.hs_1 ul li img{border:solid 3px #000;}
.hs_1 ul li p{line-height:17px;}
.hs_1 ul li a{text-decoration:none;}
.clear{clear:both;}
</style>

<div class="hs_1">
	<ul class="product">
		<li>
			<img src="img/boots_womens_small.jpg" width="80" height="60" alt="womens boots" />
			<p><a href="#">Womens Suede Boots</a></p>
		</li>
	</ul>
	<ul class="product">
		<li>
			<img src="img/boots_womens_small.jpg" width="80" height="60" alt="womens boots" />
			<p><a href="#">Womens Suede Boots</a></p>
		</li>
	</ul>
	<ul class="product">
		<li>
			<img src="img/boots_womens_small.jpg" width="80" height="60" alt="womens boots" />
			<p><a href="#">Womens Suede Boots</a></p>
		</li>
	</ul>
	<ul class="product">
		<li>
			<img src="img/boots_womens_small.jpg" width="80" height="60" alt="womens boots" />
			<p><a href="#">Womens Suede Boots</a></p>
		</li>
	</ul>
	<div class="clear"></div>
</div>

[Saranya2011]

I like that div concept.. I will try that links.. Thanks..

[drjohn]

Lemur, you code is totally invalid - you have an empty ul (no li inside it), with instead an img inside it.
Then you have li tags not inside an ul.

Please learn some basic html before posting code like that.

[floatingDivs]

drjohn,

Are you sure it's invalid? Appears to work fine for me. Please consider actually TESTING the code before spewing the kind of crap you did above.

Thanks!

P.S. I'm just joking! :P

[ko ko]

You'll see does your code invalid or not. http://validator.w3.org/.
As drjohn state, you must have some basic knowledge with HTML, CSS and their standards which are standardizing by W3C.

[lemur]

pixelsoul, thanks man, well done. working:)