Проблема с фоном div

Squoll2 · 22 Мар 2014

Доброго времени суток форумчане. Требуется ваша помощь в верстке так как сам уже никак не могу понять в чем дело.
Имеется такой дизайн:

Задача заключается в том, чтобы изменить задний фон верхнего div элемента:

Если я в css ставлю параметр background, то получается вот так:

А если добавляю новый слой, то вот так:

[/spoil]
Вот код который использую в html:
[spoil]

Код:

<div class="main-wrapper">
<div id="header"><div id="welcome">
  <?php echo $language; ?>
  <?php echo $currency; ?>
  <div class="links">
  <?php echo $text_account; ?>
  <ul>
  <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
  <li><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>
  <li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
  <li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
  </ul>
  </div>
    <?php if (!$logged) { ?>
    <?php echo $text_welcome; ?>
    <?php } else { ?>
    <?php echo $text_logged; ?>
    <?php } ?> 
  </div>
<?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><br>
<?php } ?>
  <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" id="filter_name" placeholder="" value="<?php echo $search; ?>" />
  </div>
<?php echo $cart; ?>
</div>
<?php if ($categories) { ?>
<div>
</div><br><BR><BR><br><br>
<div id="menu">
<span>Menu</span>
  <ul>
  <li class="home"><a  title="<?php echo $text_home; ?>" href="<?php echo $home; ?>"><span><?php echo $text_home; ?></span></a></li>
    <?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>

А вот отрезок из css:

HTML:

/* layout */
.main-wrapper{max-width:1170px; margin:20px auto 0 auto; padding:0 15px; background:#fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08); border-radius:5px 5px 0px 0px; -webkit-border-radius:5px 5px 0px 0px; -moz-border-radius:5px 5px 0px 0px;}
#container { text-align:left;   overflow:auto; }
#column-left { float:left; width:220px; padding:0px 15px 0 0px; border-right:1px solid #eee; }
#column-right { float: right; width:220px; padding:0px 0px 0 15px; border-left:1px solid #eee; }
#content { min-height: 400px; margin-bottom:10px; padding:0px 0px 0 0px; }
#column-left + #column-right + #content, #column-left + #content { margin-left:250px; }
#column-right + #content { margin-right:250px; }
/* header */
#header { min-height:90px; position: relative; background:#fff; padding:10px 0;}
#header #logo { float:left; margin:10px 16px 10px 1px; z-index:1; }
#header #welcome { color: #666; float:right; height:25px; line-height:25px; }
#header #welcome a, #language, #currency { float:left; margin:0 7px; cursor:pointer; color:#666; text-decoration:none; text-transform:capitalize }
#language { float:left; z-index:1011; position:relative ; background:url(../image/bullet-d.png) right center no-repeat; padding-right:10px}
#language img { cursor: pointer; margin-right:3px; }
#language ul, #currency ul, #header .links ul { display:none; }
#language:hover ul, #currency:hover ul, #header .links:hover ul { display:block; position:absolute; top:25px; left:0; z-index:10; }
#language ul li, #currency ul li, #header .links ul li { display:block; width:130px; }
#header #welcome a:hover, #header .links:hover, #currency:hover, #language:hover { color:#F15A23; }
#welcome ul { border:1px solid #ebe9e9; background:#f7f7f7; box-shadow:0 0px 5px rgba(0, 0, 0, 0.1); border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
#currency { float:left; position:relative; z-index:1011; background:url(../image/bullet-d.png) right center no-repeat; padding-right:10px}
#currency a b { color: #000; text-decoration: none; }
#header .links { position:relative; float:left; z-index:1011; margin:0 7px; cursor:pointer; background:url(../image/bullet-d.png) right center no-repeat; padding-right:10px}
#header #cart { position:absolute;  bottom:1px; right:0px; line-height:32px; float:right; }
#header #cart .heading { float: right; padding:0 5px 0 0px; position: relative; }
#header #cart .heading h4 { background:#F15A23; width:32px; height:32px; display:inline-block; float:left; margin:4px 2px 0 0; }
#header #cart .heading a { text-decoration: none; font-size:14px; height:36px; float:left; color:#444; }
#header #cart .heading a span { background:url('../image/bullet-d.png') right 13px no-repeat; padding-right: 12px; display:inline-block; margin-top:5px; }
#header #cart .content { clear: both; display:none; position:absolute; padding:8px; min-height: 150px; border:1px solid #eee; z-index:1011; background: #FFF; width:350px; right:0; top:35px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 2px 8px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);}
#header #cart.active .heading{}
#header #cart.active .content { display: block; }
.mini-cart-info table { border-collapse: collapse; width: 100%; margin-bottom: 5px; }
.mini-cart-info td { color: #000; vertical-align: top; padding: 10px 5px; border-bottom: 1px solid #EEEEEE; }
.mini-cart-info .image { width: 1px; }
.mini-cart-info .image img { text-align: left; }
.mini-cart-info .name small { color: #666; }
.mini-cart-info .quantity { text-align: right; }
.mini-cart-info td.total { text-align: right; }
.mini-cart-info .remove { text-align: right; }
.mini-cart-info .remove img { cursor: pointer; }
.mini-cart-total { text-align: right; }
.mini-cart-total table { border-collapse: collapse; display: inline-block; margin-bottom: 5px; }
.mini-cart-total td { color: #000; padding:2px; }
#header #cart .checkout { text-align: right; clear: both; line-height:normal; }
#header #cart .empty { padding-top: 50px; text-align: center; }
#header #search { float:left; margin:32px 0 0 0; position:relative;}
#header .button-search { background:url('../image/button-search.png') center center no-repeat; width:34px; height:34px; position:absolute; right:0; cursor: pointer; float:right; }

#header #search input { background:#FFF; padding:0 10px; width:460px; height:32px; line-height:32px; font-size:16px; color:#333; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; outline:none;}
#header #search input:focus { box-shadow:0px 0px 2px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0px 0px 2px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow:0px 0px 2px rgba(0, 0, 0, 0.1) inset; }
/* menu */
#menu { background:url(../image/menu.png) left top repeat #444; margin-bottom:15px; height:40px; padding:0px 5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; z-index: -1;}
li.home { margin:0 0 0 5px; }
li.home a { display:block; height:35px!important; line-height:35px!important; padding:5px 5px 0 5px!important; }

li.home a span { background:url(../image/home-icon.png) center center no-repeat; display:block; width:30px; height:30px; text-indent:-9999px; }
#menu ul { list-style: none; margin: 0; padding: 0;}
#menu > ul > li { position: relative; float: left; z-index:1010; padding:0px 5px 0px 0px; }
#menu > ul > li > a { font-size:13px; color: #fff; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; }
#menu > ul > li:hover > a {color:#fff; background:#F15A23; }
#menu > ul > li > div { display: none; background:#F15A23; position: absolute; z-index:1008; padding: 5px; border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px;}
#menu > ul > li:hover > div { display: table; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); }
#menu > ul > li > div > ul { display: table-cell; }
#menu > ul > li ul + ul { padding-left: 20px; }
#menu > ul > li ul > li > a {background:url(../image/bullet-1.png) -10px center no-repeat; text-decoration: none; font-size:12px; padding:4px; display: block; white-space: nowrap; min-width: 140px; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s}
#menu > ul > li ul > li > a:hover {background:url(../image/bullet-1.png) right center no-repeat; font-weight:bold; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
#menu > ul > li > div > ul > li > a { color:#fff; }

Подскажите как именно я должен исправить элемент header для того чтобы вместо белого фона был мой фон. Заранее благодарю вас

Alexeina66 · 22 Мар 2014

Щас сделаем) Так background: url('/путь до картинки нужной');

Потом применяйте margin-top:10px; например либо margin-left....чтобы поставить в нужное место.

Если не подходит по размеру играйте с ними ширина в css width:0px высота height: 0px

если есть ссылка на сайт то быстрее разберемся

Squoll2 · 22 Мар 2014

Как я и говорил вот если менять

Код:

#header { min-height:90px; position: relative; background:#fff; padding:10px 0;}

и менять цвет то получается как на 3 картинке и как только я не игрался с margin на всю длину div всё равно не лезет.

Alexeina66 · 22 Мар 2014

Значит один div режет другой либо размеры diva не те которые вам нужно....есть ссылка на сайт?

Squoll2 · 22 Мар 2014

Да вот Для просмотра ссылки Войди или Зарегистрируйся могу вставить полный код css

Alexeina66 · 22 Мар 2014

Сорри ошибься чуть чуть убрать min-height вставить height: 156px;

в
#menu {

background: url(Для просмотра ссылки Войди или Зарегистрируйся) left top repeat #444;
margin-bottom: 15px;
height: 40px;
padding: 0px 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index: -1;
margin-top: -70px;

Если нужно вставить картинку то
#header {

position: relative;
background: url ('/путь до картинки') #000;
padding: 10px 0;
margin-left: 5px;
height: 156px;

Squoll2 · 22 Мар 2014

Grosso2020 написал(а):
Сорри ошибься чуть чуть убрать min-height вставить height: 156px;

в
#menu {

background: url(Для просмотра ссылки Войди или Зарегистрируйся) left top repeat #444;

margin-bottom: 15px;

height: 40px;

padding: 0px 5px;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

z-index: -1;

margin-top: -70px;

Если нужно вставить картинку то
#header {

position: relative;

background: url ('/путь до картинки') #000;

padding: 10px 0;

margin-left: 5px;

height: 156px;

Сработало но другая проблема появилась - отступы от этого дива слева и справа как можно убрать? посмотри как получилось на сайте

Alexeina66 · 22 Мар 2014

Для начала в файле index.css

#menu {

background-color: #444444;
margin-left: 5px;

Потом в файле stylesheet.css

height: 166px;

position: relative;

background: url(Для просмотра ссылки Войди или Зарегистрируйся);

padding: 10px 0;

/*margin-left: 5px;*/ убираете эту строчку

width: 1174px;
Потом в меняем на это в 18 строке stylesheet.css И все у меня получилось

.main-wrapper {

max-width: 1173px;
margin: 20px auto 0 auto;
padding: 0px;
background: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;

}

Squoll2 · 22 Мар 2014

Код:

#header { height:166px; position: relative; background:url(../image/fon.png); padding:10px 0; margin-left:5px;}

Вот как у меня реализован код но отступы все равно имеются по бокам

Alexeina66 · 22 Мар 2014

Получилось? Да кстати footer сайта отредактируйте по ширине на max-width: 1145px; в 418 строке , так как изменилась размеры header и страницы сайта

Проблема с фоном div

Squoll2

Постоялец

Alexeina66

Мой дом здесь!

Squoll2

Постоялец

Alexeina66

Мой дом здесь!

Squoll2

Постоялец

Alexeina66

Мой дом здесь!

Squoll2

Постоялец

Alexeina66

Мой дом здесь!

Squoll2

Постоялец

Alexeina66

Мой дом здесь!