Solved

Dreamweaver CS4 Stock Layouts

Posted on 2009-07-12
13
552 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 23

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 23

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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 23

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 23

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 23

Author Closing Comment

by:Eirman
ID: 31602688
Thanks again
0
 
LVL 23

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 23

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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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 …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

733 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