Need some help please

[sunset]

Hello! I having some troubles with this site I am working on.I am using CSS and XHTML,no tables.It is a 3 column design with footer and header.The menu will be a drop down horizontal menu.

The problem is the background image won't go all the way down the left side.Here is the link to the page, so you can see what I am talking about.

http://www.sunsetinspirations.com/staging/curve.html

I included the CSS in the page in case you need to see it.

Any help will be greatly appreciated and thanks in advance,

sunset

[mafunk]

You've got the page coded liquid (with percentages), yet the graphic is hard coded with a fixed length and width.

You need to do a couple of things to fix this:
1) Ad a cell with a stretchable maroon sliver to the far top right of page and in a cell to the far left bottom of page. That will take care of that

But problem is that your text still runs outside of the maroon graphic. You need to fix that too.

[Paul O'B]

Hi Sunset,

if you want a solid colur of explicit width to travel down the left hand side of the page then the easiest way to do it is to make a background gif that is as wide as the column you require e.g.200px x 5px.

You then repeat this down the left hand side of the body element which means it will repeat forever. Obviously the width can't be a percentage so your left column should also be a fixed width also otherwise it will look odd.

You can then place your curve image in another div that is absolutely placed at the top of the page and the other content can lay on top of it. You may need to set z-indexes to keep the other content on top.

If you want your left column to be a fluid width but have a 100% (or greater) height then things will be more complicated. If you look at my 3 column thread stickied at the top of the threads there is an explanation of 100% height in the demo that might help.

Heres a very rough example of the first method I mentioned.

<style type="text/css">
/***********************************************/
/* HTML tag styles							 */
/***********************************************/ 
body{
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #000000;
 line-height: 1.166;
 margin: 0px;
 padding: 0px;
 border: none;
 background-image: url(bg.gif);
 background-repeat: repeat-y;
 background-position: left top;
}
a{
 color: #660000;
 text-decoration: none;
}
a:link{
 color: #000000;
 text-decoration: none;
}
a:visited{
 color: #006699;
 text-decoration: none;
}
a:hover{
 text-decoration: underline;
 background-color: #FFFFFF;
 color: #804040;
}
h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}
h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;
}
h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #FFF;
 margin: 0px;
 padding: 0px;
}
h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}
h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}
h6{
 font-family: Arial, sans-serif;
 font-size: 100%;
 color: #660000;
 margin: 0px;
 padding: 0px;
}
ul{
 list-style-type: square;
}
ul ul{
 list-style-type: disc;
}
ul ul ul{
 list-style-type: none;
}
label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}

/***********************************************/
/* Layout Divs								 */
/***********************************************/
#masthead{
 padding: 10px 0px 0px 0px;
 position:relative;
 z-index:2;
}
#topimage {
 position:absolute;
 top:0;left:0px;
 height:600px;width:100%;
   background-color: transparent;
 background-image:  url(http://www.sunsetinspirations.com/staging/img/curve.jpg);
 background-repeat: no-repeat;
z-index:1;
}
#navBar{
 float: left;
 width: 20%;
 margin: 0px;
 padding: 0px;
 background-color: transparent;
  position:relative;
 z-index:2;
 }
#headlines{
  float:right;
 width: 20%;
 border-left: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding-right: 10px;
}
#content{
 float: left;
  width: 55%; position:relative;
 z-index:2;
}
/***********************************************/
/* Components								  */
/***********************************************/
#siteName{
 margin: 0;
 padding: 0 0 0 10px;
}

/************* #globalNav styles **************/
#globalNav{
padding: 0px 0px 5px 10px;
color: #cccccc;
}
#globalNav img{
 display: block;
}
#globalNav a {
 font-size: 90%;
 padding: 0 4px 0 0;
}
/*************** #pageName styles **************/
#pageName{
 margin: 0px;
 padding: 0px 0px 0px 10px;
}
/************** .feature styles ***************/
.feature{
 padding: 0px 0px 10px 10px;
 font-size: 80%;
}
.feature h3{
 padding: 30px 0px 5px 0px;
 text-align: center;
}
.feature img{
 float: right;
 padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/
.story{
 clear: both;
 padding: 10px 0px 0px 10px;
 font-size: 80%;
}
.story p{
 padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/
#siteInfo{
 clear: both;
 border: 1px solid #660000;
 font-size: 75%;
 color: #660000;
 padding: 10px 10px 10px 10px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/
#sectionLinks{
 position: relative;
 margin: 0px;
 padding: 0px;
 border-bottom: 1px solid #cccccc;
 font-size: 90%;
}
#sectionLinks h3{
 padding: 10px 0px 2px 10px;
}
#sectionLinks a {
 display: block;
 border-top: 1px solid #cccccc;
 padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
 background-color: #dddddd;
}

/*********** .relatedLinks styles ***********/
.relatedLinks{
 position: relative;
 margin: 0px;
 padding: 0px 0px 10px 10px;
 font-size: 90%;
}
.relatedLinks h3{
 padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
 display: block; 
}
/************** #advert styles **************/
#advert{
 padding: 30px 0px 10px;
}
#advert img{
 display: block;
}

/************** #headlines styles **************/
#headlines{
 margin: 0px;
 padding: 10px 0px 20px 10px;
 font-size: 80%;
 
}
#headlines p{
 padding: 5px 0px 5px 0px;
}
</style>
</head>
<body>
<div id="topimage"></div>
<div id="masthead"> 
etc...............

Hope that helps.

Paul

[sunset]

Thank you both very much!I wrestled with this for quite abit.And the solution was so simple.

Paul,I went and read your post.It did clear things up.I also bookmarked your site.

Thanks again,
sunset