tags:

views:

63

answers:

2

I'm trying to space out the items in this menu with the exact same number of pixels. In the 90s, most web developers I knew either used spaces or a spacer gif. These work, but they feel like bad hacks to me. There must be a better way to do this in 2009! I'm more of a back-end coder, so I've been out of the loop for a while. I'd appreciate any help...

<div class="menu">
  <a href="#">Item 1</a> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: (replaced the semicolon with a colon so that these would show up)
  <a href="#">Item 2</a> <img src="spacer.gif" />
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</div>
+1  A: 

You could throw an id/class on the anchor element and have right padding.

<div class="menu">
  <a href="#">Item 1</a id="bar"> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
  <a href="#">Item 2</a> 
  <a href="#">Item 3</a>
  <a class="last" href="#">Item 4</a>
</div>

<style type="text/css">
#bar { padding-right:5px; }
</style>

If you want to go for something more generic, on all the anchors but the last:

.menu a { padding:0 5px 0 0; }
.menu a.last { padding-right:0; }
meder
Like this, right? <a href="#" style="padding-right: 50;">Item 1</a>It doesn't work.
Eric the Red
Don't forget the unit now. 50 what? inches? feet? pixels?
meder
And inline css is a no no, go for external :)
meder
Gah! I forgot the units! works perfectly, thanks!
Eric the Red
An attribute on a closing tag? Is that a really dirty hack or simply a mistake (I hope the latter one)?
0xA3
A: 

Use CSS, of course!

Specifically, since you asked, apply styles to your anchor elements. Something like:

div.menu { width: 480px; } 

div.menu a{
  margin:0;
  display:block;
  float:left;
  width:120px;
}

might do what you want. As an added bonus, the whole block will act as a link, so you'll get behavior more like a button than a text link, which is probably what you're after since it's a menu. Setting an explicit width on the .menu div will keep your floats from wrapping if the window is too narrow.

timdev
By setting which values on which elements? I am using CSS all over the site, but am unaware of a CSS feature that will let me do what I'm looking for.
Eric the Red