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
    Mar 2010
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Nav disrupts 100% height

    I have a photo gallery here, with and without nav:
    http://www.loicbarsalo.com/portfolio_full-witnav.html
    http://www.loicbarsalo.com/portfolio_full.html

    The flash is coded to take 100% of the width and height. For some reason, when I add a 24px tall navbar at the top, rather than adjust, it simply adds the pixels and forced a scrollbar to appear.

    How can I make it so that the 24px isn't simply added and have the flash portion adapt?

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello Francisk7,
    Absolute positioning will take #portfulltop out of the normal flow of the document.
    Try
    Code:
    #portfulltop {
    	width: 100%;
    	background: #222222;
    	padding: 5px 0 5px;
    position: absolute;
    top: 0;
    left: 0;}
    Of course, that cuts the top off your upper thumbnails too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    FrancisK7 (01-03-2011)

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks!

    Any solution without losing some thumbnail parts?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    I originally though that might need to be built into your flash...
    maybe this works though?
    Code:
    body {padding: 30px 0 0 0;}
    #portfulltop {
    	width: 100%;
    	background: #222222;
    	padding: 5px 0 5px;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    FrancisK7 (01-03-2011)

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts
    WOuld never have thought of that. It worked. Thanks!


  •  

    Posting Permissions

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