Как правильно сверстать HEADER?

Pumych · April 10, 2011

Нужно что бы полоска была по ширине экрана а картинки на неизменном растоянии от меню.

Какой подход будет правильнее для кроссбраузерности ?

1.Сделать все одной картинкой и добавить на background серую полоску под ту что имеется, на случайц если экран шире картинки.

2.По поводу крассного лого пробовать z-index, а полоску на background блока который на ширину экрана.

3.Друкой вариант?

Edited April 10, 2011 by Pumych

SelenIT · April 10, 2011

Честно говоря, вообще не вижу тут картинок, кроме этого красного логотипа. Для заголовка есть прекрасный бесплатный веб-шрифт, остальное — однотонные прямоугольники, прекрасно делающиеся обычным background-color...

Pumych · April 10, 2011

Честно говоря, вообще не вижу тут картинок, кроме этого красного логотипа. Для заголовка есть прекрасный бесплатный веб-шрифт, остальное — однотонные прямоугольники, прекрасно делающиеся обычным background-color...

По поводу фонтов - пользователи должны его устанавливать, или я не правильно понял?

По поводу полоски серого цвета на ширину экрана и лого над ним - не понял.

Edited April 10, 2011 by Pumych

Быколай · April 10, 2011

Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

а логотип-картинку разместите в нужном месте css-позиционированием.

@font-face на htmlbоok.ru

position на htmlbоok.ru

Edited April 10, 2011 by Быколай

SelenIT · April 10, 2011

Ничего устанавливать не надо. На том сайте по ссылке "@font-face Kit" есть генератор, создающий необходимые файлы и CSS для всех браузеров.

А потом можно что-то типа такого (точно не подгонял, чисто показать принцип):

<!DOCTYPE html>
	<title>Noah Lubin</title>
	<style>
@font-face {
    font-family: 'TeXGyreAdventorRegular';
    src: url('texgyreadventor-regular-webfont.eot');
    src: url('texgyreadventor-regular-webfont.eot?#iefix') format('eot'),
         url('texgyreadventor-regular-webfont.woff') format('woff'),
         url('texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('texgyreadventor-regular-webfont.svg#webfontVNQ4fiYu') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { margin: 0; padding: 0; }

h1 { font: 60px/68px 'TeXGyreAdventorRegular', Arial, sans-serif; letter-spacing: 0; color: #888; width: 1000px; margin: 0 auto; }

.header { min-width: 1000px; background: #888; padding: 2px 0; text-align: center; font: 14px/18px 'Times New Roman', serif; text-transform: uppercase; }
.header ul, .header li { display: inline; list-style: none; }
.header form { display: inline; }

.header a { display: inline-block; color: #888; background: #fff; padding: 0 10px; text-decoration: none; margin: 0 5px; }
.header a:hover { color: #fff; background: #ccc; }

.header label { display: inline-block; color: #fff; background: #ccc; padding: 0 5px; }
.header input { height: 14px; font: 12px/14px Arial, sans-serif; padding: 0; border: 0; vertical-align: 1px; margin: 0 0 0 5px; }
	</style>

<h1>Noah Lubin</h1>
<div class="header">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Gallry</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">My Videos</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<form action="#">
		<label>Search
			<input name="q">
		</label>
	</form>
</div>

Pumych · April 11, 2011

Спасибо за советы. А в IE7 position: absoulute работает по другому? http://noahlubin.com/index.php?page=gallery&gallery=all

psywalker · April 12, 2011

Спасибо за советы. А в IE7 position: absoulute работает по другому? http://noahlubin.com/index.php?page=gallery&gallery=all

Точно так же он должен работать. Только не position: absoulute, а position: absolute

Sign In

Как правильно сверстать HEADER?

Question

Pumych

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Pumych

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Pumych

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information