Menu
Below is the style sheet that I’m working on. With the assistance of someone in this forum, I was able to get everything positioned as I needed it with the exception of one roll-over link. It is vertically in the correct position, but horizontally it is in the center of the center image. What type of margin/alignment can I add to the “mission” div to move it to the right approximately 75px without moving any other of the roll-overs?
div {}
img {
border: solid 0;}
.footer {
text-align: center;}
body {
background-color: #000000;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
padding: 0px;
height: 84px;}
#Center { /*center image
background-image: url(images/lgsun.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 380px;
width: 550px;
padding: 3px;
margin: 0px auto;
}
#Photos { /*rollover image
float: left;
margin-top: 75px;
width: 121px;
height: 61px;
}
#Rhythms { /*rollover image
float: right;
margin-top: 75px;
width: 149px;
height: 65px;
}
#Mission { /*rollover image
float: right;
margin-top: 240px;
width: 216px;
height: 60px;}
#Calendar { /*rollover image
float: left;
margin-top: 100px;
width: 154px;
height: 61px;
}
a:link {
color: #DBBFB3;
text-decoration: none;
font-family: “Comic Sans MS”;
font-size: 20px;
font-weight: bold;}
a:visited {
color: #885039;
text-decoration: none;
font-family: “Comic Sans MS”;
font-size: 20px;
font-weight: bold;}
a:hover {
text-decoration: underline;
font-family: “Comic Sans MS”;
text-align: center;
font-size: 20px;
font-weight: bold;}
a:active {}