Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
background list issue
Old 11-03-2009, 11:47 AM background list issue
Skilled Talker

Posts: 68
Trades: 0
I am trying to create a list like this -


When I indent the list, then when I do a hover to make the background solid all the way across, it shows some of the blue at the left of the hover state. I can't figure out how to make the hover background of white to span the whole length. Any suggestions. Thanks.
kayla2 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 11-03-2009, 11:50 AM Re: background list issue
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,515
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
can't debug pictures

but you make the anchor elments display:block so they fill the parent container.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 11-03-2009, 12:13 PM Re: background list issue
Skilled Talker

Posts: 68
Trades: 0
This is the css I have for the main list
Code:
#leftNavigation {
    
    color: #0079c2;
    list-style:none;
    margin-top:20px;
    padding-top:10px;
    background-color: #dbecd9;
}

#leftNavigation ul{
    list-style:none;

}
#leftNavigation li {
        list-style:square;
        margin-left:20px;        

     
}
    
#leftNavigation a {
    color: #0079c2;
    text-decoration:none;
    display:block;
    line-height:20px;
    
  
}

#leftNavigation a:hover {
    background-color:#ffffff;
    color:#000000;
    
}
and then for the list -
Code:
<div id="leftNavigation">
             <ul>
                <li><a href="#">Mission and Vision</a></li>
             </ul>
          </div>
but then when you hover, you get a blue margin to the left of the square list image.
kayla2 is offline
Reply With Quote
View Public Profile
 
Old 11-05-2009, 10:11 AM Re: background list issue
Mad182's Avatar
Skilled Talker

Posts: 54
Name: Madars
Location: Latvia
Trades: 0
I don't think you can do it using list-style, but maybe i'm wrong.
I would use images: http://exs.lv/mad182/lisample/test.html
__________________
There's no place like 127.0.0.1

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
Mad182 is offline
Reply With Quote
View Public Profile Visit Mad182's homepage!
 
Old 11-06-2009, 11:56 AM Re: background list issue
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
There is NO NEED to use images - which are not recommended for accessibility reasons - it can be done with CSS.

Kayla, can we see ALL the code - or a URL?
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 11-07-2009, 08:36 AM Re: background list issue
Mad182's Avatar
Skilled Talker

Posts: 54
Name: Madars
Location: Latvia
Trades: 0
As I said - maybe I'm wrong, but I really would like to see how it can be done w/o images
__________________
There's no place like 127.0.0.1

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
Mad182 is offline
Reply With Quote
View Public Profile Visit Mad182's homepage!
 
Old 11-08-2009, 11:11 AM Re: background list issue
Skilled Talker

Posts: 72
Location: singapore
Trades: 0
why don't u use
Quote:
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>

</li>
<li>

</li>
</ul>
__________________

Please login or register to view this content. Registration is FREE
zelllibin is offline
Reply With Quote
View Public Profile Visit zelllibin's homepage!
 
Old 11-08-2009, 12:09 PM Re: background list issue
Brian07002's Avatar
Defies a Status

Posts: 2,138
Name: ...
Location: ...
Trades: 0
by chance are you using &nbsp; in your code to do the spacing? Try that instead of hitting your space bar like this. (I held my spacebar down to do that gap)
if you use the &nbsp;&nbsp;&nbsp; like that until you have the right amount of space, maybe that will fix the issue? No guarantee's though.
__________________
Made2Own

Please login or register to view this content. Registration is FREE
Brian07002 is offline
Reply With Quote
View Public Profile
 
Old 11-08-2009, 01:14 PM Re: background list issue
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
As I said - maybe I'm wrong, but I really would like to see how it can be done w/o images
Sorry, I thought you meant using images for the menu items.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to background list issue
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.30150 seconds with 12 queries