Help - Search - Members - Calendar
Full Version: Align problem
Forums > Resource Center > Webmasters' Corner
deadacount
Apr 28 2010, 03:08 AM

Ok all I want to do is to stick the Content Box[which is only white] to the Navigation and the footer without the space Highlighted by the red boxes below.

Ive already tried to use positioning:fixed, padding:0px; as well the top and bottom padding/margin it dose not help. I don't know what im doing wrong









CODE
<style type="text/css">
Body{
background-image:url(http://i291.photobucket.com/albums/ll319/siteto/BG1.png);

}
#Wrapper {
width: 1000px;
top:0px;
position:absolute;
left:270px;
background-color: #e2fac8;
}
#Header {
height: 424px;
}
#EmptyLeft {
background-color: #d4ecc9;
float: left;
width: 49px;
}
#NaviBar {
height: 80px;
background-color: #dcf0f0;
}
#EmptyRight {
background-color: #e2fac8;
width: 49px;
float: right;
}
#Content {
font-family: Verdana;
font-size: 12px;
color: #333;
margin-right: 55px;
margin-left: 55px;
margin-top: 0px;
background-color: #FFF;
}
#Footer {
background-image: url(http://i291.photobucket.com/albums/ll319/siteto/Footer1.png);
height: 129px;
}

a:link, a:active, a:visited{
font-family: Verdana;
font-size: 12px;
text-decoration:none;
color: #333;
}

a:hover {
color: #52c5cc;
font-family: Verdana;
font-size: 12px;
text-decoration:none;
}

H1{
color: #52c5cc;
font-family: Verdana;
font-size: 18px;
}

blockquote{
background-color:f7e7db;
color: #333;
font-family: Verdana;
font-size: 10px;
}

</style>


<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<body onLoad="MM_preloadImages('Home2.png','Designs2.png','Contact2.png','Links2.png')">

<div id="Wrapper">
<div id="Header"><img src="http://i291.photobucket.com/albums/ll319/siteto/header1.png"><img src="http://i291.photobucket.com/albums/ll319/siteto/header2.png"><img src="http://i291.photobucket.com/albums/ll319/siteto/header3.png"></div>
<div id="NaviBar"><a href="*URLInsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','http://i291.photobucket.com/albums/ll319/siteto/Home2-1.png',1)"><img src="http://i291.photobucket.com/albums/ll319/siteto/Home1-1.png" name="Home" width="132" height="80" border="0"></a><a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Designs','','http://i291.photobucket.com/albums/ll319/siteto/Designs2.png',1)"><img src="http://i291.photobucket.com/albums/ll319/siteto/Home1-1.png" name="Designs" width="140" height="80" border="0"></a><a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','http://i291.photobucket.com/albums/ll319/siteto/Contact2.png',1)"><img src="http://i291.photobucket.com/albums/ll319/siteto/contact1.png" name="Contact" width="151" height="80" border="0"></a><a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','http://i291.photobucket.com/albums/ll319/siteto/Links2.png',1)"><img src="http://i291.photobucket.com/albums/ll319/siteto/Links1.png" name="Links" width="126" height="80" border="0"></a></div>

<!-- Content Start -->
<div id="Content">
<h1>The Layout Information</h1>


This Layout Is mainly used for a portfolio, You can use it for anything else, such as blogging, or just a simple and clean personal website. Remember: there is space for Affiliates next to the imaged links up above, so if you are someone who just wants to use this for your personal website, just know there is some empty space.
<br>
<blockquote>
this is a <a href="#">link</a>
</blockquote>

</div>
<div id="Footer"></div></div></body>
Mickey
Apr 28 2010, 02:28 PM
Try adding this:

CODE
* {margin: 0; padding: 0;}

May change a few things but you can always adjust them individually.
deadacount
Apr 29 2010, 11:08 AM
I tried that it ruined he green margin for the left&right, i had for it lol

It didn't change the top or bottom spacing D:
barrykins
May 12 2010, 02:42 PM
Very easy fix. Most of your coding was right. I cleaned it all up, put the css and JS in different files. Then brought them in to the html using a call action. So the index file loads quicker. Then just removed your empty floats, changed the positioning to relative and just adjusted margins slightly.

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" />

<script src="js/imageswap.js" type="text/javascript"></script> <!--LOAD Javascript-->

<link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> <!--Load Stylesheet-->

<title>Alignment Issue</title>

</head>

<body>

<body onLoad="MM_preloadImages('Home2.png','Designs2.png','Contact2.png','Links2.png')">

<div id="Wrapper">

<div id="Header">
<img src="http://i291.photobucket.com/albums/ll319/siteto/header1.png">
<img src="http://i291.photobucket.com/albums/ll319/siteto/header2.png">
<img src="http://i291.photobucket.com/albums/ll319/siteto/header3.png">
</div>

<div id="NaviBar">
<a href="*URLInsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','http://i291.photobucket.com/albums/ll319/siteto/Home2-1.png',1)"><img src= "http://i291.photobucket.com/albums/ll319/siteto/Home1-1.png" name="Home" width="132" height="80" border="0"></a>

<a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Designs','','http://i291.photobucket.com/albums/ll319/siteto/Designs2.png',1)"><img src ="http://i291.photobucket.com/albums/ll319/siteto/Home1-1.png" name="Designs" width="140" height="80" border="0"></a>

<a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','http://i291.photobucket.com/albums/ll319/siteto/Contact2.png',1)"><img src ="http://i291.photobucket.com/albums/ll319/siteto/contact1.png" name="Contact" width="151" height="80" border="0"></a>
<a href="*URLinsertURL*" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Links','','http://i291.photobucket.com/albums/ll319/siteto/Links2.png',1)"><img src= "http://i291.photobucket.com/albums/ll319/siteto/Links1.png" name="Links" width="126" height="80" border="0"></a>
</div>

<!-- Content Start -->
<div id="Content">
<h1>The Layout Information</h1>


<p>This Layout Is mainly used for a portfolio, You can use it for anything else, such as blogging, or just a simple and
clean personal website. Remember: there is space for Affiliates next to the imaged links up above, so if you are someone who
just wants to use this for your personal website, just know there is some empty space.
<br />

<blockquote>
this is a <a href="#">link</a>
</blockquote>

</div>

<div id="Footer">
</div>

</div>

</body>
</html>


again, that html wont work with your css, you will need mine from the attachment.


click to enlarge



Click to view attachment
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.