0

Hello, I'm making my first website so I'm new to everything. I have some JQuery and HTML on one page and some external CSS on another. The website looks fine on my computer. I uploaded it to the hosting site and it works fine. Then I went on another laptop and the website is totally off center. It's pushed to the left and there's a large blank space to the right of it. Any ideas on how to fix this?

4
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by PhilEaton
0

happens often when a laid out on screen in pixels
you will get the same effect on your pc, if you open the site in a partscreen window content will push offscreen right
the solution is a different dimension em or % are scalars that adjust to window size device resolution user preference
in px
ann old crt 15inch had 800px (53px/inch)
a newer 17inch lcd has 2400 px (141px/inch)
an ipad 7inch screen has 2760px (394px/inch)

12px text is different appearance in each from 1/4inch on an old crt, to 3/100inch on an ipad
1em texxt looks the same on all of them
laid out in % the site autoadjusts to window size device ability and user font preferences (makes the page disability friendly instantly) text will reflow around non-text items flash pics vid and the site will appear very similar on all devices from phones to widescreen monitors, eactly the same, isnt possible

these standard test beds may assist you
replace yoursite.com with your uri in the links below and paste to your browser bar

speed
http://analyze.websiteoptimization.com/authenticate.php?url=http%3A%2F%2Fwww.yoursite.com&/
examine sprites for small images icons logos speed,

html http://validator.w3.org/check?charset=%28detect+automatically%29&doctype=Inline&group=0&uri=http%3A%2F%2Fwww.yoursite.com

css2
http://jigsaw.w3.org/css-validator/validator?profile=css21&usermedium=all&warning=1&lang=en&uri=http%3A%2F%2Fwww.yoursite.com
css3
http://jigsaw.w3.org/css-validator/validator?profile=css3&usermedium=all&warning=1&lang=en&uri=http%3A%2F%2Fwww.yoursite.com

handheld
http://demo.opera-mini.net/demo.html?www.yoursite.com
http://iphonetester.com/?url=http%3A%2F%2Fwww.yoursite.com
http://www.ipadpeek.com/?url=www.yoursite.com

other browsers http://www.browsershots.org

many problems (if present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots

Valid code does not ensure the site will work ...
Invalid code does ensure the site will not work ... .. in all browser OS combinations

not all layouts work in handheld devices
examine css @media handheld { } & simplify the style and layouts for small devices

fixed size elements do not work in any device except the screen they were designed on, current best practice is em or % for layout, scalar quantities that auto-adjust to window size, screen resolution, user preference, device capability

strictly code based, you understand(care about) your content more than I do

0

two good ways to guarentee centered in setting margin-left and margin-right to auto
also if you know the width of the thing to be centered:
position: absolute;
left: 50%;
margin-left: -(WIDTH OF CENTERED THING DIVIDED BY TWO WITHOUT THESE PARENTHESES)

this second code moves the thing-to-be-centered by 50% of the width and then moves it backwards by half of the width... it works!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.