I'm designing a project website using ConTEXT, some of my borders, division and other elements are completely out of their places. I tried outputting it to different computers with different size of monitors and of course with different resolutions. I'm no expert when it comes to this but how can i resolve that? How i can properly output my website with the original layout to different computers? So far i only use HTML, CSS and just 1 javascript which only for time and date functions.
HIP13044B 0 Newbie Poster
stbuchok
it has little to do with the different computer and more to do with the different resolutions and browsers (or browser versions). Without a site to look at and to know what isn't looking right, it's nest to impossible to say what is wrong.
ss125 18 Posting Whiz in Training
The following are the possibilities.
1) Browser compactibility problem (includes version of browsers also).
2)Your development machine's pixel size may vary to client's system. For eg., U r using a 1388*720 and the client may be using a lesser one and vice-versa.
3)For your information, Kindly develop your page with a default size of 1024*638. This is best suited for all lower end as well as higher end resolution screens.Instead of 720 I have used 638 because of the exclusion of browser's page on the screen.
Check any of these possibilities.
Hope this helps u.
Have a happy coding.
almostbob commented: not an appropriate answer, one should not continue incorrect stereotypes -3
Shulc 0 Newbie Poster
Hi,
try playing with the css file. Set the max-width, and max-height parameters to a desired size in px.
almostbob 866 Retired: passive income ROCKS
Current standards and best practices suggest that pixels are not an appropriate dimensioning tool for laying out a web page.
a crt uses approx 96 px/inch
an lcd approx 120 p/inch
a current hi-res plaasma, cell phone /tablet approx 267 px/inch
a printer up to 4000 px /inch
depending on the device used to lay out the page, it will appear from vainshingly small, to ridiclously large on different devices
NO fixed dimension site works, on any device except that which it was laid out on
best practice is to lay the site in em or % scalar dimensions that auto adjust to screen resolution, window size device capability and user preferences. this ensures the page loooks as similar as possible, within the display capabilities of the device it is being viewed on.
A page laid in pixels, looks ridiculous on this widescreen monitor,
1000px column in the middle of a 2600px screen
the same page looks worse on a phone or small device, or partscreen window, the content is pushed offscreen right and all the user sees is the pretty blank border. Users do not scroll sideways to view content, they leave.
with a body { width:100%; margin:2%; } or similar, all users have the same experience.
font-size set in em, the site becomes visual disabiliity friendly, emphasised text adjusts around the user's preference instead of an arbitrary XXpx, which may be vanishingly small on the Ipad-etc at 267px/inch (12px=1/25inch high) or a printer (12px=1/333 inch)
almostbob 866 Retired: passive income ROCKS
the links below, may give you assistance in getting your code, to look the way it should, on as many devices as possible
html standards
handheld standards
handheld devices
opera
iphone
ipad
android
problems (if any present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots(other browsers links)
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, look at redirects to a subdomain for less capable 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
the editor used, wont have much effect, the standards used, will
strictly code based, you understand(care about) your content more than I do
jrewing 0 Newbie Poster
This may or may not help you directly but I thought it worth pointing you to Click Here. They make the process of testing out your design efforts on a whole load of browsers (many different OSs) really easy.
Everyauction
This is exactly why I mostly still use the 'old' fullpage 800x600px. Webpage-Design, Pages can be easy viewed by most smartphones in full, and regardless of resolutions set on pc's or laptop's, the pages always look as planned.
I addition to this, I secure Critical Section- 'Sizes' with an 'empty' 0.gif-image, so, my pages look the same, regardless of the Browser-Brand or it's Settings.
It may sound rather 'back in time', but I care about Style, not about 'Age'...
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.