Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 2 100% columms + sticky footer

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 33 total)
1 2 3
  • Author
    Posts
  • April 20, 2013 at 2:53 pm #132525
    wolfcry911
    Participant

    To have the drop down work in my version, add z-index: 1; to nav ul ul {} and add margin: 0; to nav ul {}

    To have the content and sidebar appear to be full height in the first example, remove the background from .sitecontent and place it on the .wrapper like this:

    background: #F0EFE2 url(“images/content.png”) repeat-y center top;

    as to which one works best, it depends on what you want. I think the first version is much more commonplace. My version was only fitting your original request – I think an end user is more accustomed to scrolling the entire page than just the content…

    April 21, 2013 at 2:51 pm #132631
    austinnnnn
    Participant

    I will use the second one then ..

    The way you say dont work, because like that all will be grey.

    And i want the wrapper to be grey, like it is, and the site content ( content and sidebar ) to be white, like in the example, but i want the white to go down to the footer, so when the content is less, the white dont stay like this:

    http://www.testeeee.cixx6.com/site/

    April 21, 2013 at 7:28 pm #132651
    wolfcry911
    Participant

    what doesn’t work? please be more specific. If you mean the corrections I suggested for the first version – I can assure you that they do work. The color would be applied to the entire wrapper, and the image (white with shadow borders) will flow down the middle.

    April 22, 2013 at 8:07 am #132693
    austinnnnn
    Participant

    So i’ve tried what you said, and it went wrong..

    What i want is this:

    http://i.imgur.com/zEWOnFa.jpg

    A 100% site content (content and sidebar), that come to the bottom, even if there is no text to fill it.

    And what i have is this:

    http://www.testeeee.cixx6.com/site/

    And thanks for the help, you are awesome :D

    April 22, 2013 at 8:22 am #132696
    rodolpheb
    Participant

    Hi, it works with: height:100% in #site_content and remove height:auto in wrapper.

    April 22, 2013 at 8:36 am #132698
    wolfcry911
    Participant

    > To have the content and sidebar appear to be full height in the first example, remove the background from .sitecontent and place it on the .wrapper like this:

    > background: #F0EFE2 url(“images/content.png”) repeat-y center top;

    April 22, 2013 at 10:21 am #132714
    austinnnnn
    Participant

    wolf, but the content.png is white, because its the white part of the site ( the site content)

    And the wrapper is all that is outside of the header. So if i do what you say, i will get all the wrapper white, instead of grey color i have outside of the site content.

    April 22, 2013 at 10:58 am #132725
    austinnnnn
    Participant

    rodolpheb

    it worked like i want, and i really like! but then i scroll down and see what happens:

    http://codepen.io/anon/pen/bzxsE

    now i got white part after footer, and footer is not sticky anymore.

    April 22, 2013 at 11:50 am #132735
    rodolpheb
    Participant

    Ok, try this : set to the #site_content –> height: calc(100% – 220px); (don’t forget to prefix and choose the right value instead of 220px)

    [codepen](http://codepen.io/rodolpheb/pen/gwHzE “codepen”)

    April 22, 2013 at 12:09 pm #132739
    wolfcry911
    Participant

    @austinnnnn, did you at least try my suggestion? I have tested it and it works. I do know a thing or two about css ;)

    The wrapper encompasses the whole viewport due to the min-height: 100%, along with the 100% height on html and body. The background declaration I gave will cover the entire viewport with the #F0EFE2 color – then it will apply the white image down the center, from top to bottom. The header’s background will cover the wrapper’s. The site_content will have no background, but will appear to have the white background and will appear to run from top to bottom. And again the footer’s background will cover that of the wrapper.

    April 22, 2013 at 12:24 pm #132743
    austinnnnn
    Participant

    Worked now! Many thanks to you, really! :D

    Dont know what was i doing bad before! Now another question, is it easy to put the header visible when i scroll down? I mean a persistent header. Because duo what site will do, its better to have the menu persistant

    April 22, 2013 at 2:39 pm #132763
    wolfcry911
    Participant

    It’s not difficult – you could set the header to position: fixed and add top padding to the content so that it starts below the header.

    Whether to implement a persistent header is completely up to you. I will say that most new developers wish to do this (and to the footer as well), cutting the content to a small section in between the two. In reality, the header is not as important as first thought and the idea is usually (but not always) abandoned.

    April 22, 2013 at 5:32 pm #132773
    austinnnnn
    Participant

    so you say that i should put the header fixed ?

    and the footer? fixed? or should i keep the sticky footer?

    April 22, 2013 at 7:42 pm #132776
    wolfcry911
    Participant

    No, I’m saying to build it the way you and the client want (which may be fixed).

    April 22, 2013 at 8:10 pm #132779
    austinnnnn
    Participant

    but only the header fixed? and leave the footer like it is?

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 33 total)
1 2 3
  • The forum ‘CSS’ is closed to new topics and replies.