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
  • 119 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A short, practical fix: anchor tags are inline by default, so a background on the link will only cover the text box. Make each navigation link a block-level element that fills the nav bar height and add horizontal padding so the hover background covers the full vertical strip and the expected width. If the goal is to change the entire bar when the mouse is anywhere inside it, apply the hover to the container instead (as suggested). Also match hover with :focus so keyboard users get the same visual cue (echoing ’s accessibility point).

Example (apply to the posted layout):

#navigation { height: 36px; }

#navigation a {
  display: block;
  height: 100%;         /* fill the nav height */
  line-height: 36px;    /* vertical centering */
  padding: 0 12px;      /* horizontal clickable area */
  text-decoration: none;
}

#navigation a:hover,
#navigation a:focus {
  background: url(NavBGHover.png) no-repeat;
}

Troubleshooting and best practices: keep the focus outline or replace it with a clear alternative so keyboard users are not left without feedback; prefer semantic markup (nav > ul > li > a) for multiple links; use CSS gradients or background-size for responsive behavior instead of fixed image slices; and fix small typos in the posted CSS (for example, margin bottom should be margin-bottom, positon should be position). For reference on pseudo-classes and focus handling see MDN :hover and MDN :focus.

Recommended Answers

All 3 Replies

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.