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 to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS issue & design feedback!

    Hello,

    I was wondering if anyone can offer any help for a learning website that I am designing a template for...

    http://new.learnhigher.ac.uk/template.html

    In particular, I cannot seem to get the page wrapper, or footer divs to extend to the hight of the page. Tried lots of things but it doesn't seem to make any difference. (screenshot of the issue here: http://bit.ly/108Beg3 )

    if you have any other design advice - what is good, or what could be improved - do let me know. am open to ideas...

    Many thanks for your help in advance :-)

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by dalep282 View Post
    In particular, I cannot seem to get the page wrapper, or footer divs to extend to the hight of the page.
    To remove the space between #nav and #wrapper, remove the top margin from #content. This margin is collapsing through #wrapper's top border and creating the gap you're seeing. (Perform a Web search for "CSS margin collapsing" if interested in the concept.)

    To deal with the space above #footer, first I would do something that isn't directly related to avoid later confusion: set overflow: auto on #content so that #content fully encapsulates #content-right-container and #content-left (which both have a non-default float property value). (To understand the hanging float concept, you can read the first two sections of the article Clearing Floats (i.e., the intro section and "Understanding the Problem").)

    The above will cause your height: 0 declaration on #content to become meaningful (and screw up the layout). Delete that. It will also cause you the bottom padding on #content to materialize. Set that to 0 unless you want that 12 pixels of space.

    Once you've done that, simply remove the bottom margin from #content-left.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Hmm... I forgot to comment on the design aspect.

    Quote Originally Posted by dalep282 View Post
    if you have any other design advice - what is good, or what could be improved - do let me know. am open to ideas...
    Regarding your design, I would consider the concept of "proximity," and group related content more closely together. Your headings in the right-hand column should have less space beneath them to visually associate them with their content below. And your table rows could have less space in between them to make the tabular data visually seem like more of a unit.

    I'd also consider "contrast". In your navigation bar, you use bold text, but the contrast between the surrounding (non-bold) text is so poor that the effect is lost. The bold text needs more emphasis. Plus you have gold text on a white background. You might consider using CSS text shadows if you're enamored to that color combination.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Dhaka,Bangladesh
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts
    First time i join this site .I want very strong html,css,php.So i want help and suggestion very body.

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot for those pointers Arbitrator. Am working through them and will let you know how I get on...

    Thanks again!


  •  

    Posting Permissions

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