There is a layout for making layout. It is necessary that the page be displayed in full screen at different resolutions and different monitors (each person has his own monitor: someone is large, someone is small). So, in order to be displayed on all monitors and in full screen, I just took pictures from the layout (about 1300 px wide), where only the background is on the sides, the main information is in the middle. So you have to do any nonsense: move everything to the left by 50% so that the background takes up only the edge of the monitor, not half: but when the window is minimized, all the blocks go behind the screen and are not visible. In general, I understand that I am doing something wrong .... How to design layouts and how to design a design for both large and small screens?
- I did not understand anything, why should I move somewhere ... If the content block is in the middle, make it a margin: 0 auto; and everything And the background - let the background remain, for the body, set it. Did I understand you correctly? Or what's the problem? - metazet
- There is a background in the header that needs to be shifted to the left (center) so that the page is displayed on full screen on various monitors. Question: how to center such a block with a background? "margin: auto" does not center, because here, rather, you need to "cut off" a piece of headar on the left and only then place it to the edge of the screen. And on a larger screen, the head is not clipped but remains as it is - almac
- Shift left (center) - you are not confusing? It turns out some nonsense! Show the design, at least a piece, otherwise I can’t understand what you want ...%) - metazet
- In general, I want to understand how I can properly design and typeset layouts so that the page is displayed in full screen on all monitors (or almost all) - almac
- Yeah - dynamically combing the screen sizes, testing the font sizes of the blocks for each resolution and writing a lot of JS bydlokod, if you are ready - go ahead ... <br> Write pure css'om so that everything is perfectly displayed on both 800x600 and 1200 * 1900 It is impossible by definition <br> By sabzh - if the TZ page is followed correctly the page xD - Zowie
3 answers
There are 2 types of layout: rubber and fixed. Sometimes they are combined and get a hybrid.
Rubber imposition is created by the principle "indicate the properties of the selector in percent." It can be concluded that a site that is created using a rubber layout will automatically resize to fit the screen of each user. In fact, this type of layout has many pitfalls (loss of image quality when stretching / compressing; problems with font sizes, even if their dimension is indicated in%; unexpected or irrational site display in very large or too small clients, etc.) and difficulties in implementation. Therefore, it is relatively rarely used.
Fixed layout implies specifying the properties of selectors (sizes, indents, font sizes, and so on) in absolute values. That is the count. blocks that will stretch - the minimum. The main disadvantages are: scroll bars in small browser windows and empty space in large ones.
Hybrid layout includes all the best of the two above. As a rule (it all depends on the layout designer), the site stretches only within certain boundaries [A1xB1; A3xB2], and outside of them the layout becomes fixed.
PS1: Of course, you should not think that with a rubber imposition, the coder should display all available values in percentage, and with a fixed imprint - in absolute. Sometimes it is not necessary or even impossible.
PS2: Sometimes it may be necessary to make several layouts and produce one of them, depending on the situation. For example, when developing a site that should be displayed equally on PC and mobile. devices.
P.S3: I recommend reading this lesson. In general, climb on the specified forum, there are quite a lot of useful topics.
- Thank you so much for the answer! Very useful information! - almac
if I understand correctly, then you need a static block with content in the center, and a large background image that will be centered.
I will give the skeleton for this task:
<div class="page" style="background:url(images/нашакартинка.jpg) center top no-repeat"> <div class="content" style="width:1000px;margin 0 auto;">контент</div> </div> - where background: url (images / our picture.jpg) center top no-repeat - one big picture, if you need a repeating background, then you should set repeat-x (horizontally) -width: 1000px; - content block width -margin 0 auto; - center the content block
the same background can be added to body or html if there is such a need.
- Thanks for the answer! I’d probably answer that way too, but the question is a bit different (sorry, which is not clear). I need such a layout, in which the header will not stretch and will not be narrowed, but will remain unchanged on any screen, and the content in the middle will change position (it should be in the middle, and for this, as I understand it, you should set margin: 0 auto). - almac 4:05 pm
- It would be cool if you showed a template, in 2 versions with different resolutions because the question is really incomprehensible. Perhaps you need to set the width of the header in percent, and the content as already mentioned margin: 0 auto; - Buhito
- The initial question is something like this: there is a very wide picture. How to impose it so that everything is displayed correctly for all screens? Now another question: how to set the page width when creating a web page? ) - almac
- make the background as you like. The main thing is if you reduce the picture-background with the help of cropping on the sides, then that the background would remain beautiful. and the width of the block in which the site itself, make a 1000px. This is the standard at the moment. - Buhito
- This is where an important point arises: if the screen is 1200 px, and the headpiece is 1000 px, how then? - almac
Answer: you need to write to css:
#header {width: 100%; background-position: center top;} The background is white, so I center only the head.
