PDA

View Full Version : 2 Problems CSS



Decker
Sep 20th, 2010, 01:39 AM
Alright I am editing a website for a friend and have ran into 2 problems.

1) I want to lessen the space between the header and the top, but when I change the margin, it just messes it up and goes to the left of the screen.

2) Spacing between boxes and footer. When I put br's or even use margins, it just don't move at all, it does go left and right, but it doesn't go up and down. Look at this picture:

http://img198.imageshack.us/img198/8886/63014779.jpg

I want to move the footer down from the bars, I want to put space between them.

Here (http://deckweb.pcriot.com/) is the link to the website.

Here is the CSS:

@charset "utf-8";
/**
* Copyright (c) 2008 ClanTemplates.com
* wet; a free template by Subleme at ClanTemplates.com
* No part of this file may be redistributed without written permission
* Coded by Crazymik3 <[email protected]>
* http://www.clantemplates.com/pages/Legal
**
*---------->>> GLOBAL <<<-----------*/
html { margin:0; padding:0;}
* { margin: 0; padding: 0; outline: 0; }
body {
margin:0; padding:0;
font-family: Tahoma, Verdana, Arial, "Trebuchet MS";
font-size: 12px;
color: #ffffff; text-align: center;
background: #000000;
}
/* ---------->>> structure <<<-----------*/
#container {
margin: 0 auto;
width: 875px;
text-align: center;
}
#container h1 {
background:url('./images/banner.jpg') no-repeat;
width: 875px;/*875*/ height: 270px;/*270*/
padding: 20px 0 0 138px; margin: 0;
display: block; overflow: visible;
text-align: left; float: left;
font-size: 30px; font-weight:normal;
}
html>body #container h1 {
width: 737px; height: 250px;
}
/* ---------->>> left <<<-----------*/
#left {
width: 192px;
margin: 1px 0 0 0; padding: 0;
float: left;
text-align: left;
}
#left a {
color: #191919;
text-decoration: none;
margin: 20px 0 0 15px; padding: 0;
}
#left .box {
background: #ffffff url(./images/side_foot.jpg) no-repeat bottom center;
width: 192px;
margin: 12px 0 0 0; padding: 0 0 15px 0;
}
#left .box h2 {
background: #ffffff url(./images/side_title.jpg) no-repeat top center;
width: 192px /*192*/; height: 31px /*31*/;
padding: 9px 0 0 0; margin: 0;
display: block; overflow: visible;
text-align: center;
font-size: 12px;
}
html>body #left .box h2 {
width: 192px; height: 22px;
}
#left ol#main {
margin: 6px 0 0 18px; padding: 0;
list-style: none;
}
ol#main li {
font-size: 12px;
}
ol#main li a:link, ol#main li a:visited {
color: #282a34;
text-decoration: none;
font-weight: normal;
margin: 8px 0 0 0; padding: 0 0 1px 0;
}
ol#main li a:hover, ol#main li a:active {
font-weight: bold;
margin: 2px 0 3px 6px; padding: 0 0 1px 0;
border-bottom: solid 1px #191919;
}
#left ul {
margin: 6px 0 0 18px; padding: 0;
list-style: none;
}
#left ul li a {
color: #191919;
text-decoration: none;
font-weight: normal;
margin: 0; padding: 0;
}
/* ---------->>> main <<<-----------*/
#content {
width: 478px;
margin: 1px 0 33px 5px; padding: 0;
float: left;
text-align: left;
}
.item {
background: url('./images/main_bg.jpg') repeat-y top center;
width: 478px;
margin: 12px 0 0 0; padding: 0;
}
.item_foot {
background: url('./images/main_footer.jpg') no-repeat bottom center;
width: 478px; height: 14px;
margin: 0; padding: 0;
}
.item h2 {
background: #ffffff url('./images/main_title.jpg') no-repeat top center;
width: 478px /*478*/; height: 43px /*43*/;
padding: 9px 299px 0 43px; margin: 0;
text-align: center;
font-size: 12px;
}
html>body .item h2 {
width: 136px; height: 34px;
}
.item p {
font-weight: bold;
padding: 7px 11px 7px 11px; margin: 0;
}
.item a {
color: #CCCCCC;
text-decoration: none;
}
/* ---------->>> right <<<-----------*/
#right {
width: 192px;
margin: 1px 0 0 6px; padding: 0;
float: left;
text-align: left;
}
#right .box {
background: #ffffff url('./images/side_foot.jpg') no-repeat bottom center;
width: 192px;
margin: 12px 0 0 0; padding: 0 0 15px 0;
text-align: left;
}
#right a img {
color: #191919;
text-decoration: none;
text-align: center;
border: none;
margin: 5px 0px 5px 2px; padding: 0;
}
#right .box h2 {
background: #ffffff url('./images/side_title.jpg') no-repeat top center;
width: 192px /*192*/; height: 31px /*31*/;
padding: 9px 0 0 0; margin: 0;
text-align: center;
font-size: 12px;
}
html>body #right .box h2 {
width: 192px; height: 22px;
}
/* ---------->>> right <<<-----------*/
#footer {
width: 875px; height: 73px;
background: url('./images/footer.jpg') no-repeat;
margin: 33px 0 0 0; padding: 0;
clear: both;
position: relative;
}
a#ct {
width: 151px; height: 31px;
position: absolute; top: 0; left: 703px;
}
a#sub {
background: url('./images/sub-2.jpg') no-repeat;
width: 137px; height: 62px;
position: absolute; top: 7px; left: 12px;
}



