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?
bo0ga 2 Newbie Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
If you provide the HTML and CSS we can take a look.
almostbob 866 Retired: passive income ROCKS
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,
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
PhilEaton 0 Newbie Poster
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!
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.