Hi Everyone,

I have a very simple site layout that I am trying to merge into a shopping cart application.

I have created the layout in Dreamweaver and it looks fine there, but when I preview it in the browser, I get gaps between the 'campaign' banner, the 'body' and the 'footer', can anyone help? Pulling my hair out here!

Look forward to your replies.

Here is the HTML

<!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" />
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<div id="page">
  <div id="header_holder">
    <div id="logo"></div>
    <div id="cart">
    <div id="e_basket"><%e_basket%></div>
    </div>
  </div>
  <div id="menu">
    <div id="menu_l"></div>
    <div id="menu_body">
    <div id="e_menu"><%e_menu%></div>
    </div>
    <div id="menu_r"></div>
  </div>
  <div id="campaign"></div>
  <div id="body">
    <div id="body_holder">
    <div id="e_page"><%e_page%></div>
    </div>
  </div>
  <div id="footer">
    <div id="footer_l"></div>
    <div id="footer_body">
	<div id="footer_holder">
    <div id="e_toolbar"><%e_toolbar%></div>
    </div>  
  </div>
    <div id="footer_r"></div>
  </div>
</div>
</center>
</body>
</html>

And here is the CSS

body {
margin:0px; padding:0px;
background:url(site_bg_2.png) 0 0 repeat-x fixed;
}
#page {
	height:880px;
	width: 950px;
}

#header_holder {
	height: 100px;
	width: 950px;
}
#logo {
	height: 100px;
	width: 600px;
	float: left;
}
#cart {
	float: right;
	height: 100px;
	width: 350px;
}
#menu {
	height: 30px;
	width: 950px;
}
#menu_l {
	float: left;
	height: 30px;
	width: 29px;
	background:url(menu_bg_l.png) no-repeat top;	
}
#menu_body {
	float: left;
	height: 30px;
	width: 892px;
	background:url(menu_bg.png) repeat-x top;
}
#menu_r {
	float: left;
	height: 30px;
	width: 29px;
	background:url(menu_bg_r.png) no-repeat top;
}
#campaign {
	height: 250px;
	width: 950px;
	background:url(campaign_bg.png) repeat-x top;
}
#body {
	height:400;
	width: 950px;
	background-color:#FFFFFF;
}
#body_holder {
	margin: 20px;
	height: 360px;
	width: 910px;
}
#footer {
	height: 200px;
	width: 950px;
}
#footer_l {
	float: left;
	height: 200px;
	width: 29px;
	background:url(footer_bg_l.png) no-repeat top;
}
#footer_body {
	float: left;
	height: 200px;
	width: 892px;
	background:url(footer_bg.png) repeat-x top;
}
#footer_holder {
	height: 160px;
	width: 892px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#footer_r {
	float: left;
	height: 200px;
	width: 29px;
	background:url(footer_bg_r.png) no-repeat top;
}

Correct the red color code.

#body {
height:400;/* you need unit measure, only numeric value make browser confuse, add px */
width: 950px;
background-color:#FFFFFF;
}

When I corrected this, the gap between and body and footer removed. But, there is a gap between campaign div and body div. The easiest way is float the campaign div. Don't forget to clear all float element for placing next element to appear in new line. The center tag should not be used in xhtml. XHTML strict mode cann't support the deprecated tag likes font tag. You can use margin-auto property instead of it.

10px is huge on a 17inch 640*480 display
10px is readable on a 17inch 800*600 display
10px is small on a 17inch 1024*768 display
10px is invisible on a 17inch 1280 * 1440 display
and occupies the whole screen on a blackberry

px are not the W3C recommended dimension for screen display
ems and % adjust to screen settings and are the recommended dimensions
Dreamweaver is not a particularly good choice as a layout tool
Incidentally
on my monitor
30px, is 2.4mm high,
and the 950px body, would occupy 44% of the 2160px screen, ? ?

Hi use the property

overflow:hidden;

for your body tag.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.