-
1. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 6:18 PM (in response 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?
-
2. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 7:34 PM (in response to Shan-Dysigns)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
-
3. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 8:04 PM (in response to broomeGirl)You need to use display: block; on your a.selectors in order for background images to appear.
-
4. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 8:17 PM (in response to Shan-Dysigns)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;}
-
5. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 8:29 PM (in response 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.
-
6. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 8:32 PM (in response to Shan-Dysigns)Thanks
-
7. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 8:49 PM (in response 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.
-
8. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 8:58 PM (in response 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?
-
9. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 9:38 PM (in response to Shan-Dysigns)Wow thankyou so much! So very much appreciated!
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;}
-
10. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 9:39 PM (in response to Shan-Dysigns)I was just trying something different from an article I read regarding how we can use ul for styling and sometimes floats are overused
-
11. Re: trying to use li's instead of floats
Shan-Dysigns Apr 17, 2012 9:52 PM (in response 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.
-
12. Re: trying to use li's instead of floats
broomeGirl Apr 17, 2012 10:58 PM (in response to Shan-Dysigns)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.
-
13. Re: trying to use li's instead of floats
broomeGirl Apr 18, 2012 8:07 AM (in response to Shan-Dysigns)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.


