Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Css- Help

janitorC7

janitorC7

macrumors 6502a
Original poster
Feb 10, 2006
640
20
California
why on this page I'm designing. when I have an a:eek:ver on the home link.

Does only the word get effected instead of the entire div.'

and why does home show up as blue and underlined

Thanks
 
nightelf said:
This my posts

https://forums.macrumors.com/threads/246430/

The <A hover> will only affect the word, because is an inline tag. You need to specify in the CSS to treat the A as a block.

Check the CSS and HTML I wrote in your previous post and they should work correctly.
Click to expand...

Ok. thanks as helpfull as that was I'm still really lost. I'm new to this CSS idea and need some more help. I'm using Dreamweaver 8. Please HELP. Below is all of my code

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrap {
	margin: auto;
	width: 812px;
}
#wrap #Topnav #logo {
	float: left;
	height: 49px;
	width: 269px;
	background-image: url(/images/topbar.jpg);
}
#wrap #Topnav {
	height: 49px;
	width: 812px;
	margin-bottom: 10px;
}
#wrap #body {
	float: left;
	width: 543px;
	padding: 4px;
}
#wrap #nav {
	float: right;
	width: 261px;
}
#wrap #body #image {
	background-image: url(/images/Untitled-6.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 245px;
	width: 521px;
	background-color: #000900;
	margin-bottom: 20px;
}
#wrap #nav #NAVTITLE {
	font-family: Futura;
	background-color: #726969;
	color: #d8d5d5;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 24px;
	position: inherit;
}
#wrap #nav #NAVLINKS {
	color: #726969;
	background-color: #D8D5D5;
	font-family: Futura;
	font-size: 18px;
	position: relative;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: thick;
	border-bottom-width: thick;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #D8D5D5;
	border-right-color: #D8D5D5;
	border-bottom-color: #D8D5D5;
	border-left-color: #D8D5D5;
}
#wrap #nav #NAVLINKS div a:hover {
	color: #D8D5D5;
	background-color: #726969;
}
#footer {
	clear: both;
}
-->
</style>
</head>

<body>
<div id="wrap">
  <div id="Topnav">
    <div id="logo"></div>
  </div>
  <div id="body">
    <div id="image"></div>
    <p><a href="#"></a></p>
  </div>
  <div id="nav">
    <div id="NAVTITLE">
      <div align="center"> NAVIGATION</div>
    </div>
    <div id="NAVLINKS">
      <div align="center"> <a href="#">HOME</a></div>
    </div>
    <div id="NAVLINKS">
      <div align="center">OVERVIEW</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">PROS/CONS</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">FAQ</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">DATA</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">MISSIONS</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">CONTACT</div>
    </div>
    <div id="NAVLINKS">
      <div align="center">LEGAL</div>
    </div>
  </div>
</div>
</body>
</html>
 
Here's my shot at this:
There are two kinds of elements in HTML - inline and block.

An anchor (a) tag is an inline element. A div, for example, is a block element.

An inline element is just the text, nothing else. A block-level element is a containing element (think, p-tag or div-tag). When you style a block level element, you're styling everything within it as well.

Since you have the hover pseudo-class on the inline element (the a tag), you're only affecting the text, not the surrounding area.

You have two possible solutions to this problem -

1) make the a-tag a block level element by adding this rule to the a tag (in your css file) in question -- display: block; All the other a tags should inherit that. Be aware this could create other problems if you're currently designing around a being inline.

2) apply your hover pseudo-class to the div instead. Be aware that only non-IE browsers (save IE7) recognize the hover on non-a elements.

CSS can be tricky, but once you get comfortable with it, can be extremely powerful as well.



Edit: as it pertains to above, these are your options:

1)
#wrap #nav #NAVLINKS div a:hover {
display: block;
color: #D8D5D5;
background-color: #726969;
}

or 2)
#wrap #nav #NAVLINKS div:hover {
color: #D8D5D5;
background-color: #726969;
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back