Background colour rollover?

crackafaza · #1 Apr 3rd, 2008, 10:41

Hi,

I have a vertical navigation menu, and on this navigation menu I have a number of links, which I want the background colour to change when rolled over.

Currently I have this in place, but because of different sized texts the padding makes that one wider, so how can I change the width of the rollover background so that they are all the same?

Thanks
Cracka

unitedcraig · #2 Apr 3rd, 2008, 10:47

is it an image or just colour that is changing?

crackafaza · #3 Apr 3rd, 2008, 10:51

Just a colour.

Why would it be easier if it was an image? because I could easily add that, just it has bugged me for a while, so just wanted to know how it is done.

Jack Franklin · #4 Apr 3rd, 2008, 10:51

Can I see your code?

You could try giving the li display:block.

But usually its best to apply padding. If I can see your code I can explain further what I mean lol.

crackafaza · #5 Apr 3rd, 2008, 10:56

Hi,

ok here is my code, I am using wordpress here by the way, so it has some php in it.

Code: Select all

.sidebar{
 float: left;
 width: 240px;
 margin: 0 0 0 10px;
 font-family: arial, helvetica, sans-serif;
 display: inline;
}
.sidebar ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-size: 11px;
}
.sidebar ul a{
 color: #FFFFFF;
 font-weight: bold;
 padding-top: 3px;
 padding-bottom: 3px;
}
.sidebar ul a:hover {
 color: #FFFFFF;
 font-weight: bold;
 background: url(images/sidebar_roll.gif); 
 width: 200px;
  
}
.sidebar ul li{
 margin: 10px 0 0;
}
.sidebar ul li#search form input#s{
 margin: 7px 10px 0 30px;
 border: 0;
 font-family: arial, helvetica, sans-serif;
 background-color: transparent;
 color: #fff;
}
.sidebar ul li h3{
 padding: 7px 10px;
 font-size: 11px;
 text-transform: uppercase;
 color: #ccc;
 background: #333 url(images/bg_sidebar_title.gif) no-repeat; 
}
.sidebar ul ul{
 padding: 5px 10px 10px;
 line-height: 18px;
 background: #404040 url(images/bg_sidebar_block.gif) no-repeat left bottom;
}
.sidebar ul ul li{
 margin: 0;
 padding: 3px 0 0;
}
.sidebar ul ul ul{
 padding: 0 10px 0;
 background-color: transparent;
 background-image: none;
}

And also the php code....

PHP: Select all


 
<div class="sidebar">
  <ul>
   <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : // begin primary sidebar widgets ?>
  
   <?php wp_list_categories('show_count=0&hierarchical=1&title_li=<h3>' . __('Categories') . '</h3>') ?> 
   <li id="archives">
    <h3><?php _e('Archives') ?></h3>
    <ul>
     <?php wp_get_archives('type=monthly') ?>
    </ul>
   </li>
   <?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>') ?>
   <li id="meta">
    <h3><?php _e('Meta'); ?></h3>
    <ul>
     <?php wp_register() ?>
     <li><?php wp_loginout() ?></li>
     <?php wp_meta() ?>
    </ul>
   </li>
   <?php endif; ?>
  </ul>
 </div>

Ok, any help on this would be muchly appreciated.

Thanks
Cracka

Jack Franklin · #6 Apr 3rd, 2008, 16:57

Ok. Give this a try, changes are in bold

Code: Select all

.sidebar ul a{
 color: #FFFFFF;
 font-weight: bold;
 padding: 3px 5px;
 display: block;
}

You also need to add a:link. Add this code:

Code: Select all

.sidebar ul li a:link {
background-color: your colour;
color: text colour;
add any more effects for the link here...
}

Give it a try.

crackafaza · #7 Apr 4th, 2008, 10:22

Thanks alot for that Jack, that is working now

Cheers!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background colour change.	A800	JavaScript Forum	4	Jun 6th, 2008 12:16
Background colour for the whole coloumn	Deagle	Web Page Design	5	May 19th, 2008 14:53
IE 6 background colour problem	jdrawmer	Web Page Design	2	Feb 6th, 2008 13:50
Change Background colour based on input	smudge618	JavaScript Forum	2	Feb 6th, 2008 11:55
is there anyway to blend from one background colour to anoth	benbacardi	Web Page Design	1	Apr 23rd, 2004 17:47

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Background colour rollover?