PDA

View Full Version : Content positioning



SDawn
Aug 8th, 2009, 08:33 AM
Hello, I'm trying to position my content about 10px away (to the right) from the vote links on the left and as high as the first vote link(the site is http://newbeginningsro.com/). I've tried using float, margin and padding but everytime I do it, they don't end up at the place I want. Can someone please help me with positioning? Here's my HTML code:


<!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>NewBeginningsRO | Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="banner">
<div><img src="images/header.jpg" height="239" width="824" />

<div class="navbar">
<div><img src="images/nav.png" width="827" height="52" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="53,14,117,35" href="#" alt="features" />
<area shape="rect" coords="152,16,240,34" href="#" alt="features" />
<area shape="rect" coords="271,16,413,35" href="#" alt="control panel" />
<area shape="rect" coords="443,14,562,35" href="#" alt="downloads" />
<area shape="rect" coords="600,15,678,34" href="#" alt="donate" />
<area shape="rect" coords="712,14,777,34" href="#" alt="forum" />
</map>
</div>
<br />
<br />

<div id="vote">
<a href="http://www.xtremetop100.com/" target="_blank"><img src="images/xtreme.png" alt="Vote on XtremeTop100" /></a></div>
<br />
<div id="vote2">
<a href="http://www.gamesites200.com/" target="_blank"><img src="images/gamesite.png" alt="Vote on GameSites200" /></a>
</div>
<br />
<div id="rms">
<a href="http://www.ratemyserver.net/" target="_blank"><img src="images/rms.png" alt="Review on RateMyServer" /></a>
</div>
<br />
<div id="serverstatus">
<img src="images/sstatus.png" alt="Server Status" />
</div>

<div id="footer">
<div id="copyright">Copyright &copy; 2009 - www.newbeginningsro.com - All registered trademarks belong to their respective owners. Site by <a href="#">Allie</a>.<br />
</div>
</div>

</body>
</html>


CSS code:

body {
font-family: Verdana;
font-size: 12px;
color: #000000;
background-image: url(images/bg.png);
background-repeat: repeat-x;
}

.banner {
width: 824px;
padding-left: 100px;
list-style: none;
}

img {border: 0;}

.vote {
width: 152px;
float: left;
padding: 0px 10px 0px 100px;
margin-top: 340px;
}

.vote2 {
width: 152px;
float: left;
padding: 0px 10px 0px 100px;
}

.rms {
width: 152px;
float: left;
padding: 0px 10px 0px 100px;
}

#copyright {
padding-left: 100px;
padding-top: 70px;
color: #000000;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
}

#footer {
clear: both;
}

h1 {
color: #000000;
font-weight: 100;
font-size: 18px;
background-repeat: no-repeat;
height: 40px;
width: 660 px;
padding: 11px 0px 0px 5px;
margin: 10px 0px -5px 0px;
text-align: center;
letter-spacing: 3px;
font-family: verdana, arial;
}


Thanks.

abduraooft
Aug 8th, 2009, 09:36 AM
Hello, I'm trying to position my content about 10px away (to the right) from the vote links on the left and as high as the first vote link(the site is http://newbeginningsro.com/). Content? Hope you are trying to make a layout like http://www.bonrouge.com/2c-hf-fixed.php

SDawn
Aug 9th, 2009, 01:17 AM
Just what I was looking for! Thanks!