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

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

  1. pelsar macrumors regular

    Apr 29, 2008
    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: (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

    May 6, 2008
    Start with a basic unordered list:

    <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>
    Then just style the links like this:

    	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:
  3. pelsar thread starter macrumors regular

    Apr 29, 2008
    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