PDA

View Full Version : trying to use li's instead of floats


WotNow
04-18-2012, 02:06 AM
Hi everyone,

I am trying to get away from using floats when I dont have to but have run into a problem. Appreciate your input.

HTML

<div id="logos">
<ul>
<li class="youtube"><a href="http://youtu.be/?????????">Watch us on YouTube</a></li>

<li class="facebook"><a href="http://www.????????????????">Join us on Facebook</a></li>

<li class="tourismTick">Australian Tourism Accreditation</li>
</ul>
</div><!--END of logos-->

CSS

#logos {
width:900px;
height:40px;
background-color:#6CC;}

#logos li {
display:inline-block;}

#logos li a.youtube{
width: 230px;
height:40px;
margin: 0 0 0 10px;
background: url(../images/home/YouTube_Bg.png) no-repeat;}

#logos li a.facebook{
width: 230px;
height:40px;
background: url(../images/home/Facebook_Bg.png) no-repeat;}

#logos li.tourismTick{
width: 360px;
height:40px;
margin: 0 0 0 100px;
padding:10px 0 0 46px;
background: url(../images/home/tourism_tick.png) no-repeat;}

http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Forums/Picture20.png

Corrosive
04-18-2012, 10:17 AM
So what is the problem exactly?

WotNow
04-18-2012, 12:33 PM
I have done some more fiddling with this since I posted here earlier today and the problem was that the background images which are all identical in height were not displaying with the li a.

I realised that I had applied the class to the li rather than the a, I then used display:block on the li a and this worked to a point where I now have them all lined up in a row with background images but the last image which is just li is cut off, see here

http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Forums/Picture15.png

HTML

<div id="logos">
<ul>
<li class="youtube"><a href="http://youtu.be/??????????">Watch us on YouTube</a></li>


<li class="facebook"><a href="http://www.facebook.com/???????????">Join us on Facebook</a></li>

<li class="tourismTick">Australian Tourism Accreditation</li>
</ul>
</div><!--END of logos-->

CSS

#logos {
width:900px;
height:60px;}


#logos li.youtube{
display:inline-block;
width: 200px;
height:40px;
margin: 10px 0 0 30px;
padding:10px 0 0 40px;
background: url(../images/home/YouTube_Bg.png) no-repeat;}

#logos li a {
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#logos li.facebook{
display:inline-block;
width: 200px;
height:40px;
padding:10px 0 0 46px;
background: url(../images/home/Facebook_Bg.png) no-repeat;}

#logos li.tourismTick{
display:inline;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 360px;
height:40px;
padding:5px 0 5px 46px;
background: url(../images/home/tourism_tick.png) no-repeat;}

I read in an article that designers over use "floats" and that the same results can be achieved using unordered and ordered lists. Now that I have come so far with twiddling with this, I would like to get it perfect and so to get the last li to show its background image without being cut off would be great.

Appreciate any input, thanks!

Corrosive
04-18-2012, 01:01 PM
You have different top and bottom padding values on #logos li.tourismTick than you have on the others and you have not set the inline-block to the display attribute. I'd imagine that is it.

WotNow
04-18-2012, 01:17 PM
Yes was playing with the padding on the li for the tourism background but even setting the padding the same as the others makes no difference and setting the li to inline-block produces this

http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Forums/Picture16.png

Corrosive
04-18-2012, 02:08 PM
OK, you have your div containing the ul set to 900px width. Your widths for list items are; 200px, 200px and 340px. You also have padding and margins (left and right) at a total of 162px. You do the maths and suggest what might be making the third logo drop beneath ;)

WotNow
04-18-2012, 04:04 PM
Many thanks :D

Corrosive
04-18-2012, 04:59 PM
Many thanks :D

You are welcome as ever Amanda. Hope all is good with you by the way :)