I posted here a few months back. I'm learning to program in order to build this project with a friend. I'm having a problem with the code I'm writing. On my computer screen, it looks fine but, everything goes out of place when I view the work on a different computer that has a larger or smaller screen. How do you format your code for different screen resolutions so the code/elements/text/images stay in the same place no matter what.
I would do all my design in CSS, and here's why. HTML is great for organizing the information that needs to be displayed, but actually makes design and formatting difficult. CSS will let you arrange everything easily, and you can have different stylesheets be used for different resolutions or media <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> Code (markup): CSS really does make design a whole hell of a lot easier once you get used to it. Also, if you're having trouble formatting, try not to use a lot of percentages for sizing, because those will all change. Set a <div> that wraps around everything, with ID "containter" and in your CSS file, set html, body, #container { height: 100%; width: 600px; margin: auto; position: relative; } Code (markup): That will make a 600px wide conainter that is automatically centered in your page. You can change placement and size easily. This container will stretch all the way to the bottom of the page, and any child elements with position: absolute have an absolute position within this container instead of within the browser.
Don't give the size of elements in percentage and make sure that the element is large enough for the content. Using CSS is not that hard once you get the hang of it and it can help you a lot to make your site work on every screen resolution. You can also use tables to keep everything in place but remember to give the size of elements in exact numbers.
In your link to the stylesheet, you put a min and max... Can you do that multiple times in the link or multiple Link elements? For example, having the one you have there, and 2 or 3 more links for different desktop resolutions and a mobile site. I am having the same issue, and was told to use Javascript to switch, but some ppl have javascript disabled, and maybe some mobile devices dont work with javascript.......?