Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Резиновый header и footer.

Reqman
 Share

Recommended Posts

Reqman Contributor

Reqman

Опубліковано:
Опубліковано:

Добрый день, Уважаемые форумчане! Очень прошу подсказать. Мне необходимо сделать шапку и футер на всю ширину экрана, т.е. применить свойство width:100%. Я прочитал несколько тем и манулов, но так и не нашел толковый ответ на свой вопрос. Я использую чистый OpenCart 1.5.6.

Еще нужно, чтоб все блоки, которые находятся в header и footer были отцентрированы. 

Надіслати
Поділитися на інших сайтах

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано:

Спасибо за ответ. Читал эту тему. А как отцентрировать все содержимое? Оно слева отображается. 

Надіслати
Поділитися на інших сайтах

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано: 
 margin: 0 auto;

Еще раз, спасибо Вам. Частично помогло: в файле footer.tpl я переместил последний </div> в самое начало. Футер стал на весь экран, но не отцентрирован (см. рисунок).

 

1e346d7d1fbf.png

 

В файле stylesheet.css  прописал отцентровку: margin: 0 auto; . Выглядит следующем образом:

/* footer */ #footer {margin: 0 auto;	clear: both;	overflow: auto;	min-height: 100px;	padding: 20px;	border-top: 1px solid #DBDEE1;	border-bottom: 1px solid #DBDEE1;	background: #F8F8F8;

Подскажите пожалуйста, почему блоки не находятся по центру. 

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

Подскажите пожалуйста, почему блоки не находятся по центру. 

теперь содержимое футера, т.е. эти блоки надо поместить в отдельный контейнер и задать ему ширину как у основного контейнера сайта. т.е .получится футер -> контейнер -> блоки

и у футера надо убрать боковые паддинги, чтобы не было прокрутки.

  • +1 1
Надіслати
Поділитися на інших сайтах
1

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано:

теперь содержимое футера, т.е. эти блоки надо поместить в отдельный контейнер и задать ему ширину как у основного контейнера сайта. т.е .получится футер -> контейнер -> блоки

и у футера надо убрать боковые паддинги, чтобы не было прокрутки.

Спасибо! Суть, я понял, а реализацию боюсь что нет. Если у вас есть, пример, или более подробная инструкция - пожалуйста, поделитесь. 

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

Спасибо! Суть, я понял, а реализацию боюсь что нет. Если у вас есть, пример, или более подробная инструкция - пожалуйста, поделитесь. 

<div id="footer"><div class="fixfooter"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div></div>
.fixfooter{width: 980px;margin: 0 auto;}
  • +1 1
Надіслати
Поділитися на інших сайтах
1

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано: 
<div id="footer"><div class="fixfooter"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div></div>
.fixfooter{width: 980px;margin: 0 auto;}

Супер, большое спасибо! Уже практически идеально, только вот не совсем по центру. Вы уж извините, но если не тяжело, помогите пожалуйста допилить. Картинка прилагается: 

f7fcb485f7d9.png

 

А шапку как-то можно растянуть на весь экран: чтоб черная полоса меню была по ширине экрана, а ее содержимое по центру. 

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

Супер, большое спасибо! Уже практически идеально, только вот не совсем по центру. Вы уж извините, но если не тяжело, помогите пожалуйста допилить. Картинка прилагается: 

 

 

А шапку как-то можно растянуть на весь экран: чтоб черная полоса меню была по ширине экрана, а ее содержимое по центру. 

 

для #powered пропишите теже стили что для .fixfooter

шапку по аналогии, сначала #header поместите выше контейнера, а потом внутри меню создайте дополнительный див-аналог .fixfooter

пробуйте сами, а то так и не дойдет что и зачем делали

  • +1 2
Надіслати
Поділитися на інших сайтах
1

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано:

для #powered пропишите теже стили что для .fixfooter

шапку по аналогии, сначала #header поместите выше контейнера, а потом внутри меню создайте дополнительный див-аналог .fixfooter

пробуйте сами, а то так и не дойдет что и зачем делали

 

Спасибо! Вчера сидел, копался, вроде по аналогии сделал, а не получается. Пожалуйста, если можете, помогите еще раз. Создавал класс fixmenu. Файл header.tpl прилагается:

