Solved

Dreamweaver CS4 Stock Layouts

Posted on 2009-07-12
13
549 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
  • 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
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…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now