Поддержка Проблемы и решения "резиновая" шапка

  • Помогите, пожалуйста, есть тема wordpress с «резиновым» макетом, поменяла «шапку» в теме, поставила логотип, все было хорошо, пока не показали картинку на мониторе большего размера, нежели мой, подскажите как сделать «резиновую» шапку? сама пыталась, 2 дня бьюсь, а все бестолку, ткните где надо править и на что?
    вот так смотритсятык
    Это header

    <body <?php body_class(); ?>>
    <div id="page">
    
    <div id="header">
      <table cellspacing="0" cellpadding="0" width="100%">
        <tr>
        <td width="12">
        <img src="images/head left.jpg" width="12" height="200" border="0" />
        </td>
        <td class="header">
        <div id="headerlogo"><a href="http://grandservis.su"><img src="<?php bloginfo('template_directory'); ?>/images/logo new.png" /></a></div>
        </td>
    	<td width="11">
        <img src="images/head right.jpg" width="11" height="200" align="left" />
        </td>
        </tr>
        </table>
    </div>
    </div>
    <div id="hmenu"> <!-- Horizontal navigation menu -->
    <a style="display:none;" href="#content">Skip to content</a>
    <ul>
    	<?php wp_list_pages('title_li=&depth=2&sort_column=menu_order&exclude='.f2_option('hmenu_exclude')) ?>
    	<li class="hmenu_rss"><a href="<?php bloginfo('rss2_url'); ?>"><?php _e('Feed', 'f2') ?></a></li>
    </ul>
    </div>
    
    <div id="container">
    <div id="wrapper">

    css

    #header {
    	margin:0;
    	height:90px;
    	border:1px solid #aaa;
    	background:#6d97b7;
    	background-image:url(images/head center.jpg);
    }
    
    #header img {
    	margin-left:100;
    	background-image:url(images/head center.jpg);
    }
    
    #headerlogo {
    	position:relative;
    	top:15%;
    	left:205px;
    }
    #headerlogo h1, #headerlogo div.description {
    	position:relative;
    	bottom:26px;
    		}
    #headerlogo h1 {
    	margin:0;
    	font-size:3em;
    	}
    #headerlogo h1 a {
    	background:transparent;
    	color:#d0e0f0;
    	}
    #headerlogo h1 a:hover {
    	text-decoration:none;
    }
    
    #headerlogo div.description {
    	margin:0;
    	background:transparent;
    	color:#fff;
    	font-size:1.2em;

Просмотр 15 ответов — с 1 по 15 (всего 28)
  • Лучше, конечно, ссылку, а не низкого разрешения скриншот. Тогда я и код подсказал бы, скорее всего.

    Тут ведь еще какое дело, каждый слово «резиновая» понимает по-разному, кто-то горизонтально тянущаяся, кто-то вертикально, а вот по мне так вообще во все стороны. Что должно произойти?

    Попробую угадать. Резинка горизонтальная, значит речь идет о ширине изображения поставленного Вами в шапку.
    Что можно сделать:

    1. Подобрать фоновый цвет подложки соответствующим базовому цвету изображения;
    2. Тянуть изображение в горизонтали;
    3. Клонировать изображение;
    4. Адаптировать изображение сделав его боковые стороны переходом в градиент, где крайний цвет это цвет бэкграунда;
    5. Создать изображение шире того, которое используется.

    У каждого из решений есть недостатки. Наверное, последний наиболее верный, хотя и повлечет увеличение размера сайта и увеличение времени его загрузки, но, тут можно попробовать оптимизировать изображение и выйти в 0. Как повезет.

    Боже, как все сложно!!!Ну, по крайней мере, написано очень страшно))
    ссылка на сайт здесь
    Я Вам буду безмерно признательна, если Вы мне поможете.

    Последний предложенный Вами вариант тоже не подошел, размер шапки не изменился, вставила картинку 1920 px, но без изменений(

    Страшно!? 🙂 Ясно, тогда вот совсем легко:

    1. В style.css в строке 88 убрать margin: 0 auto;
    2. В хвосте этогоже файла дописать #header {width: 1920px;};

    Фоновая картинка у Вас большая в ширину 1920px, ее я предлагаю использовать по-полной. Фон не станет резиновым, но подложка шапки растянется широко, достаточно для моников 1920*1080.

    Станет немного лучше, но, как и прежде, не идеально.

    А вообще, стоит уйти от таблиц и сверстать шапку блоками, тем более, что остальное именно так и сделано. В этом случае можно будет еще чуть более красиво реализовать задуманное.

    Последний предложенный Вами вариант тоже не подошел, размер шапки не изменился, вставила картинку 1920 px, но без изменений(

    Так а разметку то тоже надо поправить!

    Сделала, все как Вы написали, теперь у меня вся шапка прижалась к левому краю, но шире не стала(((
    Уйти от таблиц — это Вы про таблицу в шапке?так это я искала решение моей проблемы — хотела ее сделать «тянущейся», а так в шапке не было таблицы…..

    Ну как же все? #header {width: 1920px;}; этого нет. Это растянет шапку по-ширине на 1920 пикселей.

    Да, прижалось влево, да, не идеально, зато широко, подойдет для моников до 1920px, просто и совсем не страшно 🙂

    Спасибо большое!!!На большом мониторе все круто, но на маленьком ноуте теперь ужасно(((тык
    А есть вариант чтобы везде было красиво?

    Конечно есть. Можно подглядеть на другом сайте как сделано и повторить, можно попросить кого-либо поправить ну а можно попробовать сделать то, что я скажу:

    1. В style.css в строке 88 убрать min-width: 740px; max-width: 1240px;
    2. Убрать поставленную Вами таблицу
    3. Логотип поставить через <a><img></a> (у Вас так и сделано, но в таблице), а затем спозиционировать его через селектор #header img {margin:78px 0 0 250px;}

    Так, наверное, мне сразу и надо было Вам рекомендовать. Но, в попытке упростить, я усложнил задачу.

    Чуть не забыл, надо убрать добавленный width: 1920px;.

    Вроде бы все сделала, а не получается все равно(

    Урааааа, заработалооо)))Спасибо огромное)))Ученье-свет, надо выучиться всему)))Спасибо еще раз!!!

    Добрый человек, а Вы не поможете еще в одном?сделать горизонтальное меню «резиновым»?

    smusik, пожалуйста, конкретизируйте вопрос. Я сходу могу предложить три варианта резиновости меню. Опишите, как Вы видите его?

    Могу привести пример сайта kumir-travel.ru, хотелось бы как здесь.

    Ясно, тогда вот:

    1. style.css строка 191 добавить display: inline-block;
      text-align: center; изменить width: 100%; убрать float: right;
    2. в строке 198 изменить на display: inline-block; убрать float: left; изменитьpadding: 0 1% 0 0;

    Вроде так 🙂

    Я Вас замучала уже, наверное, но что-то страшненькое получилось….почему то встает навигационное меню по середине шапки, т.е. начинается с середины, а не с края….в общем ладно, я бы хотела, чтобы горизонтальные «кнопки» равномерно по всей ширине располагались….от левого края к правому.
    Спасибо огромнейшее за помощь!!!Вы мне оооочень помогли))

Просмотр 15 ответов — с 1 по 15 (всего 28)
  • Тема «"резиновая" шапка» закрыта для новых ответов.