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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question how can i make my site fixed at the top?

    Is there a way to lock my website position to be fixed near the top (about 50px margin). Right now everything is centering, and i cant find any css code or html to get it locked at the top.

    http://jeffreydowellphotography.com/about/

  • #2
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    i figured out part of it but now:My content is being sucked up behind my header. its not pushing down my main content. I cant determine where i went wrong. Please help.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Give #pageWrapper a margin-top equivalent to the height of the header to push it down.

    Applying position:fixed to #headerWrapper takes the element out of the normal flow of the document, so the subsequent elements move upwards - which is the result you're seeing.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jddowell (07-25-2013)

  • #4
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    I added that in thank you. How can i now get my content fixed near the top:
    http://jeffreydowellphotography.com/about/ as this page floats in the middle. When i add in #pageWrapper { position: fixed; } if messes up the entire layout.

    here is my code: #headerWrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; heigth: 60px; margin-top:0px; bottom: auto; background: white; padding-bottom: 25px; -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .2); box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .2);}
    #pageWrapper { margin-top:150px; }

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not sure what the issue is with that page really - it looks fine to me.
    If you do add position:fixed to additional elements then you run the risk of the content being inaccessible on smaller screens because it can't be scrolled to.

    I'd leave it as it is if I were you....or maybe I'm misunderstanding what you want.

    (FYI I can see all the css from your live page, you don't need to post it here as well)
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jddowell (07-26-2013)

  • #6
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    On my "about" page, there is too much white space above the text/rule, please see the attachments. The content is staying centered, and I would like the blue line the same location on all pages.
    Attached Thumbnails Attached Thumbnails how can i make my site fixed at the top?-correct.jpg   how can i make my site fixed at the top?-incorrect.jpg  

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'm not seeing that on a 'normal' width - it's coming from the responsive css, which displays #mobileMenuLink below a certain width.

    To counteract this, have a try with:

    Code:
    @media only screen and (max-width: 800px) {
    
      #pageWrapper {
          margin-top: 100px;
      }
    
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #8
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    I added some more screen shots, these are taken on a 27" iMac - full screen. The blog page is up at the top, but for the other two, the content has a bunch of whitespace up top. Thats what im trying to get rid of.
    Attached Thumbnails Attached Thumbnails how can i make my site fixed at the top?-screen-shot-2013-07-26-11.19.41-am.jpg   how can i make my site fixed at the top?-screen-shot-2013-07-26-11.19.47-am.jpg   how can i make my site fixed at the top?-screen-shot-2013-07-26-11.19.54-am.jpg  

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, the problem here I think is caused by some js which is firing in certain screen sizes and applying some positioning to #canvas, which is causing this issue at wide screens - and also when zoomed right out.

    Bad news is I don't think there's a css fix for this, and I think from your earlier post you can't edit this? I think unfortunately your fixed header may not be compatible with the js that's in place.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jddowell (07-26-2013)

  • #10
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    i cant edit any original stuff, that is true. But i can add new stuff. Is there anything that would override it?

  • #11
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    i can add html/java scripts too if needed.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Only suggestion I can think of is to add some js to remove the #canvas and #canvasWrapper ids, which should then prevent that element having additional styling added on resizing. You'd need to add this script:

    Code:
    document.getElementById('canvas').removeAttribute('id');
    document.getElementById('canvasWrapper').removeAttribute('id');
    You may need to tweak your css after doing this.

    That said, this potentially could cause other issues so proceed with extreme caution.

    It looks like you may have reverted to the original css anyway?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jddowell (07-29-2013)

  • #13
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    i added that code, but it shows in the header of every page?

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It needs wrapping in script tags:

    Code:
    <script type="text/javascript">
    document.getElementById('canvas').removeAttribute('id');
    document.getElementById('canvasWrapper').removeAttribute('id');
    </script>
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jddowell (07-29-2013)

  • #15
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    thank you for, as i don't know anything about the coding

    I added this in, but it didn't seem to affect anything.?

    Jeff


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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