Adobe Community: trying to use li's instead of floats

Currently Being Moderated

1. Shan-Dysigns,

Apr 17, 2012 6:18 PM in reply to broomeGirl

Report

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

2. broomeGirl,

Apr 17, 2012 7:34 PM in reply to Shan-Dysigns

Report

The problem is that the background images are only showing up on the li and not the li a

Also any margins or paddings dont seem to be target in the li a

Thanks

|

Mark as:

Currently Being Moderated

3. Shan-Dysigns,

Apr 17, 2012 8:04 PM in reply to broomeGirl

Report

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

|

Mark as:

Currently Being Moderated

4. broomeGirl,

Apr 17, 2012 8:17 PM in reply to Shan-Dysigns

Report

I tried your suggestion, but it makes no difference. Thanks for trying. It seems like by placing the classes to the li a's no styling is being applied.. I thought I may have a space in wrong place and tried a space after the a but no luck there either. Starting to pull my hair out on this one, I know its something simple.

#logos li a .youtube{

width: 230px;

height:40px;

margin: 0 0 0 10px;

background: url(../images/home/YouTube_Bg.png) no-repeat;}

|

Mark as:

Currently Being Moderated

5. Shan-Dysigns,

Apr 17, 2012 8:29 PM in reply to broomeGirl

Report

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

6. broomeGirl,

Apr 17, 2012 8:32 PM in reply to Shan-Dysigns

Report

Thanks

|

Mark as:

Currently Being Moderated

7. Shan-Dysigns,

Apr 17, 2012 8:49 PM in reply to Shan-Dysigns

Report

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

8. Shan-Dysigns,

Apr 17, 2012 8:58 PM in reply to Shan-Dysigns

Report

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

9. broomeGirl,

Apr 17, 2012 9:38 PM in reply to Shan-Dysigns

Report

Wow thankyou so much! So very much appreciated!

This is what I have now

and if I could just get the green tick down a bit inline with the other logos, I would be zen lol.

CSS

#logos {

width:900px;

height:60px;

background-color:#6CC;}

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

margin: 0 0 0 0;

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;

margin: 0 0 0 0;

padding:20px 0 5px 46px;

background: url(../images/home/tourism_tick.png) no-repeat;}

|

Mark as:

Currently Being Moderated

10. broomeGirl,

Apr 17, 2012 9:39 PM in reply to Shan-Dysigns

Report

I was just trying something different from an article I read regarding how we can use ul for styling and sometimes floats are overused

|

Mark as:

Currently Being Moderated

11. Shan-Dysigns,

Apr 17, 2012 9:52 PM in reply to broomeGirl

Report

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:

Currently Being Moderated

12. broomeGirl,

Apr 17, 2012 10:58 PM in reply to Shan-Dysigns

Report

Hi yes there was a reason for this madness

If I have the same padding the image is cut off. So much for using unordered lists. Think I will stick to floats. Now that I am sooo close can you advise as to why this image is being cut off when all images are exactly the same size and I am sure the fonts are different for the Australian Tourism.

|

Mark as:

Currently Being Moderated

13. broomeGirl,

Apr 18, 2012 8:07 AM in reply to Shan-Dysigns

Report

Thanks I have it all sorted now

The last li .. i changed to inline-block and my widths were too wide for their container and made the background images a tad smaller and voila!!! Thanks for all your help.

|

Mark as:

Dreamweaver

trying to use li's instead of floats

Apr 17, 2012 6:10 PM

More Like This

Bookmarked By (0)

Answers + Points = Status