?
Solved

Dreamweaver CS4 Stock Layouts

Posted on 2009-07-12
13
Medium Priority
?
557 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
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

 
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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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 …
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses
Course of the Month12 days, 6 hours left to enroll

752 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