Простой макет.

[Red Planet]

Здравствуйте, делаю простой макет, есть несколько вопросов. В качестве фона header'а хочу поставить следующее изображение 1024*386 (ниже). Сразу вопрос: правильно ли так делать? Я имею в виду, правильно ли разрезал или нужно было другим образом (например, по частям: сначала серую полоску сверху, за ней белую область ниже и так далее, после чего каждый вырезанный элемент ставить в отдельный div)

На форуме прочитал, что нельзя сделать так, чтобы картинка растягивалась в соответствии с размерами окна браузера. Как поступить в данном случае? Мне нужно, чтобы было как на макете (изображение на всю ширину).

При таком коде изображение не повторяется, но и не дотягивает до конца окна (разрешение монитора в ширину 1280).

* {
 margin: 0;
 padding: 0;
}


body {
 font-family: Arial, Helvetica, sans-serif;
}


#header {
 background: url(images/header_bg.gif) no-repeat;
 height: 386px;
}

Писать в css-файле что-либо наугад не хочу и очень надеюсь на помощь.

Edited August 17, 2010 by Red Planet

[swetlana]

а давайте вы сделаете из psd картинку например jpeg, выложите её на хостинге картинок, например radikal.ru, покажете её, и тогда получите большее количество вменяемых ответов.

[Joyfit]

не лучше области одноцветные через ксс сделать?

[Red Planet]

а давайте вы сделаете из psd картинку например jpeg, выложите её на хостинге картинок, например radikal.ru, покажете её, и тогда получите большее количество вменяемых ответов.

Держите.

не лучше области одноцветные через ксс сделать?

Можно, но как быть с тем, что ниже белой области в шапке? Я имею ввиду ту, где ручка, ссылки, цитата.

[Great Rash]

Вы картинку с ручкой чтоли тянуть собрались?! Не занимайтесь глупостями, растяните серую и синюю области, а картинку с ручной оставьте в покое.

[Red Planet]

Общий вопрос: какие значения min-width и max-width целесообразно назначать в случае "резиновой" верстки?

[Great Rash]

Max-width такой, чтоб текст оставался читабельным. Длинную строку неудобно читать.

Min-width такой, чтоб все помещалось на мониторе с разрешением 1024х768 (наврядли у кого-то еще остались 15" моники с разрешением 800х600). Я обычно ограничиваю до 950 - 970 пикселей т.к. скроллбары у разных браузеров могут отличаться по ширине.

[Red Planet]

Еще один общий вопрос.

Изображения для сайта в каких форматах сохранять? Читал, что, если нет плавных переходов, сложных оттенков и тому подобного, то лучше сохранять в gif. А как поступить с обыкновенной картинкой, где все перечисленное есть?

[Great Rash]

Что меньше весит и не теряет качества при этом в том и сохранять. Я активно использую все форматы (png24, gif, jpg).

[Red Planet]

Еще один вопрос.

Как сделать отступы от одного элемента до другого в том маркированном списке, что в строчку (Home, Services, Request a Question)?

Пользоваться padding'ами или есть способ лучше?

Edited August 20, 2010 by Red Planet

[Searcher]

Max-width такой, чтоб текст оставался читабельным. Длинную строку неудобно читать.

Min-width такой, чтоб все помещалось на мониторе с разрешением 1024х768 (наврядли у кого-то еще остались 15" моники с разрешением 800х600). Я обычно ограничиваю до 950 - 970 пикселей т.к. скроллбары у разных браузеров могут отличаться по ширине.

Если расчитывать на смартфоны и нетбуки, то и 800х600 великовато будет )) Но тут может помочь адаптивная разметка.