Skip navigation
daniellewalka24
Currently Being Moderated

How do I put a picture above my header to look like the image is sat on the header?

Dec 28, 2012 2:26 PM

Tags: #cs5 #header #container

I basically want a picture above my header, and above the main container to look like the image is sat on top of it!

Please help

 

much appreicated

 
Replies
  • Currently Being Moderated
    Dec 28, 2012 2:40 PM   in reply to daniellewalka24

    In Code View, insert image after the <body> tag and before any other <div> tags.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 2:50 PM   in reply to daniellewalka24

    Without seeing your HTML and CSS code, I don't know what you're trying to do.

    Do you have a URL to your test page?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 3:07 PM   in reply to daniellewalka24

    Try inserting image into your #container div.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 3:26 PM   in reply to daniellewalka24

    Use CSS to zero out default margins and padding.

     

    body {

    margin:0;

    padding:0;

    }

     

    #mainContent {

    margin:0;

    padding:0;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 3:42 PM   in reply to daniellewalka24

    OK, let's see your CSS & HTML code (do not use e-mail for this).

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 4:18 PM   in reply to daniellewalka24

    Be sure to define your local site folder in DW so your image paths work when uploaded.  Don't use spaces in file or folder names.

     

    Try this code in new, blank document:

     

    <!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>Untitled Document</title>
    
    <style type="text/css">
    
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    }
    
    a img { border: none; }
    
    a {text-decoration:none}
    a:link {color #933}
    a:visited {color: #6E6C64;}
    a:hover, a:active, a:focus { text-decoration: underline }
    
    .container {
    width: 970px;
    background: #FFF;
    margin: 0 auto;
    font-size:16px;
    }
    
    .header {
    background-color: maroon;
    min-height:126px; /**same height as image**/
    margin: 0;
    padding: 0;
    }
    
    .footer {
    margin:0;
    padding:0;
    background: #CCC49F;
    }
    
    .fltrt {
    float: right;
    margin-left: 8px;
    width:auto;
    }
    
    .fltlft {
    float: left;
    margin-right: 8px;
    width:auto;
    }
    
    .clearfloat {
    clear: both;
    font-size: 1px;
    line-height: 0px;
    display:block;
    }
    
    /**text styles**/
    .content h1, 
    .content p, 
    .footer p{
    margin:0;
    padding:0 20px
    }
    
    </style>
    </head>
    
    <body>
    <div class="container">
    
    <div class="header">
    <img src="Awning_Slider.png" width="970" height="126" />
    <!--end header-->
    </div>
    
    <div class="content">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat neque a eros ultrices nec ultricies turpis auctor. Fusce tempor hendrerit ligula, nec dictum odio dictum id. Fusce convallis metus eget diam aliquam venenatis? Vestibulum id augue a justo scelerisque malesuada rutrum porttitor nisl. Curabitur id ultricies est. Proin sit amet velit quis magna pellentesque pulvinar in id erat. Cras mauris leo, tincidunt id egestas ac, suscipit at tortor. Sed justo lorem, consequat non feugiat vitae, interdum nec leo. Nam justo massa, suscipit eu aliquet eget, consectetur eu ipsum? Nam non lectus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales mauris ut lacus dictum tempor. Proin nibh libero; euismod vel varius non, condimentum sed ipsum. </p>
    <!-- end content -->
    </div>
    
    <div class="footer">
    <p>Footer</p>
    <!--end footer-->
    </div>
    
    <!--end container-->
    </div>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 29, 2012 11:46 AM   in reply to daniellewalka24

    OK.  Try this instead. 

     

    <!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>Untitled Document</title>
    <style type="text/css">
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    }
    
    a img { border: none; }
    
    a {text-decoration:none}
    a:link {color #933}
    a:visited {color: #6E6C64;}
    a:hover, a:active, a:focus { text-decoration: underline }
    
    
    .header {
    background:url(Awning_slider.png) no-repeat center top;
    min-height:126px; /**same height as background image**/
    width:970px; /**same width as background image**/
    margin: 0 auto;
    padding: 0;
    }
    
    .content {
    width:950px; /**adjust width as req'd**/
    background:#FFF;
    margin:0 auto;
    font-size:16px;
    }
    
    .footer {
    width:950px; /**same width as content**/
    margin:0 auto;
    padding:0;
    background: #CCC49F;
    }
    
    .fltrt {
    float: right;
    margin-left: 8px;
    width:auto;
    }
    
    .fltlft {
    float: left;
    margin-right: 8px;
    width:auto;
    }
    
    .clearfloat {
    clear: both;
    font-size: 1px;
    line-height: 0px;
    display:block;
    }
    
    /**text styles**/
    .content h1, 
    .content p, 
    .footer p{
        margin:0;
        padding:0 20px
    }
    
    </style>
    </head>
    
    <body>
    <div class="header"> 
    <!--end header-->
    </div>
    
    <div class="content">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat neque a eros ultrices nec ultricies turpis auctor. Fusce tempor hendrerit ligula, nec dictum odio dictum id. Fusce convallis metus eget diam aliquam venenatis? Vestibulum id augue a justo scelerisque malesuada rutrum porttitor nisl. Curabitur id ultricies est. Proin sit amet velit quis magna pellentesque pulvinar in id erat. Cras mauris leo, tincidunt id egestas ac, suscipit at tortor. Sed justo lorem, consequat non feugiat vitae, interdum nec leo. Nam justo massa, suscipit eu aliquet eget, consectetur eu ipsum? Nam non lectus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales mauris ut lacus dictum tempor. Proin nibh libero; euismod vel varius non, condimentum sed ipsum. </p>
    <!-- end content -->
    </div>
    
    <div class="footer">
    <p>Footer</p>
    <!--end footer-->
    </div>
    
    </body>
    </html>

     

    Use the Awning image for your header background. 

    Delete .container div because you no longer need it.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 29, 2012 1:32 PM   in reply to daniellewalka24

    You asked how to get your image on top of content and I supplied you with the  code to do that.  You can change background-colors yourself by editing the CSS code. See CSS Backgrounds for details:

    http://www.w3schools.com/css/css_background.asp

     

     

    Good luck with your project!

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points