Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Problem with top div, images being forced down?

Before you post, read our: Rules & Posting Guidelines

Reply
Page 1 of 2 1 2
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-07-2010, 01:09 PM   PM User | #1
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Angry Problem with top div, images being forced down?
HI, this is the third thread i am making for this question but no one has managed to help me so far, the only reply i have got back says "i am suspicious"
¬_¬
I have been stuck with this problem for over a month now and i cannot find a solution, help please!!!!

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. I have tried resizing the boxes but that did not work.

I am not asking you to do my coursework for me, I just want to know how to fix this problem so i can learn from it and never come accross this problem in the future. I originally typed up the HTML in notepad and then i converted it to CSS via dreamweaver CS3.

Thank you for your time!

view of website
http://s819.photobucket.com/albums/z...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>
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 01:39 PM   PM User | #2
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
Quote:
#story {
background-color: #ccffcc;
width: 292px;
height:442px;
float:right;
float:left;
border: thin none #66cc00;
}
As I said in your other post a month ago. You have told this div to float left AND float right. Remove the float right if you want this floating to the left. Thats a start. We can go from there once you do the first thing someone suggests.
teedoff is offline   Reply With Quote
Users who have thanked teedoff for this post:
SsjRavi (11-07-2010)
Old 11-07-2010, 02:02 PM   PM User | #3
MattF
Senior Coder

 
Join Date: Jul 2009
Location: South Yorkshire, England
Posts: 2,322
Thanks: 6
Thanked 304 Times in 303 Posts
MattF will become famous soon enoughMattF will become famous soon enough
You obviously didn't listen to the advice given you here, either:

http://codingforums.com/showpost.php...85&postcount=6
MattF is offline   Reply With Quote
Old 11-07-2010, 03:48 PM   PM User | #4
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Quote:
Originally Posted by teedoff View Post
As I said in your other post a month ago. You have told this div to float left AND float right. Remove the float right if you want this floating to the left. Thats a start. We can go from there once you do the first thing someone suggests.
I apologize, after creating the second thread i only reffered to that one instead of the first so i did not see some replies.
The strange thing is when i remove the float right or left the story div is no longer centred. When i applied both left and right it was centered just like the image on the link i provided shows. Also i did follow your advice however i just copied and pasted the old codes from my original post rather than updating.
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 03:54 PM   PM User | #5
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
I have now removed the margin right tag and applied a 148px to margin left, the story div is now centred. Now i just need to move the 'sidebar' and 'deals' div up, i have inserted a image which i want to attach to the sidebar on the left hand side.

What website currently looks like.
http://i819.photobucket.com/albums/z...159/newcss.jpg

The CSS now reads:

#container {
background-color: transparent;
width: 800px;
height: 600px;
margin-left:auto;
margin-right:auto;
}

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

#buttons {
background-color:white;
width:800px;
height:30px;
float: left;
}

#nav {
background-color:white;
width: 800px;
height:36px;
}

#spacer {
height:35;
width:800;
}

#sidebartop {
background-color:white;
width:145px;
height:41px;
float:left;
}

#story {
background-color:#ccffcc;
width:492px;
height:440px;
border: thin solid #66cc00;
margin-left: 148px;
}

#deals {
background-color: #ccffcc;
width:148px;
height:340px;
float:right;
border: thin solid #66cc00;
}
#sidebar {
background-color: #ccffcc;
width:142px;
height:301px;
float:left;
border:thin solid #66cc00;
}

#footer {
background-color: green;
width:800px;
height:30px;
float:left;
}
Last edited by SsjRavi; 11-07-2010 at 04:02 PM..
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 04:05 PM   PM User | #6
evo
waka Ionsurge


 
Join Date: Feb 2005
Location: United Kingdom
Posts: 882
Thanks: 5
Thanked 12 Times in 12 Posts
evo is an unknown quantity at this point
@SSJRavi: You're getting responses. It doesn't warrant reposting. Please don't.


Also, try post up a link to the HTML page, it's easier to debug than the css code and an image.
evo is offline   Reply With Quote
Users who have thanked evo for this post:
SsjRavi (11-07-2010)
Old 11-07-2010, 04:14 PM   PM User | #7
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Quote:
Originally Posted by evo View Post
@SSJRavi: You're getting responses. It doesn't warrant reposting. Please don't.


Also, try post up a link to the HTML page, it's easier to debug than the css code and an image.
I cannot upload the HTML file so i have only attached the CSS.
Whenever i try i get a message saying:
Homepage - Copy.html:
Invalid File
Attached Files
File Type: css Pelton.css (1,005 Bytes, 60 views)
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 10:50 PM   PM User | #8
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Smile
I have been playing around with the order of div tags for a couple of hours and have managed to sort out the sidebar and image.
Does anyone know how to move the 'story' div up so that it is level with the dark green top of the sidebar?
Also i need to move the 'deals' div up so that it is level with the 'story' div.

Homepage:
http://s819.photobucket.com/albums/z...currentCSS.gif
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 11:01 PM   PM User | #9
Chris Hick
Regular Coder

 
Join Date: Oct 2010
Location: Florence, MS
Posts: 476
Thanks: 10
Thanked 33 Times in 32 Posts
Chris Hick is an unknown quantity at this point
Ravi, just put your html between code tags. [] [/] put code between the brackets. That way I can see your html. This is a very easy task.
Last edited by Chris Hick; 11-07-2010 at 11:03 PM..
Chris Hick is offline   Reply With Quote
Users who have thanked Chris Hick for this post:
SsjRavi (11-07-2010)
Old 11-07-2010, 11:14 PM   PM User | #10
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Here's the HTML
Attached Files
File Type: txt Homepage - Copy.txt (3.2 KB, 60 views)
SsjRavi is offline   Reply With Quote
Old 11-07-2010, 11:22 PM   PM User | #11
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
Quote:
Originally Posted by SsjRavi View Post
Here's the HTML
No when you post code, or want to show someone your code, click the icon in your message composer window that looks like "#" (hash mark) That will bring up the code tags where you can copy and paste all your code between. makes it easier for us to read.
teedoff is offline   Reply With Quote
Users who have thanked teedoff for this post:
SsjRavi (11-13-2010)
Old 11-08-2010, 12:08 AM   PM User | #12
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Code:
<!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/About us.gif" 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" width="800" height="20" /></div>
	<div id="sidebartop"><img src="buttons/newtab145.gif" width="145" height="41" /></div>
  	<div id="sidebar">Sidebar</div>
    	  	<div id="story">
  	  <div align="center">Story</div>
  	</div>
	<div id="deals">Deals</div>
	<div id="footer">Footer</div>
	
</div>
</BODY>

</html>
SsjRavi is offline   Reply With Quote
Old 11-08-2010, 01:33 AM   PM User | #13
Chris Hick
Regular Coder

 
Join Date: Oct 2010
Location: Florence, MS
Posts: 476
Thanks: 10
Thanked 33 Times in 32 Posts
Chris Hick is an unknown quantity at this point
Ravi, the best thing for you to ever do is complete your css and html before you ever put javascript into it. It builds a solid foundation. It is much like building a house. You gotta pour the concrete before you build the house.

I'm not entirely sure what look you are trying to go for but.. here is what I tinkered with.. Perhaps this is what you were trying to achieve.

Code:
<!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">Top<img src="images/logo9090.jpg" width="90" height="90" /></div>
	<div id="buttons"> 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/About us.gif" 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="sidebar"> nav<img src="buttons/top-bar.gif" width="800" height="36" />
	               <br />
                    spacer<img src="images/spacer.gif" width="800" height="20" />
                    <br />
	                   sbt<img src="buttons/newtab145.gif" width="145" height="41" />
                    <br />
                       Sidebar</div>
    <div id="deals">Deals</div>
    	  	<div id="story">
  	  <div align="center">Story</div>
  	</div>
	
	<div id="footer">Footer</div>
	
</div>
</body>

</html>
Last edited by Chris Hick; 11-08-2010 at 01:51 AM..
Chris Hick is offline   Reply With Quote
Users who have thanked Chris Hick for this post:
SsjRavi (11-13-2010)
Old 11-13-2010, 04:39 PM   PM User | #14
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
Thank you, i have managed to fix the problem myself through creating new divs and trial and error.
I have now come across a new problem, coding is so much fun =)
Now for some reason everything within my top div where the banner is is being pushed down.
HTML
Code:
<!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_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_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_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_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" />
<style type="text/css">
<!--
.style2 {font-weight: bold; color: #FFFFFF;}
-->
</style>
</head>



<BODY onload="MM_preloadImages('../buttons/HOme 6.jpg','buttons/aboutus2.gif','buttons/News2.gif','buttons/Shop2.gif','buttons/Forums2.gif')">
<div id="container">
	<div id="top">	  
	  <div align="left"><p><img src="images/logo9090.jpg" width="90" height="90" /><img src="buttons/Banner.png" width="710" height="90" /></p>
	  </div>
	</div>
	<div id="buttons">
	  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme 6.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('News','','buttons/News2.gif',1)"><img src="buttons/News1.gif" name="News" width="140" height="40" border="0" id="News" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','buttons/aboutus2.gif',1)"><img src="buttons/AboutUs1.gif" name="Image10" width="140" height="40" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shop','','buttons/Shop2.gif',1)"><img src="buttons/Shop1.gif" name="Shop" width="140" height="40" border="0" id="Shop" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forums','','buttons/Forums2.gif',1)"><img src="buttons/Forums1.gif" name="Forums" width="140" height="40" border="0" id="Forums" /></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" width="800" height="20" /></div>
	<div id="sidebartop"><img src="buttons/MainNav.gif" width="145" height="41" /></div>
  <div id="sidebar"></div>
	<div id="spaceleft"></div>
    <div id="story">Story</div>
	<div id="spaceright"></div>
	<div id="deals">Deals</div>
	<div id="footer">Footer</div>
</div>
</BODY>

</html>
CSS
Code:
#container   {				
	background-color: transparent;	
	width: 800px;			
	height: 600px;			
	margin-left:auto;		
	margin-right:auto;		
}

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

#buttons	{
	background-color:white;
	width:800px;
	height:38px;
	float: left;
}

#nav	{
	background-color:white;
	width:800px;
	height:36px;
	float:left;
	}

#spacer	{
}

#sidebartop	{
	height:41px;
	width:800px;
}

#story	{
	background-color:#ccffcc;
	width:464px;
	height:343px;
	border: thin solid #66cc00;
	float:left;
}

#spaceright	{
	background-color:#FFFFFF;
	width:10px;
	height:343px;
	float:left;
}	
			
#deals	{
	background-color:#ccffcc;
	width:148px;
	height:343px;
	border: thin solid #66cc00;
	float:right;
}
#sidebar	{
	background-color: #ccffcc;
	width:143px;
	height:343px;
	border:thin solid #66cc00;
	float:left;
}

#spaceleft	{
	background-color:#FFFFFF;
	width:20px;
	height:343px;
	float:left;
}

#footer	{				
	background-color:green;	
	width:800px;			
	height:30px;
	float:left;			
}
Note: I do realise that there is a div for spacer with no dimensions etc. but that is just to prevent certain divs from overlapping.
SsjRavi is offline   Reply With Quote
Old 11-13-2010, 04:40 PM   PM User | #15
SsjRavi
New Coder

 
Join Date: Oct 2010
Posts: 20
Thanks: 11
Thanked 0 Times in 0 Posts
SsjRavi is an unknown quantity at this point
This is an image indicating the problem.
Attached Thumbnails
Click image for larger version Name: problem.jpg Views: 54 Size: 39.6 KB ID: 9076  
SsjRavi is offline   Reply With Quote
Reply
Page 1 of 2 1 2

Bookmarks

Tags
css, dreamweaver, html, move, website

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 02:40 AM.
Advertisement
Log in to turn off these ads.