Website layout “breaks apart” when zooming in or out in browsers + a few other basic css questions

Question

I\'m pretty much as new to CSS as it gets and what I\'m trying to do right now is just design a very simple/basic splash or landing page for a small business.

Here i

Answer 1

1. When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.

2. Relative positioning is affected by issues mentioned in #1, and therefore unreliable.

3. Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.

4. For (horizontal) centering you have some options:

   • If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
   • If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
   • If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".

In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.

If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.

Answer 2

not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.

Answer 3

a couple suggestions before go into fixing the zoom in and zoom out issue.

1. Don't use <div> to wrap around text.
2. Use <h1> tags for header
3. Store your CSS in a separate css file.
4. You defined the header section that's great, but do that for container and footer as well.
5. Comments! That would make the job much easier for people who try to help you.