...

View Full Version : Help with HTML coding!



SsjRavi
10-25-2010, 08:13 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.

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

teedoff
10-25-2010, 08:38 PM
Can you post your html and css code? Without seeing that, its hard to tell whats going on. Might be that you have some margins too wide for each div to align side by side properly.

SsjRavi
10-25-2010, 09:32 PM
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>

teedoff
10-25-2010, 09:48 PM
did you try adding a left margin of 148px to the story div?

Also you have a float left and float right on story div. You dont need the right float.

SsjRavi
10-25-2010, 10:00 PM
As i have mentioned before i am new to coding, could you please tell me what code to type in and where.
If possible could you tell me how i can do this on Dreamweaver CS3

vinyl-junkie
11-07-2010, 02:26 PM
Do NOT start a new thread because you didn't get a response to this one that was to your liking. You've done that twice now, which is unacceptable in these forums. Doing so can get you banned.

I don't use Dreamweaver so I can't help you with specifics, but go into code view, find the float that teedoff mentioned and delete it. See if that solves your problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum