WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Styling ul menu properly

Reply
  Thread Tools Display Modes
Old 18th October 11, 01:46 PM   #1
Raapwerk
WLC Member
 
Join Date: Oct 2011
Posts: 5
Default Styling ul menu properly

I'm designing a website where I wanted to make the menu mainly with html and css. Now my problem is that I can't get it to work right. What I want to achieve is to create 'button-like' links, but the color of the links only changes when hovering over de line of itself. Same problem with clicking; to use the link, you'll have to click the itself. I think this isnt intuitive enough. Maybe some real hardcore professionals could help me.

You can find the menu here: http://bit.ly/n70YLs

Is what I want possible using ? If yes, how? And if no, what should I use to make this button-like menu?

Thanks!

EDIT: Haha, sorry guys, figured it out. Ended up using line-height. First I was using padding to make the list-items bigger, but then the hovering didnt work well. Now when you hover over the list-item you hover over the link as well.

Last edited by Raapwerk; 18th October 11 at 02:33 PM. Reason: Solved
Raapwerk is offline   Reply With Quote
Old 18th October 11, 03:15 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Styling ul menu properly

set the anchor elements to display: block with 100% height and width.
chrishirst is offline   Reply With Quote
Old 19th October 11, 11:33 AM   #3
Raapwerk
WLC Member
 
Join Date: Oct 2011
Posts: 5
Default Re: Styling ul menu properly

Would that be a better solution than using line-height?
Raapwerk is offline   Reply With Quote
Old 19th October 11, 12:47 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Styling ul menu properly

Yep, as it makes the anchor element fit the content area of it parent both horizontally and vertically, line height would only fill vertically.
chrishirst is offline   Reply With Quote
Old 19th October 11, 12:53 PM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Styling ul menu properly

By the way, using display: value; does NOT change the inherent properties of the element simply how it looks.
chrishirst is offline   Reply With Quote
Old 20th October 11, 07:27 PM   #6
Raapwerk
WLC Member
 
Join Date: Oct 2011
Posts: 5
Default Re: Styling ul menu properly

Thanks for the help Just a few problems still:
1. How do I vertically-align the text then?
2. Do I still need to assign display:block? If I delete that rule the width and height do not change

Thanks!
Raapwerk is offline   Reply With Quote
Old 21st October 11, 10:06 AM   #7
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Styling ul menu properly

Easiest way to vertical align now, is to use display: table-cell; and vertical-align: middle; on the parent element
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:06 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.