Web Design Forums

John Good · 15-05-2007, 06:39

hello,

I drop a line to you guys before I turn completely crazy.

I've got a list of links, let's say 200px width.
text height is 12px, and every link has it's own width (text width)
I have a background color under every link.
ok

Now I want the color background to be 36 px high, with text centered in the middle of this block.

When the link is hovered, I want the bacground to be of 200px width.

simple ? I just can't get it working...
I made an image as my english is as weak as my coding skills.

mx · 15-05-2007, 06:43

code would be nice...

djeglin · 15-05-2007, 06:55

Ok, so I *think* this should do the trick

Code:

li a { height: 36px; line-height: 36px; width: auto; background: #CCC; }

li a:hover {width: 200px; background: #F00; }

Hope that works for ya!

David

John Good · 15-05-2007, 06:59

HTML

HTML Code:


<ul id="main_navigation">
	<li><a href="#"><span>list item</span></a></li>
	<li><a href="#"><span>another list item</span></a></li>
	<li><a href="#"><span>list item</span></a></li>
	<li><a href="#"><span>another list item</span></a></li>	etc..
</ul>

CSS

HTML Code:


#main_navigation{
  width: 200px;
}
#main_navigation li{
  font: bold 12px Helvetica, Arial, sans-serif;
  line-height: 36px;	
} 
#main_navigation li a{
  background: #CCC;
  padding: 12px;
  text-transform: uppercase;
}

nothing special really...

djeglin · 15-05-2007, 07:01

John... work the styles in and see if it does what you're looking for... I havent had a chance to test it so dont know

John Good · 15-05-2007, 07:07

Quote:

Originally Posted by djeglin

John... work the styles in and see if it does what you're looking for... I havent had a chance to test it so dont know

sorry, I posted the code before I saw your post.

I've tried your way. It does not work...

John Good · 15-05-2007, 08:00

topic closed, I'm definitely right brained...

herkalees · 15-05-2007, 08:23

Why is there an unnecessary <span> element in your html? (At least, it appears you're not targeting it with styles).

weldo · 15-05-2007, 08:24

i don't understand what you're trying to do anyway ??

just have the hover state fill up the entire width ??

should be easy enough i think ..

djeglin · 15-05-2007, 11:09

Ok, so you've closed the topic, but I've revies my code now that I've had a chance to play with it - It works now just fine, at least on IE7 and FF (havent got ie6 here so cant test that one for you, but you can do a workaround if something is wrong on that one)

Here's my example:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="all">
ul { width: 200px; }ul li { width: 200px; list-style: none; clear: left; }
ul li a { display: block; margin-bottom: 8px; width: auto; float: left; height: 36px; line-height: 36px; font-size: 0.7em; font-family:Arial, Helvetica, sans-serif; background: #CCC; padding: 0 8px 0 8px; }
ul li a:hover { width: 200px; background: #F00; }
</style>

</head>

<body>

<ul>
	<li><a href="#">This is Link 1</a></li>
	<li><a href="#">This might be Link 2</a></li>
	<li><a href="#">Maybe this could be Link 3</a></li>
</ul>

</body>
</html>

Hope that helps man

David

PS sorry about the shoddy css formatting... I was just getting it done quickly... I'm sure you can rearrange it till you're happy with it

pgo · 15-05-2007, 11:42

display: block; AND float: left;

That's redundant. Float left looks unnecessary to me.

Quote:

Originally Posted by herkalees

Why is there an unnecessary <span> element in your html? (At least, it appears you're not targeting it with styles).

Image replacement, perhaps?

djeglin · 15-05-2007, 11:55

Tried it without and the second and third list items were pushed right by the width of the first item for some reason. Probably another way around it, but this way works as well as any other

John Good · 15-05-2007, 13:15

Quote:

Originally Posted by pgo

Image replacement, perhaps?

yes ! I wanted to have the same effect, wether the image shows or not.
how crazy I am...

the topic was closed as I solved the problem another way !

anyway, thanks for your efforts djeglin. this can be usefull, this effect can be quite nice if used in appropriate way.

John Good · 15-05-2007, 13:16

btw : pgo, what's this new avatar ?

tomr2006 · 17-05-2007, 22:51

Should show us the result of whatever it was you were trying to do, I was a bit confused

15-05-2007, 06:39	#1 (permalink)
John Good + Join Date: May 2005 Location: Tropical Networks Posts: 1,426	simple list headache hello, I drop a line to you guys before I turn completely crazy. I've got a list of links, let's say 200px width. text height is 12px, and every link has it's own width (text width) I have a background color under every link. ok Now I want the color background to be 36 px high, with text centered in the middle of this block. When the link is hovered, I want the bacground to be of 200px width. simple ? I just can't get it working... I made an image as my english is as weak as my coding skills. Attached Thumbnails __________________ Fonts are like cologne: A bad choice speaks louder than a good one. Justin Feinstein

15-05-2007, 06:43	#2 (permalink)
mx fucksocks™ Join Date: Jun 2005 Location: in the boosh Posts: 1,615	code would be nice... __________________

15-05-2007, 06:55	#3 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 525	Ok, so I think this should do the trick Code: li a { height: 36px; line-height: 36px; width: auto; background: #CCC; } li a:hover {width: 200px; background: #F00; } Hope that works for ya! David __________________ My signature sucks.

15-05-2007, 07:01	#5 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 525	John... work the styles in and see if it does what you're looking for... I havent had a chance to test it so dont know __________________ My signature sucks.

15-05-2007, 08:00	#7 (permalink)
John Good + Join Date: May 2005 Location: Tropical Networks Posts: 1,426	topic closed, I'm definitely right brained... __________________ Fonts are like cologne: A bad choice speaks louder than a good one. Justin Feinstein

15-05-2007, 08:23	#8 (permalink)
herkalees Semantics, yay. Join Date: Nov 2005 Location: Salem, Massachusetts Posts: 1,106	Why is there an unnecessary <span> element in your html? (At least, it appears you're not targeting it with styles).

15-05-2007, 08:24	#9 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 5,273	i don't understand what you're trying to do anyway ?? just have the hover state fill up the entire width ?? should be easy enough i think .. __________________ fuck signatures

15-05-2007, 11:55	#12 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 525	Tried it without and the second and third list items were pushed right by the width of the first item for some reason. Probably another way around it, but this way works as well as any other __________________ My signature sucks.

15-05-2007, 13:16	#14 (permalink)
John Good + Join Date: May 2005 Location: Tropical Networks Posts: 1,426	btw : pgo, what's this new avatar ? __________________ Fonts are like cologne: A bad choice speaks louder than a good one. Justin Feinstein

17-05-2007, 22:51	#15 (permalink)
tomr2006 Registered User Join Date: May 2007 Posts: 19	Should show us the result of whatever it was you were trying to do, I was a bit confused

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search