Форум Сайтостроение Веб-строительство

CSS и наследование...тонкая штука...

12
wilelf
На сайте с 27.06.2005
Offline
322
wilelf
5083

Вопрос вот в чем:

1. Я создаю код с двумя (тремя и больше) вложенными div вида:

<div id="container">

<div id="div1">

</div>

</div>

2. Если задать первому фон, то почему-то под вложенным дивом его не будет видно, будет фон body...почему?

Агентство контекстной рекламы НеВсем ( https://www.nevsem.ru/ ) Пишу платно статьи для Хабра. Мой профиль ( https://habr.com/ru/users/wilelf/ )
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#1
wilelf:
Вопрос вот в чем:
1. Я создаю код с двумя (тремя и больше) вложенными div вида:
<div id="container">
<div id="div1">
</div>
</div>
2. Если задать первому фон, то почему-то под вложенным дивом его не будет видно, будет фон body...почему?

первый раз о таком слышу - проверяйте код.

каким образом вы задали фон?

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
WebSee
На сайте с 12.11.2007
Offline
66
WebSee
#2
wilelf:
Если задать первому фон, то почему-то под вложенным дивом его не будет видно, будет фон body...почему?

Скорее всего у вложенного дива прописан фон.

Встань и иди!
Dimid
На сайте с 03.12.2006
Offline
74
Dimid
#3

у вас что-то с css :) (покажите код и будем думать что...)

wilelf
На сайте с 27.06.2005
Offline
322
wilelf
#4

<html>

<head>

<title></title>

<link rel="stylesheet" href="css/template_css.css" type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="description" content="">

<meta name="keywords" content="">

</head>

<body>

<center>

<div id="container" bgcolor="#FFFFFF">

<div id="top">

<div class="logo">

<a href="#"><img src="images/logo.gif" width=140 height=70 border=0 alt="На главную" title="На главную"></a>

</div>

<div class="logged">

<form action="#" method="post">

<img class="userpic" src="images/logged_user.png" width=48 height=48 alt="Sketched" title="Sketched">

<a href="#">Sketched</a>

<img class="parser" src="images/logged_parser.gif" width=2 height=41>

<input type="submit"value="Выйти" id="button"/>

</form>

</div>

</div>

<div id="left">

<div>

<img src="images/teh.png" alt="Технические настройки" title="Технические настройки" width=48 height=48>

<h2>Технические настройки</h2>

- <a href="#">Профиль администратора</a><br>

- <a href="#">Управление пользователями</a><br>

- <a href="#">Системные настройки</a><br>

- <a href="#">Медиаменеджер</a>

</div>

<div>

<img src="images/content.png" alt="Управление контентом" title="Управление контентом" width=48 height=48>

<h2>Управление контентом</h2>

- <a href="#">Новости</a><br>

- <a href="#">Каталог продукции</a><br>

- <a href="#">Статьи</a><br>

</div>

<div>

<img src="images/stat.png" alt="Статичные страницы" title="Статичные страницы" width=48 height=48>

<h2>Статичные страницы</h2>

- <a href="#">Главная</a><br>

- <a href="#">О компании</a><br>

- <a href="#">Прайс-лист</a><br>

- <a href="#">Контакты</a><br>

</div>

</div>

<div id="right">asdsad

</div>

<div id="footer">

</div>

</center>

</body>

</html>

css:

h2 { margin-bottom:20px; font:18px Arial, Tahoma, sans; color:#3F4446; }

body {

margin-top: 7px;

margin-left: 8px;

margin-right: 8px;

margin-bottom: 7px;

height: 100%;

padding: 0px;

font: 12px Arial, Helvetica;

background: #3F4446;

}

/*---------Фон блоков-------------*/

#top, #footer, #container, #left, #right {

background: #ffffff;

}

/*---------Контейнер-------------*/

#container {

width:984px;

padding:0;

margin:0;

}

/*---------Шапка-------------*/

#top {

width:984px;

height:95px;

float:bottom;

padding:0;

margin:0;

padding-top:14px;

border-bottom:1px dotted #595959;

