...

View Full Version : margin @ NavBar:main content



ikeathesofa
12-18-2009, 11:26 PM
I can't get the space between the nav bar and main content area to disappear.

www.propeller-heads.com/index.htm

Does anyone have any ideas?
I'd place code in here, but I don't know what part of the CSS is affecting this portion of the layout.

I'd be very grateful for help with this problem.


Thanks,
IkeaTheSofa

Excavator
12-19-2009, 12:15 AM
Hello ikeathesofa,
Try another way of presenting that h1 that is margined off the page.
Look what happens when you get rid of it -
onclick="MM_nbGroup('down','group1','WhoAreYou','_img/WhoAreYouLinkOrig.png',1)" onmouseover="MM_nbGroup('over','WhoAreYou','_img/WhoAreYouLinkHover.png','_img/WhoAreYouLinkOrig.png',1)" onmouseout="MM_nbGroup('out')"><img src="_img/WhoAreYouLinkNonFocus.png" alt="Who are you?" name="WhoAreYou" id="WhoAreYou" onload="" width="116" border="0" height="70"></a><a href="links.htm" target="_top" onclick="MM_nbGroup('down','group1','AlienGenius','_img/AlienGeniusLinkOrig.png',1)" onmouseover="MM_nbGroup('over','AlienGenius','_img/AlienGeniusLinkHover.png','_img/AlienGeniusLinkOrig.png',1)" onmouseout="MM_nbGroup('out')"><img src="_img/AlienGeniusLinkNonFocus.png" alt="Alien Genius" name="AlienGenius" id="AlienGenius" onload="" width="116" border="0" height="70"></a>

<!-- end #header --></div>
<div id="backgroundImg">
<div id="sidebar">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cu

And -
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
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;
}
*{margin:0;padding:0;}
#backgroundImg {
background: url(_img/PropMainContentBackground.png) no-repeat left top;
}

.whiteText {
color: #EEE;
}

.twoColLgSide #mainContainer {
width: 913px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-right: auto;
margin-left: auto;
}
.twoColLgSide #container {
width: 700px;
height: 1200px;
margin: 0px 0px 0px 200px; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}

.whiteback {
background: #EEE;
}

.twoColLgSide #header {
/* 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. */
}
#body #mainContainer #container #header {
overflow:auto;
}

#mainContainer {
left: 0px;
top: 0px;
position: relative;
background-image: url(PropLogoWeb2.png);

}

ikeathesofa
12-19-2009, 12:35 AM
Excavator,

Thanks so much for your help!

I never considered that h1 header could be causing the problem.

Does the "overflow: auto" just create enough space for the contents?

Thanks again.

IkeaTheSofa

Excavator
12-19-2009, 01:03 AM
Excavator,

Thanks so much for your help!

I never considered that h1 header could be causing the problem.

Does the "overflow: auto" just create enough space for the contents?

Thanks again.

IkeaTheSofa

Usually use it to clear floats (http://www.quirksmode.org/css/clearing.html)... but I see your not floating anything in #header so it may not be needed?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum