PDA

View Full Version : How to format link boxes with different rollover colors?


jdjones
02-02-2008, 12:32 AM
Hello. I am new to Dreamweaver and to this forum. I have searched for the topic, but could not find relevant information.

I wish to have a set (two rows) of boxed/bordered links at the top of my page that change color upon rollover. I have figured out how to do this, but only using the a:link/hover selector along with "display block." This makes them all behave the same which is not exactly what I want.

I want to be able to assign the boxes different colors and also have the top row of boxes align left and the bottom row align right. I can either float them and get the nice little boxes around the text that I want, but have them all aligned right or left, or I can remove the float and align each of them the way I want, but then they are in long boxes that go all the way across the screen. I cannot figure out how to do both. Given the flexibility of css, I assume what I want is not impossible, but it may be over my head. I greatly appreciate any help. Here's the source:

@charset "utf-8";

* {
margin: 0px;
padding: 0;
}

body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #161B1F;
font-size: 100%;
font-family: "Century Gothic", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #161B1F;
}
.oneColFixCtrHdr #container {
width: 920px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
background-color: #FFFFFF;
margin-top: 5px;
margin-bottom: 0px;
padding: 10px;
}
.oneColFixCtrHdr #mainContent {
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}

.oneColFixCtrHdr #footer p {
padding-right: 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFFFFF;
margin-top: 20px;
}
.header2 {
background-color: #FFFFFF;
color: #161B1F;
padding: 10px;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
}
a:link {
color: #161B1F;
background-color: #FFFFFF;
display: block;
height: auto;
width: auto;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
border: 1px solid #000000;
float: none;
text-decoration: none;
margin-right: 1px;
margin-left: 1px;
}
a:hover {
color: #161B1F;
background-color: #FFFF00;
height: auto;
width: auto;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
border: 1px solid #161B1F;
text-decoration: none;
margin-right: 1px;
margin-left: 1px;
}
a:active {
color: #FFFFFF;
text-decoration: none;
background-color: #161B1F;
margin-right: 1px;
margin-left: 1px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
border: 1px solid #161B1F;
}

Cary
02-02-2008, 07:38 AM
If you just want to know how to limit the width you can try something like this:

a {
width: 200px; /* or whatever width you want and maybe ems instead of pixels */
display: block;
padding: 3px 5px;
text-decoration: none;
margin-right: 1px;
margin-left: 1px;
}
a:link, a:visited { /* You should have the a:visited state as well. Seperately, of course, if it's not the same as a:link */
color: #161B1F;
background-color: #FFFFFF;
border: 1px solid #000000;
}
a:hover {
color: #161B1F;
background-color: #FFFF00;
border: 1px solid #161B1F;
}
a:active {
color: #FFFFFF;
background-color: #161B1F;
border: 1px solid #161B1F;
}

d a v e
02-02-2008, 10:29 AM
and you should probably use focus in there too, in this order
Link, Visited, Hover, Focus, Active for those navigating by keyboard ;)