Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    OK....

    I have:

    <div id="rightcol">
    <ul>
    <li><a href="hi">Download vCard</a></li>
    <li>Windows Live</li>
    <li class="last"><a href="mailto:xxxxxx@gmail.com">mailto:</a></li>
    </ul>
    </div>

    The list is 120px wide. I want the links in the list to have a roll over background colour (#FFFFCC), which I have achieved but I want the background to be the same width of the list, not just the link text....

    Please assist me!!

    Thank You

  2.  

  3. #2
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    You mean the same width as the blocks the text sit in?

    I think you need to change <a> to display:block instead of inline, then float left the <a>'s , give them a height and use them to control your rollover effect.
    So I would estimate tht the style you have attributed to <li> should be moved to <a>.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Man ... that is the most confusing question ever

    Ok ... after re-reading this post 5 times I think I get it ... meh ... it's early ok

    Do you mean something like this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
    
    <head>
    	<title>Some title</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
    	<style type="text/css">
    	#topmenu {
    		padding-top: 10px;
    		margin-bottom: 20px;
    	}
    
    	#topmenu ul {
    		list-style: none;
    		display: inline;
    	}
    
    	#topmenu ul li {
    		float: left;
    		position: relative;
    		margin-right: 5px;
    	}
    	
    	#topmenu ul li a {
    		text-decoration: none;
    		display: block;
    		font-size: 17px;
    		letter-spacing: 1px;
    		font-weight: bold;
    		color: #fff;
    		padding: 0 20px;
    		background-color: #060;
    	}
    
    	#topmenu ul li a:hover {
    		background-color: #900;
    		
    	}
    	</style>	
    </head>
    
    <body>
    
    <div id="topmenu">
    	<ul>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    	</ul>
    </div>
    
    </body>
    </html>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I think what Rob B wants is a list where some things are links and others are static.

    To achieve that, you will not need floats (floats are for making lists horizontal instead of vertical), but you will want the a to display block: [minicode]#rightcol ul li a {display: block;}[/minicode]
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    sorry i have not been on since posting this question.

    i have found an example of what sort of thing i am after, look at the roll over effect on the NavBar on this site http://www.salford.ac.uk which uses lists...

    Thanks

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Well ... it's basically what I gave you. Just remove #topmenu ul li {... } and change some of the styles.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
    
    <head>
    	<title>Some title</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
    	<style type="text/css">
    	#topmenu {
    		padding-top: 10px;
    		margin-bottom: 20px;
    	}
    
    	#topmenu ul {
    		list-style: none;
    		display: inline;
    	}
    
    	#topmenu ul li a {
    		width: 200px;
    		text-decoration: none;
    		display: block;
    		font-size: 17px;
    		letter-spacing: 1px;
    		font-weight: bold;
    		color: #000;
    		padding: 0 20px;
    		border-bottom: 1px solid #ccc;
    	}
    
    	#topmenu ul li a:hover {
    		background-color: #ddd;
    		
    	}
    	</style>	
    </head>
    
    <body>
    
    <div id="topmenu">
    	<ul>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    		<li><a href="/">menu</a></li>
    	</ul>
    </div>
    
    </body>
    </html>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Member
    Join Date
    Jan 2007
    Location
    Manchester, UK
    Posts
    49
    Member #
    14674
    Thanks - that works a treat.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com