Skip navigation
Currently Being Moderated

trying to use li's instead of floats

Apr 17, 2012 6:10 PM

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;}

 

 
Replies
  • Currently Being Moderated
    Apr 17, 2012 6:18 PM   in reply to broomeGirl

    So what is the problem? You don't seem to have any margin on a.facebook. Is that spacing what you are talking about?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:04 PM   in reply to broomeGirl

    You need to use display: block; on your a.selectors in order for background images to appear.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:29 PM   in reply to broomeGirl

    Well, give me a minute. You weren't clear in your original post, so let me copy your code and fix it visually.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:49 PM   in reply to Shan-Dysigns

    Actually, I see what your problem(s) are:

     

    #logos li a.youtube

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

    is wrong - you don't have the class of youtube on the a element, you have it on the li

    so it needs to be

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

    #logos li .youtube

     

    same for facebook

    #logos li .facebook

     

    since you don't have a link on the last one, #logos li .tourismTick seems correct (notice the space between "li" and ".tourism"), but if you have background images used for href links, they will have to be display: block

     

    #logos li {

         display:inline-block;}

     

    You should be ok with just display: inline;

     

    If that doesn't solve everything, send me your images so I can reconstruct.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 8:58 PM   in reply to Shan-Dysigns

    Actually, I'm pretty sure the above isn't the total answer. Honestly, I'm not too sure what you are trying to accomplish visually. Instead of trying to piggyback off your code, send me the images and I will do it from scratch. Why are you trying to stay away from floats to begin with?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 9:52 PM   in reply to broomeGirl

    Assuming all your images are the same size, check your padding. They are all different. Since your font is the same size, your top and bottom paddings should be the same. tourismTick has more padding than the others. The first 2 links have a total of 10px padding for top and bottom combined. The last one has a total padding of 25px top and bottom.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points