"резиновая" шапка

  • Решено smusik

    (@smusik)


    12 лет, 6 месяцев назад

    Помогите, пожалуйста, есть тема 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
  • skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

    Лучше, конечно, ссылку, а не низкого разрешения скриншот. Тогда я и код подсказал бы, скорее всего.

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

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

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

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

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

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

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

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

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

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

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

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

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

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

    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

    (@smusik)

    12 лет, 6 месяцев назад

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

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

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

    skodnik

    (@skodnik)

    12 лет, 6 месяцев назад

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

    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;

    Вроде так 🙂

    Автор smusik

    (@smusik)

    12 лет, 6 месяцев назад

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

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