dreamweaver8: rollover

[calebm12]

I am just now learning how to use dreamweaver. I am attempting to create a web page as i learn. I have a bar going across my screen that has links in it. I am using a CSS style sheet. I have added a navigation:hover option. My question is that when i preview the page in a browser there is always a space at the top of the bar to where the rollover effect takes effect. Unless i shrink the text and shrink the height of the bar this remains. How do i set the size of the rollover effect so that it takes up the entire height of the row in the table. Does this make sense. I could really use some hlep. Thanks in advance..

Caleb

[EC]

hi and welcome. you're more likely to get help if you share your css and html code, a live preview if you've got one.

[tZ]

Are you talking about the default padding and margin?

If so you can get rid of the default padding and margin by adding this the top of your style sheet


body {
margin: 0;
padding: 0;
}


otherwise I would recommend posting the mark-up.

[chris_bcn]

tbh - what you want there is:

*{
margin:0;
padding:0
}

but the universal whitespace reset is not a silver bullet by any means - it can lead to really bloated CSS depending on the site

[calebm12]

if i use the code you specified. does that sytle apply for everything....its not a sytle i assign?


here is my css code
.navigation {
font-family: Verdana, sans-serif;
font-size: 14px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #267400;
display: inline;
padding: 15px;
width: 700px;
height: 25px;
margin-bottom: 0px;
margin-top: 0px;
}

.navigation:hover {
font-family: Verdana, sans-serif;
font-size: 14px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #C69803;
display: inline;
padding: 15px;
width: 700px;
height: 25px;
margin-bottom: 0px;
margin-top: 0px;
}


i tried throwing in the margin-bottom/top, to see if it would fix the problem. it didnt. the only thing that worked was when i lowered the font from 16 to 14 and changed the row height to be smaller. for this case, it looks fine. but i am curious as to how i can have my rollover effect take up the entire space of the row. does this make any sense. i am brand spankin new here.
p.s. anyone got a suggestion for a good book on dreamweaver.??

thanks a bunch.
caleb

[chris_bcn]

What you want is a good book on HTML and CSS rather than Dreamweaver

Check out the books and blogs at this thread
http://www.graphicdesignforum.com/forum/showthread.php?t=17370

In order to help, we really need to see your HTML as well

[chris_bcn]

This: .navigation:hover won't do anything in IE

what exactly are you trying to do? do a rollover on an entire div? or is it navigation you're trying to do

[tZ]

This book is excellent:

http://www.amazon.com/Build-Your-Right-Using/dp/0975240293/sr=8-1/qid=1156970714/ref=pd_bbs_1/103-3539395-8691813?ie=UTF8

This is the the first four chapters that you can read online in the book above:
http://www.sitepoint.com/article/html-css-beginners-guide