www.webdeveloper.com
Results 1 to 4 of 4

Thread: A tricky height setting

  1. #1
    Join Date
    Jan 2009
    Posts
    24

    A tricky height setting

    Hello.

    Here is the live site which I am trying to remove all of the frames from.

    http://www.gmmstudios.com/

    Here is my Work in progress site.

    http://patrickrauland.com/gmm/

    The tricky part is that I need the content area to be as tall as the browser will allow, and then to add a scroll bar. I want to be able to always see the navigation on the left.

    I also want the nav section to show as much of the background as possible, without showing so much that it adds a scroll bar.

    How can I do this in CSS? It seems to me that if I want a scroll bar for the content section that I have to set a specific height. Is there a way of setting

  2. #2
    Join Date
    Aug 2009
    Location
    England
    Posts
    29
    I've noticed a bit of code in your stylesheet under #nav: height: 1168px;

    Try setting this to 100% first off and see what happens. You've also set the height of the #content_pane section to 500px, try setting this to *px (I forget if this is correct syntax or not though).

  3. #3
    Join Date
    Jan 2009
    Posts
    24
    Thanks for the quick reply. That didn't quite solve the issue.
    setting the #nav height to 100% will make that section as tall as your browser is. If the user scrolls down, there will be unfilled space.

    I tried setting the #content_pane to *px but that didn't do anything. I also tried 100% and that didn't do anything.
    Last edited by BFTrick; 08-14-2009 at 04:05 PM.

  4. #4
    Join Date
    Apr 2009
    Posts
    122
    Hi Bftrick,
    Make a copy of your style sheet and replace the style.css styles with:

    Code:
    HTML {
    	MIN-HEIGHT: 100%; height: 100%;
    }
    BODY {
    	FONT-SIZE: 12px; MIN-HEIGHT: 100%; height: 100%; overflow-y: scroll;
    }
    H3 {
    	FONT-SIZE: 18px; FONT-WEIGHT: normal
    }
    H2 {
    	FONT-SIZE: 24px
    }
    #header {
    	BACKGROUND: url(http://www.gmmstudios.com/Pictures/f...ckground.gif); HEIGHT: 83px
    }
    #nav {
    	BACKGROUND-IMAGE: url(http://www.gmmstudios.com/Pictures/F...ckground.gif); POSITION: absolute; WIDTH: 160px; TOP: 83px; LEFT: 0px
    }
    #nav TABLE TR {
    	HEIGHT: 40px
    }
    #content_pane {
    	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #00abea; PADDING-LEFT: 160px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
    }
    #content-bg {
    	PADDING-BOTTOM: 10px; BACKGROUND-COLOR: white
    }
    #content {
    	PADDING-BOTTOM: 0px; PADDING-LEFT: 50px; WIDTH: 500px; PADDING-RIGHT: 0px; BACKGROUND: url(http://www.gmmstudios.com/Pictures/Background.gif) no-repeat; PADDING-TOP: 50px
    }
    #content H1 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content H2 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content H3 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content H4 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content H5 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content H6 {
    	FONT-FAMILY: Impact, Haettenschweiler, Arial, "Arial Black"
    }
    #content A IMG {
    	FILTER: alpha(opacity='95'); opacity: 0.95
    }
    #content A:hover IMG {
    	FILTER: alpha(opacity='100'); opacity: 1
    }
    #page {
    	height: 100%;
    }
    What i've done is take off the height on the nav as its not needed, and told the HTML / Body to have 100% height.

    You might want to play about with this to get it just as you want, but this should hopefully help you on your way. Hope this helps

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles