...

View Full Version : CSS to set UL LI Inline-Block



jarv
01-08-2013, 08:11 PM
I cannot seem to set my UL LI to be inline?!

here is my HTML:


<ul class="3products">
<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1" /></a></li>
<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2" /></a></li>
<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3" /></a></li>
</ul>

here is my CSS


#main .3products {width:948px; height:227px;}
#main .3products li { width:308px; height:227px; display: inline-block; margin-right:8px; }
#main .3products li.last { margin-right:0px; }


and here is the site:

http://www.jbiddulph.com/touchtile/products.HTML#

What am I doing wrong?

Please help?

Excavator
01-08-2013, 08:41 PM
Hello jarv,
Pretty sure .3products is invalid. http://webdesign.about.com/cs/css/qt/tipcssidnames.htm

Try .threeProducts instead maybe.

See the links in my signature about validating.

sunfighter
01-08-2013, 08:58 PM
I dropped the .3products also and the display: inline-block; in favor of display: inline;. This is what I used:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main li { width:308px; height:227px;margin-right:8px;display:inline;}
#main li.last { margin-right:0px; }
</style>
</head>

<body>
<div id="main">
<ul class="3products">
<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1"></a></li>
<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2"></a></li>
<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3"></a></li>
</ul>
</div>
</body>
</html>

jarv
01-08-2013, 09:29 PM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum