Вёрстка сайта Amazon.com

[Marakaya]

Уважаемы гуру div верстки и css, очень вас прошу рассказать нубу о технологии и принципе верстки дизайна сайта amazon.com. Не знаю почему, но для меня это эталон интернет магазина, да и вообще очень нравится что он на всех мониторах (на работе у меня 19 дюймов широкоформатный, дома - 19 дюймов квадрат) выглядит одинаково. Мне сейчас нужно начать делать верстку одного сайта для дизайнера/архитектора и хотелось бы для этого сайта сделать дизайн на всю страницу. Расскажите пожалуйста, или дайте ссылку на мануал по верстке для всех видов мониторов, что бы везде это смотрелось одинаково...

[Lednar94]

Уважаемы гуру div верстки и css, очень вас прошу рассказать нубу о технологии и принципе верстки дизайна сайта amazon.com. Не знаю почему, но для меня это эталон интернет магазина, да и вообще очень нравится что он на всех мониторах (на работе у меня 19 дюймов широкоформатный, дома - 19 дюймов квадрат) выглядит одинаково. Мне сейчас нужно начать делать верстку одного сайта для дизайнера/архитектора и хотелось бы для этого сайта сделать дизайн на всю страницу. Расскажите пожалуйста, или дайте ссылку на мануал по верстке для всех видов мониторов, что бы везде это смотрелось одинаково...

На сайта Амазона используется "резиновый" макет. Вот здесь http://htmlbook.ru/samlayout/tipovye-makety можно узнать подробнее про типы макетов.

[eis]

Резиновый с элементами адаптивности

[Marakaya]

И к какому же типу шаблона отнести мой?) Двухколоночный? Или какой?)

[cyklop77]

"хаотичный"

[eis]

Marakaya, Одноколоночный.

Но не путайте тип макета и тип верстки

Edited August 11, 2012 by eis

[Lednar94]

И к какому же типу шаблона отнести мой?) Двухколоночный? Или какой?)

Здесь http://htmlbook.ru/layout представлены типовые макеты веб-страниц.

[Marakaya]

Ребят, подскажите, как бы вы сверстали такую структуру ?

Вот мой вариант:

* {

margin: 0;

padding: 0;

}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

background: url(../img/bgbody.jpg) top no-repeat black;

}

a {

color: white;

outline: none;

text-decoration: none;

}

a:hover {

text-decoration: none;

}

p {

margin: 0 0 18px;

color: white;

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

background: black;

width: 1200px;

min-width: 1000px;

margin-left: 70px;

margin-right: 70px;

}

#header {

height: 100px;

background: white;

}

#slider {

width: 1000px;

height: 300px;

margin: 15px auto;

}

#menu {

width: 600px;

height: 200px;

position: relative;

right: -20%;

margin-top: 30px;

}

#middle {

position: relative;

margin-top: 50px;

width: 1000px;

}

}

#container {

width: 100%;

border: 1px solid red;

margin-top: 50px;

position: relative;

}

#content {

padding: 0 20px;

margin-top: 20px;

}

#footer {

height: 15px;

background: yellow;

}

Футер ещё книзу не прижал. Да и не сделал что бы сайт был резиновый. Поправьте меня, если возможно.