image/button position for all resolutions.

USB

01-22-2012, 10:49 PM

Hi.

I have been trying to figure out how to get an image that I use as a button to stay at the same positions in whatever resoultion the visitor is using, but I can't get it to work. It keeps changing posistion. So, can somone please take a look at my html and CSS and tell me what I need to do?

http://img687.imageshack.us/img687/8840/voteissue.png

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Eternal Online</title>

<link rel="stylesheet" href="styles.css" />
</head>

<body>

<div id="header">
<div id="headerpic"></div>
</div>

<div id="wrapper">

<ul id="navigation">
<li><a href="#home" class="home">Home</a></li>
<li><a href="#faq" class="faq">FAQ</a></li>
<li><a href="#forums" class="forums">Forums</a></li>
<li><a href="#download" class="download">Download</a></li>
<li><a href="#usercp" class="usercp">UserCP</a></li>
<li><a href="#vote" class="vote">Vote</a></li>
<li><a href="#info" class="info">Info</a></li>
</ul>

</div>

<div id="vote">
<a href="http://www.hyperlinkcode.com"><img src="images/vote-button.png"></a>
</div>

</body>
</html>

CSS

* { margin: 0; padding: 0; } /* Reset stuff */

ul#navigation {
width: 902px; margin ;
list-style: none;
background-position:center top;
}

ul#navigation li { display: inline; }

ul#navigation li a {
display: block; float: left; height: 64px;
background-image: url(images/navigation-bar.png); text-indent: -9999px;
}

ul#navigation li a.home {
width: 113px; background-position: 0 0;
}

ul#navigation li a.faq {
width: 113px; background-position: -113px 0;
}

ul#navigation li a.forums {
width: 113px; background-position: -226px 0;
}

ul#navigation li a.download {
width: 113px; background-position: -339px 0;
}

ul#navigation li a.usercp {
width: 113px; background-position: -452px 0;
}

ul#navigation li a.vote {
width: 113px; background-position: -565px 0;
}

ul#navigation li a.info {
width: 111px; background-position: -678px 0;
}

ul#navigation li a.home:hover, ul#navigation li a.home:focus {
background-position: 0 -64px;
}

ul#navigation li a.faq:hover, ul#navigation li a.faq:focus {
background-position: -113px -64px;
}

ul#navigation li a.forums:hover, ul#navigation li a.forums:focus {
background-position: -226px -64px;
}

ul#navigation li a.download:hover, ul#navigation li a.download:focus {
background-position: -339px -64px;
}

ul#navigation li a.usercp:hover, ul#navigation li a.usercp:focus {
background-position: -452px -64px;
}

ul#navigation li a.vote:hover, ul#navigation li a.vote:focus {
background-position: -565px -64px;
}

ul#navigation li a.info:hover, ul#navigation li a.info:focus {
background-position: -678px -64px;
}

a { outline: none; }

#header {

}
#header #headerpic {
background-image: url(images/header.png);
background-position: center top;
height: 400px;
width:744px;
margin-right:auto;
margin-left:auto;
}

#wrapper {
width: 789px;
margin-right: auto;
margin-left: auto;
}

body {
background-image: url(images/background.png);
background-position: center top;
background-color:#000000;
background-repeat:no-repeat;
}

#vote { position:absolute; left:auto; bottom:auto;}

melloorr

01-22-2012, 10:59 PM

Your #wrapper should be margin: 0 auto; and the vote position should not be absolute, it should be relative

USB

01-22-2012, 11:05 PM

Like this?

#vote { position:relative; margin: 0 auto;}

melloorr

01-22-2012, 11:08 PM

Like this?

#vote { position:relative; margin: 0 auto;}

Just position:relative; will do, but if you want it in the middle too, then yes that will work

Excavator

01-22-2012, 11:11 PM

Hello USB,
When you make a container relative, the ap element inside it positions itself relative to it's container. Make sense?
Try it like this -
#wrapper {
width: 789px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#vote {
position:absolute;
top: 400px;
left: 200px;
}

Adjust that top and left px to suit.

Learn positioning here (http://www.barelyfitz.com/screencast/html-training/css/positioning/).

It would probably be better not to use positioning at all. Just float that left and margin it around a bit and see how you like it.

USB

01-22-2012, 11:12 PM

I did that melloror, but it just changed to the other side :(

melloorr

01-22-2012, 11:16 PM

I did that melloror, but it just changed to the other side :(

Ahh I missed something! You have closed your wrapper before you used the vote div, the wrapper should be closed after the vote div:

<div id="wrapper">

<ul id="navigation">
<li><a href="#home" class="home">Home</a></li>
<li><a href="#faq" class="faq">FAQ</a></li>
<li><a href="#forums" class="forums">Forums</a></li>
<li><a href="#download" class="download">Download</a></li>
<li><a href="#usercp" class="usercp">UserCP</a></li>
<li><a href="#vote" class="vote">Vote</a></li>
<li><a href="#info" class="info">Info</a></li>
</ul>

<div id="vote">
<a href="http://www.hyperlinkcode.com"><img src="images/vote-button.png"></a>
</div>

</div>

USB

01-22-2012, 11:26 PM

Ok, now I get it to the position that I want it to be.. but it only stay there when i'm using full screen.

http://img20.imageshack.us/img20/4377/voteeg.png

else it looks like this:

http://img542.imageshack.us/img542/8498/voteee.png

I want the vote button to stay at the same position as it is in full screen, even if I make my screen smaller.

melloorr

01-22-2012, 11:30 PM

Whats the CSS code for that button now?

USB

01-22-2012, 11:31 PM

Now I got it :) thank you both :)