www.webdeveloper.com
Results 1 to 7 of 7

Thread: Links and blocks of colour

  1. #1
    Join Date
    Jul 2006
    Location
    Staffordshire, England
    Posts
    113

    Links and blocks of colour (update!)

    Hi,

    I'm currently working on a website that requires the navigation to be at the top of the page, horizontally next to the main logo.

    The idea is that there are 5 links that are in a horizontal list.
    Now, each link, on rollover, needs to change to a different colour background...
    When 'active', the link needs to retain it's background colour.

    Something else I need, is to specify a size for the link 'area'.... and the whole area to change colour, not just the "highlight" colour of the text.

    For example, if it was being designed using tables, I'd want the whole cell to change colour, not just the highlighting of the text.

    I say this because I need the link text to be approx 20px, with it aligned to the bottom of a 100px 'box' - with the box being at the very top of the screen, and the whole 'box' changing colou.

    Does that make sense?

    Thanks in advance for any help offered.
    Last edited by AnotherDesigner; 07-17-2006 at 10:34 AM.
    check out polar bear and penguin - currently completely offline

    For the record, I'm using
    Firefox 2.0 / 1280 x 1024 resolution / Windows XP / 56kb dial-up

  2. #2
    Join Date
    Feb 2005
    Location
    Worcester, UK
    Posts
    30
    I think this is the sort of thing you are after.

    Index page
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    
    <head>
    
    
    <title>index</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
    	<meta http-equiv="Content-Script-Type" content="text/javascript">
    	<meta http-equiv="Content-Style-Type" content="text/css">
    	<meta name="robots" content="all">
    
    	<link rel="stylesheet" type="text/css" href="style.css">
    
    
    
    </head>
    
    
    <body>
    
    
    
    		<div class="contents">
    
    			<div class="nav">
    		<ul>
    			<li class="navlink"><a class="activelink">Home</a></li>
    			<li class="navlink"><a href="product.asp" class="link">Product</a></li>
    			<li class="navlink"><a href="orders.asp" class="link">Orders</a></li>
    			<li class="navlink"><a href="testimonials.asp" class="link">Testimonials</a></li>
    			<li class="navlink"><a href="links.asp" class="link">Links</a></li>
    		</ul>
    		<br clear="left">
    			</div>
    		
    			
    </div>
    
    </body>
    
    </html>

    CSS (there will be some bits in there not required that need filtering)
    Code:
    a.link
    	{
    		font-size: 10pt;
    		font-family: Trebeuchet, Georgia, Verdana, sans-serif;
    		width: 118px;
    		height: 23px;
    		display: inline;
    	}
    
    a.link:hover
    	{
    		background: rgb(226,226,226);
    		display: block;
    	}
    
    a.activelink
    	{		
    		background: rgb(226,226,226);
    		font-size: 10pt;
    		font-family: Trebeuchet, Georgia, Verdana, sans-serif;
    		width: 118px;
    		height: 23px;
    		display: block;
    	}
    
    	a.link {text-decoration: none;}
    	a.link:link {color: #777777;}
    	a.link:visited {color: #777777;}
    	a.link:hover {color: black;}
    
    	a.activelink {text-decoration: none;}
    	a.activelink:link {color: black;}
    	a.activelink:visited {color: black;}
    
    
    
    h1
    	{
    		position: absolute;
    		top: 25px;
    		left: 100px;
    		font-family: Vivaldi, "Monotype corsiva", sans-serif;
    		font-size: 48pt;
    		color: rgb(128,128,128);
    		font-weight: bold;
    		padding-right: 15px;
    	}
    span
    	{
    		font-size: 16pt;
    		font-family: vivaldi, Trebeuchet, Georgia, Verdana, sans-serif;
    		font-weight: bold;
    		line-height: 22pt;
    	}
    h2
    	{
    		font-size: 14pt;
    		font-family: vivaldi, Trebeuchet, Georgia, Verdana, sans-serif;
    		margin: 38px;
    		line-height: 22pt;
    	}
    h5
    	{
    		font-size: 10pt;
    		font-family: Trebeuchet, Georgia, Verdana, sans-serif;
    		margin: 10px;
    		line-height: 18pt;
    	}
    p
    	{
    		font-size: 10pt;
    		font-family: Trebeuchet, Georgia, Verdana, sans-serif;
    	}
    	
    
    
    
    
    div.contents
    	{
    		position: relative;
    		margin-top: 20px;
    		border: none;
    		height: auto;
    	}
    
    div.nav
    	{
    		width: 680px;
    		height: auto;
    		left: 50%;
    		margin-left: -340px;
    		position: relative;
    		top: 10px;
    		border: none;
    	}
    
    li.navlink
    	{
    		float: left;
    		display: inline;
    		position: relative;		
    		width: 118px;
    		height: 23px;
    		text-align: center;
    		border: solid 1pt silver;
    		list-style-type: none;
    		line-height: 20pt;
    	}

  3. #3
    Join Date
    Jul 2006
    Location
    Staffordshire, England
    Posts
    113
    How would I change the code in that so that in the navigation, Link 1 had background-color to Link 2 3 and 4...? So each Link (i.e. NavLink 1, NavLink 2, NavLink 3 and NavLink 4) in the main navigation all have different background colour to each other?

    I'm assuming its the class or ID or something like that?
    check out polar bear and penguin - currently completely offline

    For the record, I'm using
    Firefox 2.0 / 1280 x 1024 resolution / Windows XP / 56kb dial-up

  4. #4
    Join Date
    Feb 2005
    Location
    Worcester, UK
    Posts
    30
    If i understand you correctly you could rename the navlink in the index page to navlink1, navlink2 .....etc but you would also need to set the activelink on each page as individuals ie activelink1, activelink2.....


    You then need to set the background color in the css for each one created (both navlink1 navlink2... and activelink1 activelink2 etc.


    you will also need to set the class of the links (i.e a class="link1") as above in the index and then in the css set a.link1:hover, a.link2:hover

    I am not sure this is the best way to achieve what you are asking but think it works for what I understand you are trying to do.

  5. #5
    Join Date
    Jul 2006
    Location
    Staffordshire, England
    Posts
    113
    I'll give that a try, thanks green'n'white...

    Any ideas how I align the text to the bottom of the box? I presume simply "text-align: center bottom" would work?
    check out polar bear and penguin - currently completely offline

    For the record, I'm using
    Firefox 2.0 / 1280 x 1024 resolution / Windows XP / 56kb dial-up

  6. #6
    Join Date
    Jul 2006
    Location
    Staffordshire, England
    Posts
    113

    Beginning to bug me now!

    I've tried doing as you said green'n'white...

    Problem I've got now is in Firefox, the top of the list isn't flush with the top of the page.
    I've set margins of body and the header div to 0px, but there's still a gap of approx 10px across the top of the screen when I install a list into the code - however, it's not there when it's just plain text or a graphic in there.
    How do I get rid of the gap above the (horizontal) list??
    check out polar bear and penguin - currently completely offline

    For the record, I'm using
    Firefox 2.0 / 1280 x 1024 resolution / Windows XP / 56kb dial-up

  7. #7
    Join Date
    Feb 2005
    Location
    Worcester, UK
    Posts
    30
    Well im sure it is not the correct way to do it but you could try giving the 'li' a margin-top value, try 0px, or possibly even a -*px figure although i am not sure what this would do to the view in IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles