PDA

View Full Version : CSS Hover Padding width help!


andy384
06-01-2005, 02:16 AM
Ok I am using a CSS a:hover command

The problem is I want the hover WIDTH to go completely to the edges of the box without efffecting the width of the box itself. When I adjust the padding it only makes the box too big. Mainly because the words are different sizes.

The .html is attached and here is the relevant .css:

/* CSS Document */
}
#news2 {
width: 213px;
height: 372px;
margin-top: 5px;
background-color: #A0AFCB;
color: #FFFFFF;
padding: 4px;
}
#news2 a:link, #news2 a:visited, #news2 a:active {
background-color: #A0AFCB;
padding: 6px;
text-decoration: none;
color: #FFFFFF;
height: 10px;
width: 213px;
margin-top: 5px;
}
#news2 a:hover {
background-color: #F7CB33;
text-decoration: none;
color: #FFFFFF;
padding: 6px;
height: 10px;
width: 50px;
}
h6 {
text-align: center;
font-size: 165%;
font-weight: normal;
color: #FFFFFF;
font-style: normal;
padding: 6px;
background-color: #A0AFCB;
}

Someone please help me out with this!

domedia
06-01-2005, 02:57 PM
}
#news2 {
First of all maybe you need to fix this. You can't start a CSS rule with '}'

andy384
06-01-2005, 08:57 PM
Domedia sorry about that

I was cutting and pasting the .css code so that is the end of the previous rule. Just ignore it.

That wasn't my problem, can anyone help me out here?

andy384
06-01-2005, 09:07 PM
Hey Domedia I was thinking I probably should have posted this in the CSS/HTML forum. Is it ok to post it there also?

domedia
06-01-2005, 09:48 PM
No, don't cross post please.
I'll have something for you soon.

andy384
06-01-2005, 10:16 PM
Darn, I already did, sorry, I would try to delete it but I don't think I can.

Sorry about that. Delete it for me if you can.

gmcrone
06-01-2005, 10:46 PM
Try this:

#news2 {
width: 213px;
height: 372px;
margin-top: 5px;
background-color: #A0AFCB;
color: #FFFFFF;
padding: 4px;
}

#news2 {
a:link; a:visited; a:active
background-color: #A0AFCB;
padding: 6px;
text-decoration: none;
color: #FFFFFF;
height: 10px;
width: auto;
margin-top: 5px;
}

#news2 {
a:hover
background-color: #F7CB33;
text-decoration: none;
color: #FFFFFF;
padding: 6px;
height: 10px;
width: auto;
}

h6 {
text-align: center;
font-size: 165%;
font-weight: normal;
color: #FFFFFF;
font-style: normal;
padding: 6px;
background-color: #A0AFCB;
}


Mike...

andy384
06-01-2005, 11:07 PM
Mike I tried it but it doesn't seem to work.

Now all the links are underlined and it does not turn yellow at all when you "hover" over them. All I can do right now is get the yellow "hover" box padded enough so that it almost reaches the edges, but since the words are different sizes it doesn't work, the only other thing I could think of is making the box itself a .GIF but I would like to avoid that if possible. Although I might as well try making a .GIF because it would get rid of my sizing issues I am experiencing in Firefox right now.

Thanks for the help though, let me know if you have anything else.

domedia
06-01-2005, 11:13 PM
Can you attach the whole document with inline CSS, or point us to a version online?

andy384
06-01-2005, 11:50 PM
Ok domedia and Mike, thanks for bearing with me and helping me out.

I put up the html:

http://www.tailorfitravel.com ('http://www.tailorfitravel.com')

You should probably view it in IE because it does not look right in FIREFOX , which is another problem maybe you could help me with. I want it to look like it looks in IE but Firefox is distorting it somehow.

here is the .css I am using(be warned it is messy and much of it is used for other parts of the site, so only a small portion is relevant, sorry if it is messy) if you want me to post only the relevant stuff I can.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
#container {
width: 673px;
margin: 0px auto;
}
#top {
color: #FFFFFF;
width: 221px;
height: 140px;
background-color: #778CB3;
}
#topright {
float: right;
height: 140px;
width: 447px;
text-align: right;
}
#topright2 {
float: right;
height: 140px;
width: 447px;
}
.cl {
clear:both;
}
#gallery {
width: 673px;
padding-top: 5px;
}
#news {
width: 213px;
height: 372px;
margin-top: 5px;
background-color: #778CB3;
color: #FFFFFF;
padding: 4px;
}
#news2 {
width: 213px;
height: 376px;
padding-top: 5px;
overflow: auto;
background-color: #A0AFCB;
color: #FFFFFF;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
}
#news2 a:link, #news2 a:visited, #news2 a:active {
background-color: #A0AFCB;
padding: 5px;
text-decoration: none;
color: #FFFFFF;
height: 10px;
width: 213px;
margin-top: 5px;
}
#news2 a:hover {
background-color: #F7CB33;
text-decoration: none;
color: #FFFFFF;
padding: 4px;
height: 10px;
width: 50px;
}
#menu {
width: 422px;
background-color: #F7CB33;
padding: 13px;
border-bottom: 5px solid #FFFFFF;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 105%;
}
#menu a:link, #menu a:visited, #menu a:active {
background-color: #F7CB33;
padding: 13px;
text-decoration: none;
color: #000000;
}
#menu a:hover {
background-color: #A0AFCB;
text-decoration: none;
color: #FFFFFF;
}
#content {
width: 446px;
float: right;
height: 380px;
margin-top: 5px;
background-color: #A0AFCB;
}
#content2 {
width: 446px;
float: right;
height: 380px;
overflow: auto;
padding-top: 5px;
background-color: #F7CB33;
padding-left: 1px;
}
p {
margin: 0 0 0 0px;
}
h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #F7CB33;
}
h2 {
text-align: center;
font-size: 300%;
font-weight: normal;
color: #FFFFFF;
}
h6 {
text-align: center;
font-size: 150%;
font-weight: normal;
color: #FFFFFF;
font-style: normal;
background-color: #A0AFCB;
}
#pad {
padding: 12px;
color: #000000;
}
#pad2 {
padding: 10px;
color: #000000;
}
#footer {
background-color: #F7CB33;
padding: 12px;
width: 649px;
color:#000000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #FFFFFF;
}
#footer2 {
background-color: #768CB3;
padding: 12px;
width: 649px;
color:#000000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #FFFFFF;
}
#footer a:link, #footer a:active, #footer a:hover, #footer a:visited {
color:#000000;
}
h4 {
font-size: 180%;
color: #F7CB33;
}
h5 {
font-size: 125%;
color: #000000;
}

andy384
06-02-2005, 01:19 AM
sorry bad link mis-typed it

here is the correct link:


http://www.tailorfittravel.com ('http://www.tailorfittravel.com')

ranjan
06-02-2005, 02:13 AM
read about the difference between inline elements and block elements. read then about how to change inline elements into block elements. google search will help you.

In short however

a tags are inline element and have no width, you need to convert them into block elements using css property display like this

display: block;

once u read on the difference between inline and block elements you will know what your mistake was.

PS: The above is one of the first things you should know about html elements

andy384
06-02-2005, 09:00 PM
hey thanks ranjan I appreciate it. That worked, but for some reason I can't get the block to go completely to the edges. It will only go about 98% there. Any suggestions? Should I try to set the hover box width and not use padding?

ranjan
06-03-2005, 08:08 AM
Width, padding and margin are to be declared only once. The other pseudo classes (link, visited hover and active) will inherit the widths, margins and paddings.

To better understand this lets see an example

Consider the following HTML:

<ul id="nav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>


now if i style the "a" tag above like this


#nav {
width:120px;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a {
width: 104px;
margin: 2px;
padding:5px;
border: solid 1px black;
display:block;
}


1. notice that the nav width is 120 and the width of a is 104 this is because of the box model. the a actually takes

2px left border + 1 px left border + 5px left margin + 104 px width + 2px right border + 1 px right border + 5px right margin = 120px or width of containing box(nav)

2. all states(link, visited hover and active) of all "a tags" within nav share the width, margin, padding and border

Now that we have got the width all set right, we can go ahead and style the a tag like this


#nav a:link, #nav a:visited {
background: #CCCC99;
color: #666666;
text-decoration: none;
}
#nav a:hover, #nav a:active {
color: #CCCC99;
background: #666666;
}


Notice above just like widths/padding/margin/border were inherited by the states from original a tag, hover and active inherit text-decoration from link and visited

Also keep in mind link, visited, hover and active must ne in that order (LoVe HAte or LVHA or link visited hover active). If the order is changed it doesn't work

Thats all there is to it

andy384
06-03-2005, 10:20 PM
Thanks for the help ranjan!

It is greatly appreciated.

Thanks for taking the time to spell that out for me.