4 replies [Last post]
Township Rebel
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-09
Posts: 3
Points: 0

Hi,

I'm having trouble styling a list the way i would like to. I'm looking for the final result to look like:


(When hovering over each item the grey turns a darker shade of grey)

So far, i have the boxes/text the correct color, but i can't seem to resize them? No matter where i put a width attribute, they remain the same size. Ideally everything would be in ems, i think it should work out at 16em width per "box".

Any ideas?

Thanks for looking.

HTML









	Menu
	
	






<div id="wrapper">

<div id="nav">
	<ul>
		<li><a href="index.html" title="Go to homepage" rel="nofollow">Home</a></li>
		<li><a href="portfolio.html" title="See my portfolio" rel="nofollow">Portfolio</a></li>
		<li><a href="bio.html" title="View my bio" rel="nofollow">Bio</a></li>
		<li><a href="contact.html" title="Contact me" rel="nofollow">Contact</a></li>
	</ul>
</div>

</div>





CSS

*, html					{
					margin: 0;
					padding: 0;
					border: 0;
					}

body					{
					font: 12px verdana, arial, helvetica, sans-serif;
					background-color: #cccccc;
					}

#wrapper				{
					width: 65em;
					max-width: 100%;
					background-color: #ccaacc;
					}


#nav					{
					width: 100%;
					background-color: #ff0000;
					}

#nav ul					{
					list-style: none;
					}

#nav li					{
					display: inline;
					}

#nav a					{
					font: 1.4em verdana;
					text-align: center;
					letter-spacing: 0.3em;
					text-decoration: none;
					color: #ffffff;
					background-color: #999999;
					}

#nav a:hover				{
					background-color: #666666;
					}

Township Rebel
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-09
Posts: 3
Points: 0

The HTML came out funny

The HTML came out funny first time. Not sure what i'm doing wrong but around that list code is a div with the id "wrapper" and inside that a div with the id "nav", so like...

html
body

div id=wrapper
div id=nav

ul
li
li
li
li
/ul

/div
/div

/body
/html

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 47 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Try looking at one of the

-removed-

Because Its far too early and I misread the entire post.

karlanz
Offline
Regular
New Zealand
Last seen: 12 years 26 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2007-11-06
Posts: 12
Points: 0

Hi there, I'm new at this

Hi there,
I'm new at this too, so don't take what I say as gospel truth, but I tried using float: left; width and blocks and this worked for me. The code I used was :

#nav {
width: 100%;
background-color: #ff0000;
}

#nav ul {
list-style: none;
text-align: center;
}

#nav li {
float: left;
display: block;
width: 20em;
background-color: #999999;
border-right: 1px solid white;
}

#nav a {
font: 1.7em verdana;
letter-spacing: 0.3em;
text-decoration: none;
color: #ffffff;
}

#nav a:hover {
display: block;
text-align: center;
background-color: #666666;
}

I added a white border, and text-aligned in the #nav ul rather than in the li items.

Hope this helps get you moving in the right direction at least a little ~

Township Rebel
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-09
Posts: 3
Points: 0

Yes! It works! Thank you

Yes! It works!

Thank you karlanz!