logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-18-2012, 01:06 AM   #1
WotNow
WotNow's Avatar
 
Join Date: Mar 2009
Location: Broome Western Australia
Posts: 225
Default trying to use li's instead of floats

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

__________________
Free Photoshop Tutorials
http://www.kimberleywebdesign.com.au...Tutorials.html
WotNow is offline   Reply With Quote
Old 04-18-2012, 09:17 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

So what is the problem exactly?
Corrosive is offline   Reply With Quote
Old 04-18-2012, 11:33 AM   #3
WotNow
WotNow's Avatar
 
Join Date: Mar 2009
Location: Broome Western Australia
Posts: 225
Default

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



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!
__________________
Free Photoshop Tutorials
http://www.kimberleywebdesign.com.au...Tutorials.html
WotNow is offline   Reply With Quote
Old 04-18-2012, 12:01 PM   #4
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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.
Corrosive is offline   Reply With Quote
Old 04-18-2012, 12:17 PM   #5
WotNow
WotNow's Avatar
 
Join Date: Mar 2009
Location: Broome Western Australia
Posts: 225
Default

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

__________________
Free Photoshop Tutorials
http://www.kimberleywebdesign.com.au...Tutorials.html
WotNow is offline   Reply With Quote
Old 04-18-2012, 01:08 PM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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
Corrosive is offline   Reply With Quote
Old 04-18-2012, 03:04 PM   #7
WotNow
WotNow's Avatar
 
Join Date: Mar 2009
Location: Broome Western Australia
Posts: 225
Default

Many thanks
__________________
Free Photoshop Tutorials
http://www.kimberleywebdesign.com.au...Tutorials.html
WotNow is offline   Reply With Quote
Old 04-18-2012, 03:59 PM   #8
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by WotNow View Post
Many thanks
You are welcome as ever Amanda. Hope all is good with you by the way
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:03 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com