Penny Arcade Forums› Help / Advice Forum
The Coin Return Foundational Fundraiser is here! Please donate!

Website Layout shifts slightly page to page

Penguin_OtakuPenguin_Otaku Registered User regular
edited September 2012 in Help / Advice Forum
So between two pages I have the layout shifts ever so slightly to the right when I got to the contact info page. All the other pages don't do this when they're visited.

If it helps I'm using UL to give the address and hours of operation. But the CSS and everything else is the same.

I even went as far as to save the index as the contact page, put the info there and it's still doing it.

Any help is appreciated.

sig-1.jpg
Penguin_Otaku on

Posts

  • NightDragonNightDragon 6th Grade Username Registered User regular
    Can you paste or link the code?

  • Penguin_OtakuPenguin_Otaku Registered User regular
    pearsonslumber.com

    It's the difference between index and photos to the contact page.

    sig-1.jpg
  • wmelonwmelon Registered User regular
    on the contact page your footer is outside the div with class of container. That's likely what's causing the problem.

  • Spectral SwallowSpectral Swallow Registered User regular
    The reason for the actual shifting is your scroll bar is appearing which shifts everything over. As far as a solution you can either rewrite the code using non relative values. Or just add some <br /> to the bottom of the pages so that they all scroll.
    I'm sure there are other more elegant solutions, but that's just off the top of my head.

  • Penguin_OtakuPenguin_Otaku Registered User regular
    I'm not using any relative values.. but I do see what you're saying about the scroll bar.

    sig-1.jpg
  • Spectral SwallowSpectral Swallow Registered User regular
    Google fu says you might try adding:
    html { height: 101%; }
    to your style sheet so that the scroll bar appears on all pages.

    Other than that the only other solution I know of is using absolute positions. For example adding a holder around everything you have as seen here:
    http://www.commoncoresheets.com/PA.html
    http://www.commoncoresheets.com/PA2.html

  • Penguin_OtakuPenguin_Otaku Registered User regular
    Could you explain what you mean by using a holder?

    sig-1.jpg
  • Spectral SwallowSpectral Swallow Registered User regular
    Just a div tag that surrounds the content of the page and keeps everything aligned. If you check the source on the pages I linked it's the very last div before the <body> starts.
    It's basically just a 'box' that everything else sits in. So if you move the box everything inside of the 'box' will move with it.

  • Penguin_OtakuPenguin_Otaku Registered User regular
    Followed your lead but it's still doing it

    sig-1.jpg
  • Spectral SwallowSpectral Swallow Registered User regular
    Do you have a copy of the code you're using? The website has completely changed.

  • Penguin_OtakuPenguin_Otaku Registered User regular
    Ok, check it out again.

    The holder has decided to do it's job.

    Two problems though, the script I'm using for the slideshow is doing some weird stuff. I can't find in the CSS or code itself where to shrink it down. It looks the same.

    Also on the products page the table is doing some odd things with the footer

    sig-1.jpg
  • Spectral SwallowSpectral Swallow Registered User regular
    You probably want to play with the holder values, since it's way offset to the left. Whatever the holder value, you should subtract from the page value. So your holder would be centered with a width of 60% (or whatever and your margins would be 20% left and 20% right. If that makes any sense.

    You also need to have your buttons have a rollover effect so that when you mouse over them they change.

    I'd recommend checking out W3 schools or http://www.cssplay.co.uk/ for some great premade layouts.

Sign In or Register to comment.
Penny Arcade Forums› Help / Advice Forum