...
PDA

help with HTML coding, cannot move two containers up?

SsjRavi
11-04-2010, 08:51 PM
Hi, i am new to HTML coding as i am learning about it in school but i am stuck, i do not know how to place the 'story box' in the centre and place the 'navigation' + 'deals' bars on either side. As you can see in the image both have moved down for some reason. Please give me a dummies answer since i m new, i am using dreamweaver CS3.

http://s819.photobucket.com/albums/zz117/ravinder_c159/?action=view&current=Untitled-1.jpg

CSS:
#container {
background-color: white;
width:800px;
margin-left:auto;
margin-right:auto;
}

#top {
background-color: green;
width: 800px;
height:90px;
float:left;

}

#nav {
background-color: orange;
width: 800px;
height:33px;
}

#story {
background-color: #ccffcc;
width: 292px;
height:442px;
float:right;
float:left;
border: thin none #66cc00;
}

#sidebar {
background-color: #ccffcc;
width: 148px;
height:442px;
float:left;
border: thin none #66cc00;
}

#deals {
background-color: #ccffcc;
width: 148px;
height:442px;
float:right;
border: thin none #66cc00;
}

#footer {
background-color: green;
width: 800px;
height: 30px;
float:left;
}

Homepage HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script language="JavaScript" 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>

<link href="Pelton.css" rel="stylesheet" type="text/css" />
</head>



<body onload="MM_preloadImages('../buttons/HOme%206.jpg')">
<div id="container">
<div id="top"><img src="images/logo9090.jpg" width="90" height="90" /></div>
<div id="buttons">
<div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="homebutton" width="140" height="40" border="0" id="homebutton" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image9" width="140" height="40" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image6" width="140" height="40" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image7" width="140" height="40" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image8" width="140" height="40" border="0" id="Image8" /></a></div>
</div>
<div id="nav"><img src="buttons/top-bar.gif" width="800" height="36" /></div>
<div id="spacer"><img src="images/spacer.gif" /></div>
<div id="sidebartop"><img src="buttons/newtab145.gif" width="145" height="41" /></div>
<div id="story">
<div align="center">Story</div>
</div>
<div id="deals">Deals</div>
<div id="sidebar"></div>
<div id="footer">Footer</div>

</div>
</body>

</html>
bazz
11-04-2010, 09:08 PM
Has this been copied and pasted form somewhere? else, how did you know to make the nav horizontal? and if you knew how to make it horizontal, would it not be simple to show us what you have tried in order to make it horizontal?

we are willing to help but we can't do your homework for you and we need to see that you are willing to learn and not just be given code.

sceptically, bazz.

Also, have you a link to a live page?
SsjRavi
11-04-2010, 09:16 PM
Has this been copied and pasted form somewhere? else, how did you know to make the nav horizontal? and if you knew how to make it horizontal, would it not be simple to show us what you have tried in order to make it horizontal?

we are willing to help but we can't do your homework for you and we need to see that you are willing to learn and not just be given code.

sceptically, bazz.

Also, have you a link to a live page?

I do indeed want to learn, i originally typed up the HTML and then i converted it to CSS via dreamweaver CS3. Since i lack knowlege i am unsure what you are asking about. I just typed in the div id's and played around with the dimensions until they were placed in the places i wanted them to be.
I have been stuck with this problem for 3 weeks now and i have tried many things but have not yet found a solution which is why i have turned to this forum for help.
Also what do you mean by a live page?
Can you elaborate please

Thank you for your time

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum