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 2 of 2 FirstFirst 12
Results 16 to 30 of 30
  1. #16
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    It looks like you tried a lot of things already so I'm a little lost as to what exactly you're trying to accomplish. If you're trying to get rid of the whitespace, this is what I see:

    Code:
    <div id="canvas" style="margin-top: -174px; top: 50%; position: relative;">
    You are basically telling it to be there. This is happening because of this script:
    Code:
    <script type="text/javascript" src="https://static.squarespace.com/static/ta/4fb7a12ae4b093525981f4d8/672/scripts/site.js"></script>
    And "vertAlignCanvas" function inside the script is getting your div with the canvas ID and vertically centering it, which is why you have all that whitespace.

    Why do you have that script? It seems odd to me that you would add a script that does things that you don't know about. Also, why can't you edit anything? Simply taking out the canvas ID seems like the easiest solution. Or take out the section of the script that vertically aligns it.
    My signature :)

  2. Users who have thanked ttkim for this post:

    jddowell (07-29-2013)

  3. #17
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Its a template based website through squarespace.com, and I'm just trying to make it my own.

    1. We can't edit the original code.

    2. I guess I could copy the entire code, rewrite it, and copy it back in, but I have no idea how to do that.

    3. It has the option to add in scripts and css/css3, so thats what I have been doing. And posting questions on this site.

    As of now, the spacing below my header is fixed (from previous post by someone).

    Now if I can just get the space above the header to disappear, so my site is no floating vertically center.

  4. #18
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    is there an override to this "vertAlignCanvas"

  5. #19
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    I added your (<div id="canvas" style="margin-top: -174px; top: 50%; position: relative;">) and still nothing happened.

  6. #20
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You're not supposed to add that. That's what I see in the code. It varies from browser-to-browser.

    Anyway, overriding things are an ugly solution, but SB65's solution should work. Try putting his code before the closing body tag.

    Quote Originally Posted by SB65 View Post
    It needs wrapping in script tags:

    Code:
    <script type="text/javascript">
    document.getElementById('canvas').removeAttribute('id');
    document.getElementById('canvasWrapper').removeAttribute('id');
    </script>
    My signature :)

  7. Users who have thanked ttkim for this post:

    jddowell (07-29-2013)

  8. #21
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Understood.

    This (attachment) is my only option for adding java/html code. So while i can add it, I cant specify it to go before a closing body tag.


    I just added it again. Still no luck though.
    Attached Thumbnails Attached Thumbnails how can i make my site fixed at the top?-screen-shot-2013-07-29-1.21.52-pm.jpg  

  9. #22
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, that code is firing before the html is loaded....have a try making it:

    Code:
    <script type="text/javascript">
    window.onload=function(){
       document.getElementById('canvas').removeAttribute('id');
       document.getElementById('canvasWrapper').removeAttribute('id');
    };
    </script>
    Still not sure this is going to sort your problem, mind....
    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

  10. Users who have thanked SB65 for this post:

    jddowell (07-30-2013)

  11. #23
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    you fixed it, thank you. Much appreciative.

  12. #24
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Is there a way to make the shaded line under my header, not full width of the browser page, and just the width of my site?

  13. #25
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Add:

    Code:
    #headerWrapper {
        background: none repeat scroll 0 0 white;
        border-bottom: 1px solid #B6BBBE;
        border-top: 0 solid #B6BBBE;
        bottom: auto;
        box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
        left: 0;
        margin: 0 auto;
        max-width: 1000px;
        padding-bottom: 5px;
        position: static;
        right: 0;
        top: 0;
        width: 100%;
    }
    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

  14. Users who have thanked SB65 for this post:

    jddowell (07-30-2013)

  15. #26
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    I attempted to replicate this on the stripe above my footer, but I cant get it to show on the top of the footer.

    Here is what I added/changed to:
    #footer {
    background: none repeat scroll 0 0 white;
    border-top: solid 1px #B7C3E6;
    top: auto;
    box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
    left: 0;
    margin: 0 auto;
    max-width: 1000px;
    padding-bottom: 5px;
    position: static;
    right: 0;
    top: 0;
    width: 100%;
    }

  16. #27
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Looks like you've fixed this?
    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

  17. Users who have thanked SB65 for this post:

    jddowell (07-31-2013)

  18. #28
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    no, im trying to get the drop shadow to be up where the blue line is in the footer, and have it do a 180, so it fades upward.

  19. #29
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Oh, OK, you just need to alter your box-shadow statement on footer to something like:

    Code:
        box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.2);
    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

  20. Users who have thanked SB65 for this post:

    jddowell (07-31-2013)

  21. #30
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    You make it sound so easy. Thank you so much!


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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