PDA

View Full Version : Gaps in Layout?? Help plz


AlexC
12-12-2010, 07:41 PM
Hi,

I can't figure out where the salmon colored gaps under the header and above"main content" are coming from. (it also happens above the footer).

I thought they were either above or below margins but those are all set to 0 in the CSS.

How do I get rid of them?


code below:

<!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 {
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;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #333333;
}
.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. */
}
.picDiv {
}
.oneColFixCtrHdr #header {
background: #DDDDDD; /* 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. */
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
margin: 0px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
}
.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 */
}
.style2 {font-size: medium}
.style3 {font-family: Georgia, "Times New Roman", Times, serif}
-->
</style>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<h1 class="style3">Alex Cieminski&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style2">paintings</span></h1>
<!-- end #header --></div>

<div id="picDiv">
<p><img src="assets/testimage.jpg" width="780" height="275" /></p>
<p>YYYLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, jus.</p>
<!-- end #picDiv --></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>

Corrosive
12-13-2010, 06:22 AM
Try adding

h1 {margin: 0; padding 0;} to your stylesheet and see what that does. By the way you should only really have one instance of h1 on your page for good SEO practice.

AlexC
12-13-2010, 09:55 PM
I'm still a newbie and am not sure where exactly I should put it. Tried inserting it into the internal CSS and also attaching as an ext style sheet. nothing. I don't really think just messing with the header will do it though as it shows up in 3 places on the page, including above the footer. All margins are set to 0.
p.s. As you can probably tell, the page is from one of Dw's html templates... so there shouldn't be any quirky stuff.

AlexC
12-13-2010, 11:35 PM
Actually, I seem to have isolated the issue to be with the maincontent div... still can't tell what it is though

DWcourse
12-14-2010, 12:26 AM
It would be much easier if we could view the actual page online.

AlexC
12-14-2010, 01:14 AM
Did you view the thumbnail? (I'm using the css layout bckgrounds visual aid.)

DWcourse
12-14-2010, 01:21 AM
Did you view the thumbnail? (I'm using the css layout bckgrounds visual aid.)

Yes but it's easier to debug code on a page (using tools like Firebug) than trying to reconstruct the page from the code you posted.

edbr
12-14-2010, 02:13 AM
in fact using your code and viewing locally i dont get any fishy colour gaps at all

AlexC
12-14-2010, 03:00 AM
Ha!
Are you activating the CSS Layout Backgrounds Visual Aid? The colors always come up different.
I just copied and pasted the code afresh to check and it's still there. 3 small gaps!
At this point it's really not that big a deal but now I'm just mostly curious.
Don't sweat it if you don't want.

edbr
12-14-2010, 03:18 AM
no i used notepad++