[RESOLVED] Tweaks needed on my website
Hi, I'm still a novice with CSS and can't figure out two things:
1. A couple pages on my website shifts to the right by 10px or so. I think it's somewhere in my CSS, but I can't find it. My html files are calling on a few CSS files, one that's mine (styles.css) and a few others that I got over the internet to plug in slideshow and responsive capabilities. You can see the shifts happening here:
the index2.html, visual/index.html, and print/index.html pages don't shift when I click from one to the other. But if I click from one of these pages to contact/index.html or about/index.html, the page shifts to the right.
2. When you view my website on a mobile phone, the navigation in the masthead and the footer are not centered. I can't seem to get them centered. Any suggestions?
Thanks in advance!!
I can give you a suggestion for your 1. problem. I believe it is because of your vertical scroll. The 3 pages you've mentioned have vertical scroll bar which is ~10px, and the contact page doesn't so it is 10 px wider than others
Interesting point, and scroll bars appearing on content would normally push
Originally Posted by Funkiyo
pages to the left, thus making the odd one out appear right-shifted.
10px is little narrow for a scroll bar, though.
I would tend to avoid scroll-able material if possible; end-users don't
generally care for it because mouse-wheels and arrow-keys tend to
move the page by default, not the scrolled content.
Last edited by chriseccles; 04-01-2013 at 02:29 PM.
Thank you both...it turned out that it indeed was the scroll bar that was making it look like the page was shifting.
Originally Posted by chriseccles
First, meticulously go over your HTML to be certain that your
class and id assignments are consistent between pages.
That is the #1 reason why page alignments tend to shift.
Second, your CSS seems to be diversely scattered among a number
of style sheets. You need to integrate your styles into a single
document, if possible. This makes tracing class and id mismatches
and duplications very much easier.
Your main images are way too big at 300-400kB. Not everyone has
8Mbps+ broadband ! Use 'Save for Web and Devices' in Photoshop. You will
be surprised at how little detail is lost and the files will be 1/10th the size.
chriseccles - Thanks for the tips. I'm optimizing images now and will go back and check all class & ids. Will also integrate style sheets
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)