I have a page with the following code:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet " href="styles/default.css" media="screen" />
<title>Untitl ed Document</title>
</head>
<body>
<div id="header">
<p> </p>
<ul id="nav">
</ul>
</div><!--/header -->
<div id="content-wrap">
<div id="bottom-background">
<div id="content">
<div class="post">
<h2>content - post</h2>
<p>Lorem ipsum </p>
</div><!--/post -->
<div class="post">
<h2>content - post</h2>
<p>Lorem ipsum </p>
</div><!--/post -->
</div><!--/content -->
<div id="sidebar">
<br />
<br />
<ul id="project_acc ordian">
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 1</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 2</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 3</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 4</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
</ul><!--/project_accordi an -->
</div><!--/sidebar -->
</div> <!--/bottom-background -->
</div>
<!--/content-wrap -->
<div id="footer">
<div id="footer-wrap">
<div id="footer-col1">
<h3>footer-col1</h3>
<p>Lorem ipsum </p>
</div><!--/footer-col1 -->
<div id="footer-col2">
<h3>footer-col2</h3>
<p>Lorem ipsum .</p>
</div><!--/footer-col2 -->
<div id="footer-col3">
<h3>footer-col3</h3>
<p>Lorem ipsum </p>
</div><!--/footer-col3 -->
</div>
<!--/footer-wrap -->
</div>
<!--/footer -->
</body>
</html>[/HTML]
here is the css:
/*--------------------------------------------------------------------------------*/
* {padding: 0; margin: 0;}
body {
font: 75%/160% Arial, Helvetica, sans-serif;
background-color:#3E4B3E;
background-image:url(../images/backgroundCircl es.gif);
background-position: top center;
background-repeat:no-repeat;
}
/*--------------------------------------------------------------------------------*/
#header {
height: 440px;
width: 960px;
margin: 0 auto;
position: relative;
}
#header h1 {
position:absolu te;
left: 444px;
top: 22px;
width:330px;
height:133px;
line-height:25px;
}
/* content wrap
---------------------------------------------------------------------------------*/
#content-wrap {
width: 960px;
margin: 0 auto;
background-image:url(../images/middle-repeat.gif);
background-position: top left;
background-repeat:repeat-y;
position:relati ve;
}
#content {
width: 500px;
float: left;
padding: 35px 0 20px 94px;
z-index: 5;
position:relati ve;
}
#bottom-bg {
}
/* post
---------------------------------------------------------------------------------*/
.post {
width: 490px;
}
.post p{
padding-top:10px;
}
.post h2 {
height:38px;
line-height:38px;
padding-left:50px;
color:#D1D4BC;
font-size:20px;
background-image:url(../images/header-bg.jpg);
background-position:top left;
background-repeat:no-repeat;
}
/* sidebar
---------------------------------------------------------------------------------*/
#sidebar {
width: 267px;
float:right;
z-index: 5;
overflow: hidden;
position:relati ve;
top: 0px;
right:80px;
}
.project_nav, .project_nav_co ntent {
padding: 0;
margin: 0 0 5px 0;
}
/* footer
---------------------------------------------------------------------------------*/
#footer {
clear: both;
}
#footer-wrap {
width: 960px;
height: 400px;
margin: 0 auto;
background-image:url(../images/footer-main-bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#footer-wrap p{
padding-top:10px;
}
/* footer-col1 */
#footer-col1 {
width: 240px;
float: left;
padding: 23px 5px 0 108px;
}
/* footer-col2 */
#footer-col2 {
width: 240px;
float: left;
padding: 23px 5px 0 0;
}
/* footer-col3 */
#footer-col3 {
width: 240px;
float: left;
padding-top: 23px;
}
This is I am having is that the bg image for the content-wrap div is not show correctly. It seems the content-wrap div is not straching in relation to the divs within it.
Any Ideas?
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet " href="styles/default.css" media="screen" />
<title>Untitl ed Document</title>
</head>
<body>
<div id="header">
<p> </p>
<ul id="nav">
</ul>
</div><!--/header -->
<div id="content-wrap">
<div id="bottom-background">
<div id="content">
<div class="post">
<h2>content - post</h2>
<p>Lorem ipsum </p>
</div><!--/post -->
<div class="post">
<h2>content - post</h2>
<p>Lorem ipsum </p>
</div><!--/post -->
</div><!--/content -->
<div id="sidebar">
<br />
<br />
<ul id="project_acc ordian">
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 1</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 2</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 3</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
<li>
<ul class="project_ nav">
<li class="project" ><h4>project 4</h4></li>
</ul>
<div class="project_ nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>
</ul><!--/project_accordi an -->
</div><!--/sidebar -->
</div> <!--/bottom-background -->
</div>
<!--/content-wrap -->
<div id="footer">
<div id="footer-wrap">
<div id="footer-col1">
<h3>footer-col1</h3>
<p>Lorem ipsum </p>
</div><!--/footer-col1 -->
<div id="footer-col2">
<h3>footer-col2</h3>
<p>Lorem ipsum .</p>
</div><!--/footer-col2 -->
<div id="footer-col3">
<h3>footer-col3</h3>
<p>Lorem ipsum </p>
</div><!--/footer-col3 -->
</div>
<!--/footer-wrap -->
</div>
<!--/footer -->
</body>
</html>[/HTML]
here is the css:
/*--------------------------------------------------------------------------------*/
* {padding: 0; margin: 0;}
body {
font: 75%/160% Arial, Helvetica, sans-serif;
background-color:#3E4B3E;
background-image:url(../images/backgroundCircl es.gif);
background-position: top center;
background-repeat:no-repeat;
}
/*--------------------------------------------------------------------------------*/
#header {
height: 440px;
width: 960px;
margin: 0 auto;
position: relative;
}
#header h1 {
position:absolu te;
left: 444px;
top: 22px;
width:330px;
height:133px;
line-height:25px;
}
/* content wrap
---------------------------------------------------------------------------------*/
#content-wrap {
width: 960px;
margin: 0 auto;
background-image:url(../images/middle-repeat.gif);
background-position: top left;
background-repeat:repeat-y;
position:relati ve;
}
#content {
width: 500px;
float: left;
padding: 35px 0 20px 94px;
z-index: 5;
position:relati ve;
}
#bottom-bg {
}
/* post
---------------------------------------------------------------------------------*/
.post {
width: 490px;
}
.post p{
padding-top:10px;
}
.post h2 {
height:38px;
line-height:38px;
padding-left:50px;
color:#D1D4BC;
font-size:20px;
background-image:url(../images/header-bg.jpg);
background-position:top left;
background-repeat:no-repeat;
}
/* sidebar
---------------------------------------------------------------------------------*/
#sidebar {
width: 267px;
float:right;
z-index: 5;
overflow: hidden;
position:relati ve;
top: 0px;
right:80px;
}
.project_nav, .project_nav_co ntent {
padding: 0;
margin: 0 0 5px 0;
}
/* footer
---------------------------------------------------------------------------------*/
#footer {
clear: both;
}
#footer-wrap {
width: 960px;
height: 400px;
margin: 0 auto;
background-image:url(../images/footer-main-bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#footer-wrap p{
padding-top:10px;
}
/* footer-col1 */
#footer-col1 {
width: 240px;
float: left;
padding: 23px 5px 0 108px;
}
/* footer-col2 */
#footer-col2 {
width: 240px;
float: left;
padding: 23px 5px 0 0;
}
/* footer-col3 */
#footer-col3 {
width: 240px;
float: left;
padding-top: 23px;
}
This is I am having is that the bg image for the content-wrap div is not show correctly. It seems the content-wrap div is not straching in relation to the divs within it.
Any Ideas?
Comment