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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Website width change from page to page HELP!!!

    Hey there everyone, i am currently trying to create my website, but in the process i have found that when i change from one webpage to the other the whole wrapper(webpage) shifts to the right and left when viewing between the contact and home page. It happens when i copy and pasted the exact same css and html from the home page to the contact, and then changed the content from the images to text. My website can be viewed at www.vaguelines.com

    Please help thanks alot for any feedback!!

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Your homepage is larger than the height of your browser window, so it creates a vertical scroll bar. Your contact page is less the the full height of the browser window, so it doesn't create a vertical scrollbar.

    The reason it looks like it is shifting right is because when you load the homepage, you have a scrollbar, but when you go to contact, that disappears so the space which the scrollbar would have used is obsolete, therefore making it appear to move.

    If you add more content to your contact page (enough to exceed the window height, you will see that it too creates a scrollbar, then when you change from page to page, nothing will move.)

    Regards,

    LC.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello DISTINCT,
    Like learningCoder says, the y scroll is shifting your page over.

    The usual solution is forcing a scrollbar on all pages so you don't see a shift.

    Add this bit to your CSS - body {overflow-y:scroll;}
    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:

    LearningCoder (03-09-2013)

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I'll keep that in mind because I've had similar issues before!

    Kind Regards,

    LC.

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Semi Resolved

    Thanks alot for the replies, yet i have added the code "overflow-y:scroll;" yet it places the scroll bar on the right of the div i put it in, how do i make it so its on the right hand side of the whole webpage?

    Thanks alot

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Place it on the body element, not the div (as Excavator mentioned):

    Code:
    body
    {
       overflow-y:scroll;
    }
    Kind regards,

    LC.

  • #7
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks alot it worked!!!! CHeers

  • #8
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Bangladesh
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks it is very useful.


  •  

    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
    •