best method? CSS and a series of buttons.....

Discussion in 'Web Design and Development' started by pelsar, Mar 25, 2009.

  1. pelsar macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #1
    I'm looking for the best method:

    I have a series of buttons (images with rollovers), that follow one after the other.

    usually i simple go with tables
    example: http://www.correlix.com/about.html (top left)
    ________________

    is there a better method using DIVs? if i have simple one pict after the other, won't various browsers screw that up?
     
  2. &Ingonyama macrumors member

    Joined:
    May 6, 2008
    #2
    Start with a basic unordered list:

    HTML:
    <ul class="side_nav">
    	<li class="current"><a href="#">List element 1</a></li>
    	<li><a href="#">List element 2</a></li>
    	<li><a href="#">List element 3</a></li>
    </ul>
    
    Then just style the links like this:

    Code:
    ul.side_nav
    {
    	margin: 0 0 20px 0; /* bottom margin */
    	list-style: none; /* remove default bullets */
    }
    
    /* take off the default margin/padding */
    
    ul.side_nav li
    {
    	margin: 0;
    	padding: 0;
    }
    
    ul.side_nav li a
    {
    	padding: 0 0 0 10px; /* add 10px to the right side of the a link so theres room for the arrow to fit */
    }
    
    /* apply background arrow to hovered list and current class */
    
    ul.side_nav li a:hover, ul.side_nav li.current a
    {
    	background: url("arrow.gif") no-repeat 0 3px;
    }
    
    
    Also see:
    http://www.w3schools.com/css/default.asp
    http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
     
  3. pelsar thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #3
    wow....thats why i asked....

    figuring there was a method that never occurred to me, that gets around IE (I'm really growing to hate IE more and more as i've started doing a bit of javascripting along with the CSS stuff)
     

Share This Page