Webpage Design for different screen sizes, how can I design my webpage so that when you zoom in or out or access Options

[ericoconnor]

So I'm very new to html and I'm trying to make a very simple webpage for a small local business that I work at. There is a lot of emphasis on the "very"s in that last sentence so pls have mercy on my questions. I'm using blocks, (<div> stuff </div>) <--- those things, and making them float (float:left; or float:right;) in the <style> part of CSS. I saw that I could use a line of code (<meta name="viewport" content="width=device-width, initial-scale=1.0"/>) to set scales for my webpage but I don't really know what that does. When I zoom into the page I have designed now, the image I have as a header stays the same size while my blocks change shape and size. I tried making all of my heights and widths with percentages not pixel integers but idk if that will help. Here are my questions:

1. Is it not a good idea to just make an image as my webpage because I can fit all the information I need on one screen (I have no other menus within to click on)?
2. What does <meta name="viewport" content="width=device-width, initial-scale=1.0"/> do?
3. Is there any way to make my blocks act like an image (not change shape and size when zoomed) but still look scaled on mobile devices and other browsers?
4. When I zoom in on my browser, my blocks stack on top of one another and it looks awful, should this happen or will it look awful on any device with a thinner screen than my laptop?

Also, some off-topic questions for html:

5. If I'm using a picture I have saved in a folder on my webpage, will that image still work for GoDaddy if I eventually send my coding to them(I have the image source as the location of the file within my computer)?
6. How can I float three blocks on the left side of a page on top of one another and float one big block on the right side that is as tall as the left three (my big block on the right doesn't want to extend down any further than about half the length of the top block on the left unless I use pixel number height, not percentage height)?
7. How can I center an image on top of my webpage (img {align:middle} in the CSS is not working and I had to do some weird way to center it by making it inside a centered paragraph)?

Any help that anyone can give me is very much appreciated. You do not have to answer all of my questions, anything you can tell me is helpful. Thanks.

[pandy]

I can only muster energy for one question at this hour and I choose... number 7!

7. How can I center an image on top of my webpage (img {align:middle} in the CSS is not working and I had to do some weird way to center it by making it inside a centered paragraph)?

Easiest by putting the image in a DIV and use 'text-align: center' with the DIV. There is no property called just 'align'.
http://www.w3.org/Style/Examples/007/center.html

Two things though. It would help if you posted the URL to your page. And I think you should let go a little. Don't strive for the page to look the same on every device. That won't happen. That's the way things are. Go with it.

This is old, but it's still a good read.
http://westciv.com/style_master/house/good_oil/not_paper/

[Christian J]

1. Is it not a good idea to just make an image as my webpage because I can fit all the information I need on one screen (I have no other menus within to click on)?

No, that's a bad idea, especially when using an image with text on. Search engines can't index it, users can't copy it, etc.

2. What does <meta name="viewport" content="width=device-width, initial-scale=1.0"/> do?

See https://developer.mozilla.org/en/docs/Mozil...Viewport_basics (and the section "A pixel is not a pixel" after it).

3. Is there any way to make my blocks act like an image (not change shape and size when zoomed) but still look scaled on mobile devices and other browsers?

If they have a width and height in px units they should behave like ordinary IMG elements. This is not necessarily the best approach, though.

4. When I zoom in on my browser, my blocks stack on top of one another and it looks awful, should this happen or will it look awful on any device with a thinner screen than my laptop?

That sounds like the normal behavior of floated elements. But it doesn't have to look awful.

5. If I'm using a picture I have saved in a folder on my webpage, will that image still work for GoDaddy if I eventually send my coding to them(I have the image source as the location of the file within my computer)?

No, you must upload it to a web server (normally your web host).

[ericoconnor]

Thank you very much pandy and Christian. You guys have answered everything I needed in this post. I will upload my URL in a new post with a more specific question I have tomorrow. Thanks again for all the help and the quick responses.

[pandy]

Actually we haven't. No one answered number 6.

6. How can I float three blocks on the left side of a page on top of one another and float one big block on the right side that is as tall as the left three (my big block on the right doesn't want to extend down any further than about half the length of the top block on the left unless I use pixel number height, not percentage height)?

You could put the three block in a container DIV with the same width as the the three blocks and float that DIV instead. The three blocks then need neither float nor width.

To make columns the same height see http://css-discuss.incutio.com/wiki/Any_Column_Longest .