Solved

Dreamweaver CS4 Stock Layouts

Posted on 2009-07-12
13
553 Views
Last Modified: 2012-05-07
When I create a container div of say 750 px and then insert three 100% divs (header content footer) they are butted up against each other which is what one would expect.

When I create a new page based on the "one column fixed, centered with header and footer" Layout
I wind up with a gap between all three divs. I just cannot get rid of the gap. There are no margins so I cannot see how the gap is created.
What am I missing ?
0
Comment
Question by:Eirman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24837341
Hi Eiramn

I don't see gaps when I apply the template.  Can we look at the page code and CSS?
0
 
LVL 24

Author Comment

by:Eirman
ID: 24838527
For the purposes of replying to your request, I created a new html page based on the "one column fixed, centered with header and footer" Layout.
I made only one change which was to change the background colour of #mainContent to clearly illustrate the approx 18px white gap above and below this div.

(I also get this gap with every other layout I try)

<!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>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtrHdr #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 20px;
	background-color: #FF9;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style></head>
 
<body class="oneColFixCtrHdr">
 
<div id="container">
  <div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Open in new window

0
 
LVL 24

Author Comment

by:Eirman
ID: 24838559
Still experimenting - If I eliminate left & right padding and change the widths to 100% the gap disappears
Still experimenting
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 24

Author Comment

by:Eirman
ID: 24838584
I found setting the widths to 96% , no padding , 3% Left & Right margins works - no gap
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24842535
Okay, hang on a bit whilst I play
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 24842745
Yes, it's because the width isn't declared and the inheritance is screwy with the addition of the padding left/right
0
 
LVL 24

Author Comment

by:Eirman
ID: 24843650
Thank for the reply - Following on from your comment I created a new page from a layout and the gap was there.
I set the width of #mainContent to the same as that of the container (780px) and removed the padding and the gap disappeared ...... Solved thanks!

So am I right in concluding that the dreamweaver css layouts are not up to scratch?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24844137
>> So am I right in concluding that the dreamweaver css layouts are not up to scratch?

Apparently so, at least with the static widths.  I never use a static width (I prefer fluid sites) so I've never run into this before.
0
 
LVL 24

Author Closing Comment

by:Eirman
ID: 31602688
Thanks again
0
 
LVL 24

Author Comment

by:Eirman
ID: 24844688
Looks like the fluid layouts are just as defective
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24845148
Hah!  Why am I not surprised (typical Adobe QC)?

I feel bad about the points...I certainly didn't earn them.  You should ask a Moderator to convert this to a PAQ and Refund on your post since you did all the hard work.
0
 
LVL 24

Author Comment

by:Eirman
ID: 24845210
You are welcome to the points - they cost me nothing - besides you spotted something that I missed

I'll get a better source for my css layouts - project seven looks good


0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24845262
PVII does good work, as does WebAssist (expensive, though).  Personally, I just Google for "CSS X column layout" and almost always can find something decent.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question