Reply With Quoteso which is it? no one knows or no one cares?
|
|
|
|
|
|
|
Established Member
Hello all,
I'm having some trouble with a page container I've set up and also with two images that should be sitting on top of each other. First, I've set up the page container as a div in the css and set the width to 760px while leaving the margin blank for the time being. What I don't understand is why my footer and sidebar continue to float outside of the page container. See the div tag highlighted below...is this a browser issue with IE?
I think I was able to get around this last time by wrapping all of my HTML elements in the page container div. There must be a better way!
2nd question: My header image is set as a background and I've tried to layer the H1 element on top of it with the CSS float attribute, yet they won't stack. Any thoughts?
RED = page container issue
BLUE = photo issue
<!--CSS STARTS HERE-->
#page-container {width: 760px; margin: auto;
}
html,body {margin: 0px; padding: 0;
}
body {font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff;
}
#main-nav {background: height: 50px;
}
#header {height: 150px; background: #db6d16 url (../images/corpcomm_banner.jpg);
}
#sidebar-a {float: right; width: 280px; line-height: 18px;
}
#sidebar-a .padding {padding: 25px;
}
#content {margin-right: 280px; line-height: 18px;
}
#content .padding {padding: 25px;
}
h1 {margin: 0; padding: 0; float: left; margin-top: 57px; padding-right: 31px;
}
#content h2 {margin: 0; padding: 0; padding-bottom: 15px;
}
#content p {margin: 0; padding: 0; padding-bottom: 15px;
}
#footer {height: 66px; clear: both;
}
<!--CSS ENDS HERE-->
</style>
</head>
<!HTML STARTS HERE-->
<body>
<!--PAGE DIVS START HERE-->
<div id="page-container">
<!--MAIN NAVIGATION AREA, KEEP OUT!-->
<div id="page-container">
<div id="main-nav">
<dl>
<dt id="About"><a href="#">About</a></dt>
<dt id="Documents"><a href="#">Documents</a></dt>
<dt id="Images"><a href="#">Images</a></dt>
<dt id="Flash"><a href="#">Flash</a></dt>
</dl></div></div>
<div id="header">
<h1><img src="images/web_services.gif" width="236" height="36" alt="web services" border="0"/></h1>
</div>
<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div></div>
<div id="content">
<div class="padding">
<h2><img src="images/about.gif" width="54" height="14" alt="about"/></h2>
<p><strong>Communications Group - Web Services</strong> is a test location on the portal that we hope will allow user's to better manage, store, and transfer web content for various user groups.
portfolio.</p>
<p>This site is currently being tested and devloped, so if you have any questions or would
like more information about the services we provide please feel free to contact us.</p>
<h2><img src="images/contact.gif" width="98" height="14" alt="contact"/></h2>
<p>Phone: (781) 647-2375<br/>
Email: <a href="mailto:XXXXX">XXXXXX</a><br/>
XXXXXXX Corporate Headquarters<br />
XXXXXXX.<br />
XXXXXXXX<br/>
United States<br/></p>
<p><a href="#">More contact information...</a></p>
</div></div>
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Documents</a> -
<a href="#">Images</a> -
<a href="#">Flash</a> -
</div>
Copyright © XXXXX., 2008
Created by XXXXXXX, Communications Group <a href="mailto:XXXXXXX/"?subject="Comments on the Communications Microsite"> for
<a href="XXXXXXXX">XXXXXXX</a>
</div>
<!--PAGE DIVS END HERE-->
<!--END OF PAGE CONTAINER DIV-->
</div>
-------------------------------- END
Thanks all!
Established Member
so which is it? no one knows or no one cares?
Posting Permissions