SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why copyright is not coming at bottom ?

    Hello,

    I made this css code and page layout all is fine except that the copyright is not coming properly at the bottom and instead its coming in the middle of the content. Below is my css and html.

    Code:
    html
    {
            background: #73ADD7 url("../images/gradient.gif") repeat-x;
            font-family: Arial,verdana,sans-serif;
            font-size: 12px;
            text-decoration: none;
    }
    
    body
    {
            padding: 0;
            margin: 0;
    }
    
    #wrap
    {
            background: url("../images/sky3.jpg") no-repeat center top;
            color: #666;
            width: 100%;
            height: 514px;
    }
    
    #content
    {
            padding: 7px;
            margin: 0 auto;
            text-align: center;
            border-top: 1px solid #000000;
            border-left: 1px solid #000000;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
    }
    
    #footer
    {
            padding: 10px;
            text-align: center;
            font-size: 10px;
    }
    And html:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <link href="./css/default.css" rel="stylesheet" type="text/css" />
    <body>
    <div id="wrap">
            <div style="height: 148px;"></div>
            <div id="content" style="background-color: #FFFFFF; width: 860px;">
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
            </div>
    </div>
    <br />
    <div id="footer">Copyright &copy; 2010, <?=$settings["sitename"]?></div>
    
    
    </body>
    </html>
    Please help to fix.

    Thanks.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Remove the height from your #wrap div.
    Then set a bottom margin on it to eliminate the <br /> tag you are using to create space after it.

    I also named that anonymous div with height:148px; as "header" and moved the styles to the css.

    You will be better off moving your html styles to the body element also. There can be problems sometimes when setting BG images on the html element. By setting it on the body it will paint the html as well.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    <style type="text/css">
    body {
        padding: 0;
        margin: 0;
        background: #73ADD7 url("../images/gradient.gif") repeat-x;
        font-family: Arial,verdana,sans-serif;
        font-size: 12px;
        text-decoration: none;
    }
    #wrap {
        background: url("../images/sky3.jpg") no-repeat center top;
        color:#666;
        width:100%;
        /*height: 514px;*/
        margin-bottom:20px;/*eliminate br tag*/
    }
    #header {
        height:148px;
        background:#CCC;
    }
    #content {
        width:860px;
        margin:0 auto;
        padding:7px;
        text-align:center;
        border:1px solid #000;
        background:#FFF;
    }
     
    #footer {
        padding: 10px;
        text-align: center;
        font-size: 10px;
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
            <div id="header"></div>
            <div id="content">
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
                    <p>loremp ipsum</p>
            </div>
    </div>
     
    <div id="footer">Copyright &copy; 2010, <?=$settings["sitename"]?></div>
     
    </body>
    </html>

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Sorry i fixed it. Thanks for your help!

    Thanks.

  4. #4
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tapan View Post
    Hi,

    Sorry i fixed it. Thanks for your help!

    Thanks.
    Hi,

    Sorry the solution i found isn't working properly. I specified the height but if there is more content then height is not increasing by itself. So the background image named: sky3.jpg is a pic of height: 500px and its a picture that must be displayed whether content is there or not.

    How to do it ?

    Thanks.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could set min-height instead of height thus it will allow for expansion .

    IE6 will need height set instead
    Code:
    #element{min-height:500px;
    background:url(whatever.jpg);}
    
    * html #element{height:500px;/*IE6*/}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You could set min-height instead of height thus it will allow for expansion .

    IE6 will need height set instead
    Code:
    #element{min-height:500px;
    background:url(whatever.jpg);}
    
    * html #element{height:500px;/*IE6*/}

    Hi,

    Excellent. Working like a charm.

    Thanks.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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