background: url("../images/top.png") no-repeat top left;

}

/*---------Логотип-------------*/

#top .logo {

border:0;

float:left;

padding:0;

padding-left:31px;

margin:0;

width: 140px;

height:70px;

}

/*---------Шапка - правая часть-------------*/

#top .logged {

border:0;

float:right;

padding:0;

margin:0;

padding-right:31px;

height:70px;

}

/*---------Аватарка-------------*/

#top .userpic {

float:left;

padding-top:10px;

}

/*---------Разделительная линия-------------*/

#top .parser {

float:left;

padding-top:15px;

padding-left:10px;

padding-right:10px;

}

/*---------Ссылка в шапке на юзера---------*/

#top a:link,#top a:hover,#top a:visited {

font: 30px/70px Arial, Helvetica, Sans Serif;

color: #468FCD;

float:left;

text-decoration: unlined;

}

#button {

color: #ffffff;

font: 13px/20px Arial, Hevlvetica, sans-serif;

text-align: center;

float:left;

margin-top:25px;

border: 1px solid #75828F;

height:20px;

background: #B1B8C0 url(../images/button_bg.gif) repeat-x;

}

/*-----------------------------------------*/

/*---------Левая колонка-------------*/

#left {

border:0;

font: 12px Arial, Helvetica, Sans Serif;

color: #468FCD;

float:left;

text-align:left;

padding:0;

padding-left:31px;

padding-top:31px;

padding-bottom:40px;

margin:0;

border-right: 1px dotted #595959;

width: 283px;

z-index:1;

}

#left img {

float:left;

padding-right: 8px;

}

/*---------Ссылки в меню-------------*/

#left a:link,#left a:hover,#left a:visited {

font: 12px/18px Arial, Helvetica, Sans Serif;

color: #468FCD;

text-decoration: unlined;

}

/*---------Блоки управления-------------*/

#left div {

padding-bottom:20px;

padding-top:10px;

}

/*---------Правая колонка-------------*/

#right {

border:0;

float:left;

text-align:left;

padding:0;

padding-left:50px;

padding-top:31px;

padding-bottom:40px;

margin:0;

width: 619px;

display: block;

}

/*---------подвал-------------*/

#footer {

width:984px;

height:78px;

float:left;

padding:0;

margin:0;

background: url("../images/footer.png") no-repeat bottom left;

}

что-то такое...

в ишаке - все ок...а в фф и опере вот такая лабуда...

IS
На сайте с 16.08.2006
Offline
168
Igor-san
#5

У меня и в ИЕ6 и в Опере одинаково показывает, весь <div id="container"> белый. В ВВ правое меню частично, но от этого спасет в стиле container height:100%;

Это то, что Вы имели в виду?

wilelf
На сайте с 27.06.2005
Offline
322
wilelf
#6
Igor-san:
У меня и в ИЕ6 и в Опере одинаково показывает, весь <div id="container"> белый. В ВВ правое меню частично, но от этого спасет в стиле container height:100%;
Это то, что Вы имели в виду?

не спасает. пробовал

BigConcept
На сайте с 16.05.2007
Offline
96
BigConcept
#7

wilelf, попробуйте найти с помощью файрбага (firebug - расширение для файрфокса) причину, мне часто помогало. Там пишется что от чего наследуется.

Это имелось ввиду? :

Dimid
На сайте с 03.12.2006
Offline
74
Dimid
#8

нужно сверстать заново и немного другим способом :)

D
На сайте с 11.03.2008
Offline
15
dimuch
#9

Почистить забыли после правого блока

<div id="right">asdsad</div>

<div style="clear:both"></div>(или <div class="clear"></div> c clear:both в css-файле)

</div>

<div id="footer">

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#10

wilelf

кстати вопрос оффтопом, помимо кучи лишнего кода и атрибутов, почему вы используете не class, а id ? не стоит путать их между собой.

иногда проскакивают лишние слэши как тут

<input type="submit"value="Выйти" id="button"/>

а блоку зачем то задается атрибут назначающий блок блоком, где этого не нужно

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий