Member Avatar for CuddlyBunny

So, here's my problem... I made a horizontal Navigation with a link over it, and I want the background of my navigation to change when I hover over the Link... But only the background which is used by the Text gets changed... But I want to have the whole background changed in the height... And in the width the space which is used by the Text...

So here is my CSS code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #000000;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 }
#header {
 color: #333;
 background: #E2FF96;
 height: 160px;
 width: 922px;
 margin: 30px 0px 0px 0px;
 }

#navigation {
 background:url(NavBG.png);
 height:36px;
 width:922px;
}

#navigation a:hover {
 background:url(NavBGHover.png);
 height:36px;
}


#faux {
 background: url(left_main_right_coloumn.gif);
 margin bottom: 10px;
 overflow: auto;
 width: 100%
}

#leftcontainer {
 color: #333;
 height: 300px;
 width: 195px;
 margin: 10px 10px 10px 10px;
 padding: 0px;
 float: left;
 display: inline;
 }


#maincontainer {
 float: left;
 color: #333;
 width: 460px;
 margin: 10px 13px;
 padding: 0px;
 positon: relative;
 display: inline;
}

#rightcontainer {
 color: #333;
 height: 300px;
 width: 195px;
 margin: 10px 10px 10px 10px;
 float: right;
 position: relative;
 display: inline;
}

And here my HTML 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">
<head>
<title>Test LayOut</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<div id="wrapper">
<div id="header">Head IMG</div>
<div id="navigation"><a href="http://www.google.de/" >LINK LINK</a></div>
<div id="faux">
<div id="leftcontainer"></div>
<div id="maincontainer">TextText</div>
<div id="rightcontainer"></div>
</div>
</div>

I am a total beginner in CSS and I wanna learn more, so if you have criticism on my CSS then just say it ;)

  • 3 Contributors
  • 3 Replies
  • 110 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for MidiMagic

First of all, I wish the hover attribute had never been invented. I hate pages that change when you move the mouse without clicking. They make the page not accessible to the disabled.

Your problem is that the a:hover pseudo attribute attribute works only with the a (anchor) tag. You can not control where it works. It affects all anchor tags on the page.

Try putting a padding style on the a tag, rather than the div wrapper.

Member Avatar for CuddlyBunny

Hmm, okay, I will try that one... Thanks for your help... And I just think it's cool to have a hover... Well, everyone to his taste ;)

Member Avatar for almostbob 
#navigation:hover { background:url(NavBGHover.png); height:36px; }

Every unstyled link has a hover attribute, the default is underline
user browsers have the option to
underline links -always -never -onmouseover
the part where it becomes very annoying is where the designer removes the default actions when styling the page. changing the background image only won't cause an issue with screen readers, (well not with mine, I wont see the image anyway) please don't change other behaviours, or link colors. doing so makes the site ureadable to the visully impaired

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.