Here is the HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loppersum - A Clantemplates.com Release by Subleme of Desired Media</title>
<link rel="stylesheet" type="text/css" href="./main.css" media="all" />
<style type="text/css">
<!--
a:link {
color: #DEDEDE;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #DEDEDE;
}
a:hover {
text-decoration: none;
color: #DEDEDE;
}
a:active {
text-decoration: none;
color: #DEDEDE;
}
-->
</style></head>
<body>
<div id="container">

<h1>Lopper<strong>sum</strong></h1>

<div id="left">

<!-- navigation -->
<div class="box">
<h2>NAVIGATION</h2>

<ol id="main">

<div style="padding: 4px;"><li><a href="#">HOME</a></li></div>
<div style="padding: 4px;"><li><a href="#">CHAT BOX</a></li></div>
<div style="padding: 4px;"><li><a href="#">REGISTER</a></li></div>
<div style="padding: 4px;"><li><a href="#">DOWNLOADS</a></li></div>
<div style="padding: 4px;"><li><a href="#">DONATE</a></li></div>
<div style="padding: 4px;"><li><a href="#">FAQ</a></li></div>
<div style="padding: 4px;"><li><a href="#">CONTACT US</a></li></div>

</ol>
</div>

<div class="box">
<h2>Vote</h2>

<br />
<br />
<br />
<br />
<br />

</div>

<div class="box">
<h2>Staff</h2>

<br />
<br />
<br />
<br />
<br />

</div>


</div>

<!-- Main Area -->
<div id="content">

<div class="item">
<h2>Content</h2>


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />


</div>
<div class="item_foot"></div>




</div>

<div id="right">

<div class="box">
<h2>Server Status</h2>

<br />
<br />
<br />
<br />
<br />


</div>

<div class="box">
<h2>SPONSORS</h2>

<br />
<br />
<br />
<br />
<br />



</div>

</div>

<div style="margin:50px 0px 0px 0px;"><div id="footer"> </div></div>
</div>
</body>
</html>

DrDOS
Sep 20th, 2010, 03:28 AM
body {width:875px;margin-left:auto;margin-right;auto;margin-top:20px;background: url(banner.png) center no-repeat}

Probably not the correct markup for xml but you get the idea here, then put the container div margin-top comfortably below the banner. It will take on the width of the body. Then everything in the container will be relative to it and independent of the banner.

Some hints here: In the html, below any other style information put;

div {border:1px solid White}

or whatever color works. Then you can see exactly what is happening. This is one of the handiest things I've found working with divs.

Don't us line breaks for spacing, they depend on the font settings. If you need to force something you can just put in an invisible div of whatever size and position. But there are generally better ways of doing it, like float and relative vs. absolute.