PDA

View Full Version : Css- Help



janitorC7
Nov 5, 2006, 03:09 PM
why on this page I'm designing. when I have an a:over 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


janitorC7
Nov 5, 2006, 04:04 PM
proably would have been a good idea for me to post a link

http://fairwayreversemortgages.com/Untitled-1.html
nightelf
Nov 5, 2006, 05:30 PM
This my posts

http://forums.macrumors.com/showthread.php?t=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.
janitorC7
Nov 5, 2006, 07:22 PM
This my posts

http://forums.macrumors.com/showthread.php?t=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.

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

<!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>
epochblue
Nov 6, 2006, 10:56 AM
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;
}