Preventing buttons from moving on browser re size
I am quite new to CSS so apologies in advance.
I have a simple problem: My navigation buttons move whenever I re size the
window. I have Googled this for at least a week now and can't seem to find
a solution. I have managed to make it so that they do not move
horizontally on re size, but for some reason they continue to move
vertically on window re size. I really do not understand why this is
happening! Can anyone help?! Thanks in advance.
Here is the HTML
`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/experiment.css" type="text/css">
</head>
<body>
<div id= "wrapper">
<a href:"#" class= "button1"> Home </a>
<a href:"#" class= "button2"> About </a>
<a href:"#" class= "button3"> How it works </a>
<a href:"#" class= "button4"> Pricing </a>
<a href:"#" class= "button5"> Contact </a>
</div>
</body>
</html>`
Here is the CSS:
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
.button1 {
display: block;
position: absolute;
bottom: 30px;
left: 20px;
border: #122A0A;
border-style: solid;
border-width: 9px;
background-color: #122A0A;
text-align: center;
font-family: Georgia,serif;
color: #789D6C;
margin: 0px auto;
}
.button2 {
display: block;
position: absolute;
bottom: 30px;
left: 170px;
height: auto;
width: auto;
border: #122A0A;
border-style: solid;
border-width: 9px;
background-color: #122A0A;
text-align: center;
font-family: Georgia,serif;
color: #789D6C;
}
.button3 {
display: block;
position: absolute;
bottom: 30px;
left: 320px;
height: auto;
width: auto;
border: #122A0A;
border-style: solid;
border-width: 9px;
background-color: #122A0A;
text-align: center;
font-family: Georgia,serif;
color: #789D6C;
}
.button4 {
display: block;
position: absolute;
bottom: 30px;
left: 510px;
height: auto;
width: auto;
border: #122A0A;
border-style: solid;
border-width: 9px;
background-color: #122A0A;
text-align: center;
font-family: Georgia,serif;
color: #789D6C;
}
.button5 {
display: block;
position: absolute;
bottom: 30px;
left: 660px;
height: auto;
width: auto;
border: #122A0A;
border-style: solid;
border-width: 9px;
background-color: #122A0A;
text-align: center;
font-family: Georgia,serif;
color: #789D6C;
}
Thanks again.
P.S. I am trying to make a site with no scroll bars. (Just in case that is
relevant)
No comments:
Post a Comment