Log In · Register

 

Help Topic Rules and Requirements

For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Staff Member of the Month | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources

Submission Guidelines

 
 Reply to this topicStart new topic
Align problem, Div Sticking to another..
deadacount
post Apr 28 2010, 03:08 AM
Post #1


Newbie
*

Group: Member
Posts: 5
Joined: Oct 2006
Member No: 471,552

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>
Reason for edit: Please use [thumb] tags instead of [img] tags when posting large images. - Mike
 
Mickey
post Apr 28 2010, 02:28 PM
Post #2


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
Try adding this:

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

May change a few things but you can always adjust them individually.
 
deadacount
post Apr 29 2010, 11:08 AM
Post #3


Newbie
*

Group: Member
Posts: 5
Joined: Oct 2006
Member No: 471,552
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
post May 12 2010, 02:42 PM
Post #4


Senior Member
***

Group: Member
Posts: 73
Joined: Dec 2009
Member No: 754,485
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.





Attached File  rosemaxy.zip ( 4.55K ) Number of downloads: 0
 
« Next Oldest · Webmasters' Corner · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic