Once
such a binge went, then I, in turn, decided to present my version of the layout to the public, which, it seems to me, is very close to the ideal.
But in the end I got this:
http://gruzzilkin.110mb.com/layout/According to my idea, the ideal layout should have the following properties:
- Doctype XHTML 1.0 Strict;
- layout without using tables as design elements;
- cross-browser compatibility;
- valid html and css code;
- the layout does not fall apart when the page is resized and the fonts are scaled;
- would look acceptable with disabled graphics;
- the content is framed by a beautiful frame with rounded corners;
- the basement is always pressed to the bottom of the screen;
- columns of the same height;
- content in the HTML code of the page is as high as possible;
- minimum of "extra" markup elements.
I believe that all the points of the plan, except the last one, I managed to accomplish.
In principle, everything I did was the same bike, but I collected this bike from different parts all over the Internet:
- translation of the article “In Search of the Holy Grail” into Design For Masters ;
- the article "Flexible box with custom corners and borders" on 456 Berea st ;
- article "Faux Absolute Positioning" on A List Apart .
Here is how I went to create a final layout:
To begin with, his version of the Holy Grail was taken and laid out. You can see it
here . It did not differ in any way from the version that was on the ALA, it’s just that the basement is pressed to the bottom of the screen and the speakers of the same height.
After the appearance of the article “Faux Absolute Positioning” on A List Apart, I was impressed by this technique and decided to remake my “perfect” layout, and that's what I
got in the end.
Then I came across a way to
create a flexible framework developed by Roger Johansson (Roger Johansson) and decided to add a layout to it.
In the end I got what I wanted. But at the same time, the number of additional blocks in my version is simply terrifying. It is also worth noting that for “columns of the same height” it will not be possible to apply a non-repeated background image pressed to the bottom of these columns (since the bottom is far outside the viewing window). Those. this image would have to be positioned inside the parent .box or (and?) .content container. And if you have a design different from mine, you will have to dance long and hard with it.
Apart from myself as an experienced and sophisticated typesetter, I would like to ask Habr's users how to optimize this layout? Or are there other ways already, much simpler than mine and satisfy all the requirements described above?
Thanks in advance for the answers.