View Full Version : Resolved CSS Button/Menu

Nov 5th, 2010, 01:23 PM
I've been stumped as to how I should code this menu in html/css. The fact that the text is right aligned, and the placement of the button background throws me off.

Can anyone help me out/guide me in the right direction?

Nov 5th, 2010, 02:09 PM
I would cry if that was in a design given to me :p

Just have an unordered list inside a container with a fixed width and text-align:right;

Your list item that is then selected, can have a selected class to show the background.

I am really not a fan of negative margins but could those be used in this case, to move the main background left and the menu items up.. ugh!

Nov 5th, 2010, 04:24 PM
You shouldn't need any negative margins (which, as digitalclubb points out, can be troublesome and are to be avoided). Just because the list "appears" to end at the edge of the background image doesn't mean that it needs to.

Try something like this (works in IE7 and FF3 at least):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
ul{background:transparent url(bg.png) no-repeat left top;height:179px;padding-top:20px;}
li a{display:block;height:40px;padding-right:40px;text-align:right;text-decoration:none;width:57px;}
li a:hover{background:transparent url(link_bg.png) no-repeat right top;}
<li><a href="#nogo">home</a></li>
<li><a href="#nogo">about</a></li>
<li><a href="#nogo">services</a></li>
<li><a href="#nogo">contact</a></li>
<li><a href="#nogo">links</a></li>

I attached the very rough images I used from your attachment. This will need fine-tuning for your needs, but this is the general method I would suggest.

Nov 5th, 2010, 11:57 PM
Thanks Rowsdower!, your method was exactly what I was looking for :)