Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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-----------*/

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,744
    Thanks
    0
    Thanked 244 Times in 239 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •