• Locked
1 reply [Last post]
Sun, 2012-01-22 12:29
jemes
Offline
Last seen: 1 year 17 weeks ago
Regular
Joined: 2005-11-10
Posts: 26
Points: 2

I'm trying to display a list of inline buttons but want the whole button to be a link not just the text.

I've tried adding disply: block but this seems to break in ie7.

I was just wondering what the best way of do this is or if theres a better way of setting up the code below with floats maybe?

Thanks

Jemes

<ul class="splash-buttons">
    <li class="new"><a href="#">new</a></li>
    <li class="design"><a href="#">design</a></li>
    <li class="map"><a href="#">map</a></li>
    <li class="work"><a href="#">works</a></li>
</ul>
 
 
ul.splash-buttons{padding:430px 0 50px 0; border:0px solid red; width:860px; margin:0 auto;}
ul.splash-buttons li{margin:0 15px; padding:15px 40px; border:1px solid #fff; list-style-type:none; display:inline; font-size:1.50em;  width:150px;}
ul.splash-buttons li a:link{color:#fff; text-decoration:none;}
ul.splash-buttons li a:hover{color:#ccc; text-decoration:none;}		
ul.splash-buttons li.new{background-color:#001947;}
ul.splash-buttons li.design{background-color:#284f36;}				
ul.splash-buttons li.map{background-color:#86888d;}
ul.splash-buttons li.work{background-color:#792e3d;}

Top
Tags:
Sun, 2012-01-22 16:01
#1
gary.turner
gary.turner's picture
Offline
Last seen: 1 day 5 hours ago
Moderator
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 8761
Points: 2704

Make the list items

Make the list items inline-block, and make the a elements block.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Top
  • Locked