The Cave of Dragonflies forums

Go Back   The Cave of Dragonflies forums > Websites > Webmaster Help and Discussion

Notices

Reply
 
Thread Tools
  #1  
Old 05-02-2013, 05:44 AM
effervesce's Avatar
effervesce effervesce is offline
bulletproof loneliness, at best
 
Join Date: February 27, 2011
Location: slřwtřwn
Age: 16
Posts: 1,433
Pronoun: she/her/hers
effervesce is an unknown quantity at this point
Send a message via Skype™ to effervesce
Posticon Angry CSS: help meeeee with menu items

so I have a menu

and I have li:hover so that when I hover over it the background color lights up

but the color goes only from the left edge of the link text to the right edge

here, have a wonderful text-graphic thing

Quote:
|<--->|Text here |
That <---> is the space I want highlighted. The |Text here | part is the part that is highlighted, and the last | is the right edge of the menu. (Yeah, left aligned.)

I've tried expanding li:hover's width, tried going left: 50%, and so forth.

How do I fix this? I looked at <span> although frankly right now I'm just frustrated >:(
__________________
basically gone idk

tumblr: http://alone-on-an-aeroplane.tumblr.com

((I'm there more often than I'm here so yeah))
Reply With Quote
  #2  
Old 05-02-2013, 01:40 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default Re: CSS: help meeeee with menu items

The li element has a left margin by default - that's probably what's creating the empty space. Set margin:0; on the lis and give them a padding instead.

Although I would recommend giving the list item no margins or padding and instead giving the links inside the list items display:block and the padding you want. That way the actual clickable part extends all the way across, too.
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #3  
Old 05-06-2013, 05:32 PM
effervesce's Avatar
effervesce effervesce is offline
bulletproof loneliness, at best
 
Join Date: February 27, 2011
Location: slřwtřwn
Age: 16
Posts: 1,433
Pronoun: she/her/hers
effervesce is an unknown quantity at this point
Send a message via Skype™ to effervesce
Default Re: CSS: help meeeee with menu items

Quote:
Originally Posted by Butterfree View Post
The li element has a left margin by default - that's probably what's creating the empty space. Set margin:0; on the lis and give them a padding instead.

Although I would recommend giving the list item no margins or padding and instead giving the links inside the list items display:block and the padding you want. That way the actual clickable part extends all the way across, too.
I think that #leftmenu li is set to display:block already! I'll try setting it to margin:0 and see how it goes, then.

Right now the clickable part is all of the highlighted-across-bit, so.

Thanks!
__________________
basically gone idk

tumblr: http://alone-on-an-aeroplane.tumblr.com

((I'm there more often than I'm here so yeah))
Reply With Quote
Reply

Thread Tools

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 09:01 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Pokémon, Pikachu and all other Pokémon characters © Nintendo, Game Freak and Creatures Inc. The Cave of Dragonflies, content, styles, etc. © Butterfree/Dragonfree/antialiasis.
Forum now hosted by Eevee's HQ.