Can someone help me fix my css problem?

Discussion in 'CSS' started by larsmqller, Jul 26, 2010.

0
  1. #1
    I have a problem.

    I need to fill some space, under my menubar on my website. (See the posted pic)

    I can fill it, if I put in for example:

    #leftcolumn {
    height: 100px;
    }

    But if a put in:
    #leftcolumn {
    height: 100%;
    }

    Nothing happens.

    [​IMG]

    I have tried different stuff, for 4 days now, but nothing is working.

    This is my first time building a website.

    Can anybody help me? :confused:
     
    larsmqller, Jul 26, 2010 IP
  2. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I forgot to write that my menu is:

    #menu {
    height: 100%
    }

    But still it don't connect to the bottom.
     
    larsmqller, Jul 26, 2010 IP
  3. wechito

    wechito Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    height: 100% doesn't work.
    To have a 100% sidebar you need to play with background images you create the illusion of a full height column
     
    wechito, Jul 26, 2010 IP
  4. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    -Is that really the only way?

    I am just thinking about my border that i have around the site.
     
    larsmqller, Jul 26, 2010 IP
  5. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,989
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #5
    Install another "div", similar to a wrapper. Make the background color white or give it a white background image that tiles to cover whatever part it is you need.
     
    Blue Star Ent., Jul 26, 2010 IP
  6. wechito

    wechito Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    All the ways I can think about are around the same idea: using the backgound images
     
    wechito, Jul 26, 2010 IP
  7. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    My wrapper only works with:

    wrapper {
    height: 1500px
    }

    It does not work with %

    Am i missing a code or something?
     
    larsmqller, Jul 26, 2010 IP
  8. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,989
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #8

    There is no " ; " after 1500px
     
    Last edited: Jul 26, 2010
    Blue Star Ent., Jul 26, 2010 IP
  9. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    hehe but there is in my CSS :p just forgot to write it here.
     
    larsmqller, Jul 26, 2010 IP
  10. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,989
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #10
    Did that work for you ? If you do not want to put a link here to your site, I understand. ( If it is an adult topic or something. )
     
    Blue Star Ent., Jul 26, 2010 IP
  11. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #11
    What wechito is suggesting is that you make Faux Columns. It's an easy way to get equal-height columns without using Javascript.
     
    Cash Nebula, Jul 27, 2010 IP
  12. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I tried and i see the idear of the Faux Columns.
    But i still have the same problem...

    The #fix wont go to the bottom of the page.

    CSS:

    #wrapper {
    margin: 0 auto;
    width: 970px;
    }

    #fix {
    width: 970px;
    background-image:url(../images/fix.gif);
    background-repeat: repeat-y;
    }


    HTML:

    <div id="wrapper">

    <div id="fix">

    (THE PAGE)


    </div>

    </div>

    If i use height: 1500px; like in the example in the bottom - Then i see it. I need non fixed size, that follow the rest of the page, like in the image i posted.

    #fix {
    width: 970px;
    background-image:url(../images/fix.gif);
    background-repeat: repeat-y;
    height: 1500px;
    }
     
    larsmqller, Jul 28, 2010 IP
  13. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,989
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #13
    Use a percentage or use auto, do not use a fixed height. LINK
     
    Blue Star Ent., Jul 28, 2010 IP
  14. larsmqller

    larsmqller Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I solved the problem:

    CSS:
    html {
    background-color: #333;
    height: 100%; <---
    }

    body {
    background-color: blue;
    width: 770px;
    margin: 0 auto;
    min-height: 100%; <---
    }

    HTML:
    <!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>StortSmil.dk</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    </head>

    <body>

    <div id="wrapper">
    </div>


    </body>

    Thank's to all of you, for your time. :)
     
    larsmqller, Jul 29, 2010 IP
  15. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,989
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #15
    You are welcome. Glad you got it fixed.
     
    Blue Star Ent., Jul 29, 2010 IP