Text is flowing over a background image. Make it stop!!

AliWasHere · 06-01-2011, 10:53 AM

Just a simple HTML/CSS problem...There are a couple things wrong with my code. The biggest problem I want to address is that the text is going over the image when I want it to push on it. Whenever I add padding or anything to it, it breaks up the borders that I've created for my design so I don't know how to work around that...
Another problem I have with this code is that the overflow is staying hidden when I want the overflow to be visible. Any thoughts?
I've tried using Firebug during this whole process, but I'm running out of ideas...

Here's the webpage...http://cms.aliwashere.com/recipebook/recipe.html

Code:

<!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>Recipe Book</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="header">
<p class="heading" style="font-size:36px;">My Recipe Book</p>
	</div>	<!-- end header -->
<div id="cwrapper">

<div id="leftCol"><img class="image" src="images/cooking.jpg" width="358" height="225" /></div>	<!-- end leftCol -->
  
  <div id="rightCol">
  <div id="recipe">
  <h1>Lorem Ipsum</h1>	
   
   <ul>
    <li>12 ounces dry fettuccine pasta</li>
    <li>2 red bell peppers, julienned</li>
    <li>3 cloves garlic, minced</li>
    <li>3/4 teaspoon cayenne pepper</li>
    <li>1 cup sour cream</li>
    <li>3/4 cup chicken broth</li>
    <li>3/4 cup grated Parmesan cheese</li>
    <li>salt and pepper to taste</li>
   </ul>
   
   <p>Sigh view am high neat half to what. Sent late held than set why wife our. If an blessing building steepest. Agreement distrusts mrs six affection satisfied. Day blushes visitor end company old prevent chapter. </p></div>
</div> <!--- end of recipe content div -->
   <!-- end rightCol -->
  </div> 
<!-- end of content wrapper -->

  <div id="footer"></div>	<!-- end footer -->
    
</div><!-- end wrapper-->

</body>
</html>

Code:

@charset "UTF-8";
/* CSS Document */

/*---------------LAYOUT--------------*/


body {
	font-family:"Bell MT";
	}

h1 {
	font-size:24pt;	
	font-weight: normal;
	padding-left:85px;
	padding-top:30px;
}

#wrapper{width:900px;
		height:auto;
		margin:0 auto;	
}

#header{
	height:100px;
	width:898px;
	border-bottom:solid 1px #000;
}

#cwrapper {
	width:898px;
	min-height:400px;
	background:url(images/veggies.png) 638px 194px no-repeat;
	overflow:visible;		
}

.heading {
	position:relative;
	left:650px;
	top:70px;
}

.image {
	z-index:-1;
	position:relative;
	top:107px;
	left:37px;
}

#leftCol{
	height:auto;
	min-height:400px;
	width:429px;
	float:left;
	border-left:solid 1px #000;
	background:url(images/ribbon.png) top left no-repeat;
	background-position:-50px 30px;
	overflow:visible;
	z-index:1;
}

#rightCol{
	min-height:400px;
	width:467px;
	float:right;
	border-right:solid 1px #000;	
}

#recipe {
	width:360px;
	height:auto;
	position:relative;
	left:90px;	
}

li {
	list-style-type:none;
	font-size:16px;
}

#footer{
	clear:both;
	height:80px;
	width:898px;
	border-top:solid 1px #000;
}




/*-------------END LAYOUT-----------*/

coothead · 06-01-2011, 09:20 PM

Hi there AliWasHere

and a warm welcome to these forums.

How does this look...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://cms.aliwashere.com/recipebook/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Recipe Book</title>

<style type="text/css">
* {
    padding:0;
    margin:0;
 }
body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
 }
#container {
    width:902px;
    margin:auto;
 }
h1 {
    padding:66px 13px 4px 0;
    font-size:225%;
    font-weight:normal;
    text-align:right;
 }
#content {
    padding-bottom:221px;
    border:1px solid #000;
    background-image:url(images/veggies.png);
    background-repeat:no-repeat;
    background-position:right bottom;
    overflow:hidden;
 }
h2{
    height:55px;
    padding:53px 12px 0 0;
    margin-top:58px;
    background-image:url(images/ribbon.png);
    background-repeat:no-repeat;
    background-position:-30px -28px;
    font-size:200%;	
    font-weight:normal;
    text-align:right;
 }
#left,#right {
    float:left;
    width:450px;
 }
#image {
    display:block;
    width:358px;
    height:225px;
    padding:2px;
    border:1px solid #333;
    margin:-30px auto 0;
 }
ul {
    margin:20px 0 0 100px;
    list-style-type:none;
    font-size:100%;
 }
#right p {
    width:360px;
    margin:20px auto;
 }
</style>

</head>
<body>

<div id="container">

<h1>My Recipe Book</h1>

<div id="content">

<h2>Lorem Ipsum</h2>

<div id="left">

 <img id="image" src="images/cooking.jpg" alt="cooking">

</div><!-- end #left -->

<div id="right">
 
<ul>
 <li>12 ounces dry fettuccine pasta</li>
 <li>2 red bell peppers, julienned</li>
 <li>3 cloves garlic, minced</li>
 <li>3/4 teaspoon cayenne pepper</li>
 <li>1 cup sour cream</li>
 <li>3/4 cup chicken broth</li>
 <li>3/4 cup grated Parmesan cheese</li>
 <li>salt and pepper to taste</li>
</ul>

<p>
Sigh view am high neat half to what. Sent late held than set why wife our. 
If an blessing building steepest. Agreement distrusts mrs six affection 
satisfied. Day blushes visitor end company old prevent chapter. 
</p>

</div><!-- end #right -->

</div><!-- end #content -->
</div><!-- end #container -->

</body>
</html>

coothead