<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta charset="UTF-8" />
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
<?php if ($stores) { ?>
<script type="text/javascript"><!--
$(document).ready(function() {
<?php foreach ($stores as $store) { ?>
$('body').prepend('<iframe src="<?php echo $store; ?>" style="display: none;"></iframe>');
<?php } ?>
});
//--></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body>
<div id="header">

  <?php if ($logo) { ?>
  <div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
  <?php } ?>
  <?php echo $language; ?>
  <?php echo $currency; ?>
  <?php echo $cart; ?>
  <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
  </div>
  <div id="welcome">
    <?php if (!$logged) { ?>
    <?php echo $text_welcome; ?>
    <?php } else { ?>
    <?php echo $text_logged; ?>
    <?php } ?>
  </div>
  <div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
</div>
<div id="container">

<?php if ($categories) { ?>
<div id="menu">
<div class="fixmenu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
</div>
<?php } ?>
<?php if ($error) { ?>
    
    <div class="warning"><?php echo $error ?><img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>
    
<?php } ?>
<div id="notification"></div>
Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

тогда верните хедер как было и сделайте по пунктам:

1) <div id="header"> и <div id="menu"> вынести выше <div id="container">. задать им ширину 100%

2) внутри <div id="menu"> есть <ul>, обзовите его например <ul class="fixul"> и задайте 

.fixul{
width: 980px;
margin: 0 auto;
}

если хотите чтобы хедер тоже не плыл, сделайте там аналогично футеру только .fixheader

  • +1 1
Надіслати
Поділитися на інших сайтах
1

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано:

тогда верните хедер как было и сделайте по пунктам:

1) <div id="header"> и <div id="menu"> вынести выше <div id="container">. задать им ширину 100%

2) внутри <div id="menu"> есть <ul>, обзовите его например <ul class="fixul"> и задайте 

.fixul{width: 980px;margin: 0 auto;}

если хотите чтобы хедер тоже не плыл, сделайте там аналогично футеру только .fixheader

riny, я Вам очень благодарен за то что вы тратите время, и помогаете, но к сожалению этот метод у меня не сработал. Если Вы найдете еще время и будет желание, пожалуйста, подскажите, что может быть не так.

Вот мой header.tpl:

<body><div id="header"><div class="fixheader">  <?php if ($logo) { ?>  <div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>  <?php } ?>  <?php echo $language; ?>  <?php echo $currency; ?>  <?php echo $cart; ?>  <div id="search">    <div class="button-search"></div>    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />  </div>  <div id="welcome">    <?php if (!$logged) { ?>    <?php echo $text_welcome; ?>    <?php } else { ?>    <?php echo $text_logged; ?>    <?php } ?>  </div>  <div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div></div></div><div id="menu">  <ul class="fixul">    <?php foreach ($categories as $category) { ?>    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>      <?php if ($category['children']) { ?>      <div>        <?php for ($i = 0; $i < count($category['children']);) { ?>        <ul>          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>          <?php for (; $i < $j; $i++) { ?>          <?php if (isset($category['children'][$i])) { ?>          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>          <?php } ?>          <?php } ?>        </ul>        <?php } ?>      </div>      <?php } ?>    </li>    <?php } ?>  </ul></div><div id="container"><?php if ($categories) { ?><?php } ?><?php if ($error) { ?><div class="warning"><?php echo $error ?><img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div><?php } ?><div id="notification"></div>

Вот мой stylesheet.css:

.fixheader {width: 980px;margin: 0 auto;}.fixul{width: 980px;margin: 0 auto;}

Вот мой скрин:

1383224419-clip-101kb.jpg?nocache=1

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

чтобы добиться такого

 

 5717d48d287a.jpg

хедер должен быть таким

<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta charset="UTF-8" />
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $og_url; ?>" />
<?php if ($og_image) { ?>
<meta property="og:image" content="<?php echo $og_image; ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo $logo; ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php echo $name; ?>" />
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
<?php if ($stores) { ?>
<script type="text/javascript"><!--
$(document).ready(function() {
<?php foreach ($stores as $store) { ?>
$('body').prepend('<iframe src="<?php echo $store; ?>" style="display: none;"></iframe>');
<?php } ?>
});
//--></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body>
<div id="header">
<div id="top">
</div>
<div class="fixheader">
  <?php if ($logo) { ?>
  <div id="logo">
  <?php if ($home == $og_url) { ?>
  <img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" />
  <?php } else { ?>
  <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
  <?php } ?>
  </div>
  <?php } ?>
  <?php echo $language; ?>
  <?php echo $currency; ?>
  <?php echo $cart; ?>
  <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
  </div>
  <div id="welcome">
    <?php if (!$logged) { ?>
    <?php echo $text_welcome; ?>
    <?php } else { ?>
    <?php echo $text_logged; ?>
    <?php } ?>
  </div>
  <div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
</div>
</div>
<?php if ($categories) { ?>
<div id="menu">
  <ul class="fixul">
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
<?php } ?>
<div id="container">
<div id="notification"></div>

в стилях добавляем новое

.fixheader {
width: 980px;
margin: 0 auto;
position: relative;
}
.fixul{
width: 980px;
margin: 0 auto !important;
}

и изменяем старое

#top {
	height: 30px;
	border-top: 1px solid #DBDEE1;
	border-bottom: 1px solid #DBDEE1;
	background: #F8F8F8;
	position: absolute;
	width: 100%;
}
  • +1 1
Надіслати
Поділитися на інших сайтах
1

Tom Grand Master

Tom

Опубліковано:
Опубліковано:

А не проще было для всего этого просто прикрепить картинку в хидер на всю ширину?

  • +1 1
Надіслати
Поділитися на інших сайтах
1
1

Tom Grand Master

Tom

Опубліковано:
Опубліковано:

Не уловил мысль)))  Сейчас по идее только меню стало резиновым,а всё содержимое хидера всё равно находится внутри  .fixheader.А вопрос был про резиновый вариант хидера.Ну если я правильно понял.А то что получилось легко меняется путём добавления  картинки,типа этой например 39fdb601c899.png

body {background: url('../image/картинка') top repeat-x;
.....
....
....
....
}
  • +1 1
Надіслати
Поділитися на інших сайтах
1
1

riny Veteran

riny

Опубліковано:
Опубліковано:

Не уловил мысль)))  Сейчас по идее только меню стало резиновым,а всё содержимое хидера всё равно находится внутри  .fixheader.А вопрос был про резиновый вариант хидера.Ну если я правильно понял.А то что получилось легко меняется путём добавления  картинки,типа этой например 39fdb601c899.png

так я ведь и говорю, изначально ширина #header 980px, ну всунем мы эту картинку и что изменится кроме того, что у все такого же кастрированного 980 пикселями хедера будет фон? ^_^ его в любом случае надо выносить из контейнера и делать промежуточный див fixheader чтобы содержимое (лого, поиск...) не поплыло. ведь автор очень хотел именно 

 

отцентрировать все содержимое 

т.е. содержимое в любом случае должно было вертеться в 980px :) 

  • +1 1
Надіслати
Поділитися на інших сайтах
1

Tom Grand Master

Tom

Опубліковано:
Опубліковано:
так я ведь и говорю, изначально ширина #header 980px, ну всунем мы эту картинку и что изменится кроме того, что у все такого же кастрированного 980 пикселями хедера будет фон?

 

 

Я же написал кусочек стилей в которых хидер никоим боком не участвует))))

body {background: url('../image/картинка') top repeat-x;
.....
.....
.....
....
}
  • +1 1
Надіслати
Поділитися на інших сайтах
1
1

Reqman Contributor

Reqman

Опубліковано:
  • Автор
Опубліковано:

 

Не уловил мысль)))  Сейчас по идее только меню стало резиновым,а всё содержимое хидера всё равно находится внутри  .fixheader.А вопрос был про резиновый вариант хидера.Ну если я правильно понял.А то что получилось легко меняется путём добавления  картинки,типа этой например 39fdb601c899.png

body {background: url('../image/картинка') top repeat-x;
.....
....
....
....
}

А если в футере нужно будет изменить фон, то как тогда? Ведь уже фоновая картинка используется. 

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

 

 

Я же написал кусочек стилей в которых хидер никоим боком не участвует))))



body {background: url('../image/картинка') top repeat-x;
.....
.....
.....
....
}

меня затепило слово

 

А не проще было для всего этого просто прикрепить картинку в хидер на всю ширину?

куска со стилями для body то ли не было когдя я отвечал, то ли просто проморгал :) и все примерял к хедеру

  • +1 1
Надіслати
Поділитися на інших сайтах
1

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду