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

priaz

Добрый вечер, как и у многих проблема с шапкой, третий день не получается привести в порядок. Почитал подобные темы с форумов, но решения не нашел. При разном разрешении экрана шапка выглядит по-разному... При скроллинге размером весь сайт уменьшается правильными пропорциям, но шапка растягивает до окончаения размера картинки в шапке 2000 px - торчит куском за пределом основного блока. Ко всему этому на шапке есть логотип, который находится справа, но при разном разрешении экрана он может находиться и в середине, может вообще не показываться. Прошу помочь разобраться как справиться с этой задачей.Был вариант с дублированием мелких блоков шапки, но он не подходит так как логотип справа водном и том же месте не поместить. Дублировать середину то же сложно, так как изображение шапки "диагональные линии" на даст целое изображение правильным.линк на сайт
10 ответов

priaz

вам нужно задать разные размеры шапки для разных разрешений экрана, т.е. применить адаптивную верстку (поищите про нее информацию в интернете, ее довольно много)


priaz

думаю всё дело в этом
<div id="header">
<div id="logo"><h1><!-- <logo> -->Федерация стрельбы из лука Чувашской Республики<!-- </logo> --></h1></div>
<div id="picture"></div>
</div>
#logo {
width: 110%;
background: rgb(255, 255, 255);
height: 1px;
}
#picture {
width: 100%;
float: left;
background: url([url]http://archery21.narod.ru/olderfiles/shapka/logo_archery_211.jpg[/url]) 0% 50% no-repeat;
height: 272px;
}


priaz

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


priaz

можно. Задайте ему выравнивание по правому краю и margin-right в процентах


priaz

<div id="header">
<div id="logo"><h1><!-- <logo> -->Федерация стрельбы из лука Чувашской Республики<!-- </logo> --></h1></div>
<div id="picture"></div>
<div id="picture2"></div>
div#logo {width: 110%;background: rgb(255, 255, 255);height: 1px;}
div#picture {width:100%;float:left;background:url('http://archery21.narod.ru/olderfiles/shapka/site2.jpg')left no-repeat;height:272px;}
div#picture2 {float: right;background: url('http://archery21.narod.ru/olderfiles/shapka/logo_archery_212.png') margin-right: 25%;height: 272px;}
попробовал отдельно добавить логотип с margin-right - нигде не вижу что бы отражался. Как правильно поправить ?
div#header {width:100%;float:left;background:url('http://archery21.narod.ru/olderfiles/shapka/site2.jpg');left no-repeat; height:272px;}
div#logo {width: 110%;background: rgb(255, 255, 255);height:1px;}
div#picture {width:250px;float:right;background:url('http://archery21.narod.ru/olderfiles/shapka/logo_archery_212.png');height:245px;}
получилось спасибо за совет. Единственное, появилась проблема с заголовком: в разрез фона высотой один пиксель тянется белая полоска от названия сайта,как ее можно убрать ?


priaz

уточните, что за полоска? Не смог на сайте ее найти... у вас кстати маркеры навигации не очень симметрично сидят)


priaz

вчера сам поправил. Какие маркеры навигации? если имеется вииду что панель меню расширяется, то это не плохо.


priaz

ну да, шарики меню) я имел в виду что они на текст залезают при увеличении масштаба


priaz

да, есть пару строк таких, но пока че-то не нашел где и как править


priaz

попробуй задать padding-right