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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    background for layout

    Hello, I have made this layout -> http://i53.tinypic.com/sctjc6.jpg and don't know how to do the background. I want the background to fill the rest of the page by same background as container and footer have. (so it will look like the background is continuing).

    i think i have an idea have can the upper background look like -->
    body
    {
    background:url(bg.jpg); /*it's the 1px line of container bg*/
    background-repeat:repeat-x;
    }

    but it will repeat just the container background to the sides (the gray color and black line), not footer. how to tell the footer to take the rest of the page's height and fill it with bg? height:100% or min-height:100% doesn't work.

    I think the whole code isn't important, it's just fixed size centered container and a footer with width:100% - not part of the container, but if you need it anyway to answer my question, i will provide.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Share you HTML and CSS code

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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" xml:lang="en" lang="en">    
    <head>
    <style type="text/css">
    body
    {
    padding:0;
    margin:0;
    background:lime;
    }
    
    #container
    {
    width:1280px;
    height:678px; /*+122px z footru = 800px*/
    background:gray;
    margin:0 auto;
    }
    
    #menu
    {
    margin-top:39px;
    margin-left:105px;
    width:918px;
    height:48px;
    background:red;
    float:left;
    }
    
    #logo
    {
    width:148px;
    height:66px;
    float:left;
    background:blue;
    margin-left:9px;
    margin-top:30px;
    }
    
    #ponuka
    {
    margin-top:97px;
    height:127px;
    width:191px;
    float:left;
    background:white;
    }
    
    #tien
    {
    width:19px;
    height:434px;
    background:pink;
    float:left;
    }
    
    #content
    {
    width:1075px;
    height:434px;
    margin-top:58px; /*+10 = 68*/
    background:green;
    float:left;
    margin-left:105px;
    }
    
    #content_box
    {
    width:865px;
    height:434px;
    float:left;
    background:aqua;
    z-index:1;
    }
    
    #content_text
    {
    position:relative;
    width:285px;
    height:371px;
    left:73px;
    top:81px;
    background:orange;
    float:left;
    z-index:3;
    }
    
    #content_photo
    {
    position:relative;
    width:572px;
    height:393px;
    top:21px;
    right:13px;
    background:blue;
    float:left;
    z-index:2;
    }
    
    #novinky
    {
    width:100%;
    height:40px;
    background:black;
    float:left;
    margin-top:50px;
    }
    
    #footer
    {
    width:100%;
    height:122px;
    background:red;
    }
    </style>
    
    </head>
    <body>
      <div id="container">
        <div id="menu">
        </div>
        <div id="logo">
        </div>
        <div id="content">
          <div id="ponuka">
          </div>
          <div id="tien">
          </div>
          <div id="content_box">
            <div id="content_text">dsadsa 
            </div>
            <div id="content_photo">
              <div id="viac_info">
              </div>
            </div>
          </div>
        </div>
        <div id="novinky">
        </div>
        </div >
        <div id="footer">
        </div>
    </body>
    </html>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Radovan View Post
    but it will repeat just the container background to the sides (the gray color and black line), not footer. how to tell the footer to take the rest of the page's height and fill it with bg? height:100% or min-height:100% doesn't work.
    mr. ryanfait can help you - sticky footer
    http://ryanfait.com/resources/footer...ottom-of-page/

    the best solution if your footer is less than 100px; (if more, then it becomes a little bit obsolete)

    --------------

    Fluid backgrounds are pretty difficult, but you have to set an absolute header background. In short, the background of the header needs to extend into the content's background. I would suggest starting out with a simpler header background and footer background! take little step!
    Last edited by Sammy12; 07-16-2011 at 07:42 PM.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok, so let's simplify this a little. i have 1 fixed size div -

    div#a {height:500px;width:500px}

    and need a second one, that will fill the rest of the page's height. something like width:100% but with height.


  •  

    Posting Permissions

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