DIVы в нутри DIVов - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

DIVы в нутри DIVов

Опции

nikit0ss

Topic Starter сообщение

6.2.2010, 16:53; Ответить: nikit0ss

Сообщение #1

Группа: User
Сообщений: 2
Регистрация: 6.2.2010
Поблагодарили: 0 раз
Репутация:

День добрый всем.
Пару тем про дивы я на форуме просмотрел. почти то но не помогло.
Есть одна трабла, бьюсь уже второй день, но пока не работает. Есть HTML код:
Естественно что стиль прикручен. =)

НАШЕЛ РЕШЕНИЕ ПРОБЛЕМЫ - всем кому интересно в конце темы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<body bgcolor="#0F4449">
<div class="glavniy">
<div class="logo">
<object data="./media/main.swf" type="application/x-shockwave-flash" width="900">
<param name="movie" value ="./media/main.swf" />
</object>
</div>
<div ID="1stroka" style="background-color:#aaf0f6;">

<div ID="content">
<div class="2box-clock">
<img height="119" src="../images/img1.png" width="119" alt="Short description of the image" />
</div>
<div class="2box-Text-bloc">
<span lang="ru">ПЕРВАЯ СТРОКА</span>
</div>
</div>

<div ID="content2">
<div class="2box-calendar">
<table style="width: 100%" cellpadding="0" cellspacing="0">
<tr>
<td class="style4" style="height: 21px; width: 122px;">
</td>
<td class="style5" style="height: 21px; width: 211px;">
<img height="21" src="images/root_t.png" width="350" class="style7" alt="Short description of the image"/>
</td>
<td class="style4" style="height: 21px" width="25"> 
</td>
</tr>
<tr>
<td style="width: 122px"> 
</td>
<td class="style6" height="100%" style="width: 211px"> 
</td>
<td class="style4" style="height: 21px" width="25"> 
</td>
</tr>
<tr>
<td style="width: 122px"> 
</td>
<td style="width: 211px">
<img height="21" src="images/root_b.png" width="350" alt="Short description of the image" />
</td>
<td class="style4" style="height: 21px" width="25"> 
</td>
</tr>
</table>
</div>

<div id="FlashMenuLabs" class="2box-right_menu">
You need to upgrade your Flash Player or to allow javascript to enable Website menu.<br />
<a href="http://www.adobe.com/go/getflashplayer">Get Flash Player</a>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("menu.swf", "menu", "380", "350", "8", "#666");
so.addVariable("page_code", "a_b_c");

so.addParam("wmode", "transparent");
so.addParam("scale", "noscale");
so.addParam("salign", "TL");
so.write("FlashMenuLabs");
// ]]>
</script>
</div>
</div>

<div ID="2stroka" style="background-color:#94dae0">
ВТОРАЯ СТРОКА
<div class="content3">
<div class="2box-clock">
<span lang="ru">Первый блок второй строки</span></div>
<div class="2box-Text-bloc">
<span lang="ru">второй блок второй строли</span>
</div>
</div>

<div class="content4">
<div class="2box-calendar">
<span lang="ru">Первый блок второй строки право</span></div>
<div class="2box-right_meu">
<span lang="ru">Второй блок второй строки право</span></div>
</div>
</div>
<div class="3stroka">
<span lang="ru">ТРЕТЬЯ СТРОКА</span>
</div>
</div>
</body>

Он делает один главный див. В нутри его находится 3 ДИВ СТРОКИ
В нутри Первой ДИВ строки, есть ДВА РЯДОМ СТОЯЩИХ ДИВА.
В нутри каждого из рядом стоящих дивов, есть еще по ДВЕ СТРОКИ ДИВОВ.

Все, классно, все стоит правильно, почти. НО ДИВ СТРОКИ (от является родительским, НЕ растягивается автоматически в соответствии с максимальным содержимым, (этим максимальным содержимым, является ДИВ КОЛОНКА.

ВОТ CSS КОД:

/* Первая строка */
#1stroka {
voice-family:inherit;
background: #aaf0f6;
overflow:hidden;
/* visibility:visible; */

}
/* ВТОРАЯ СТРОКА */
#2stroka {
voice-family:inherit;
background:#94dae0;
}

/* Левая блок ПЕРВОЙ строки*/
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #aaf0f6;
width: 50%; /* ie5win fudge begins */
width: 46%;
}
html>body #content {
width: 46%; /* ie5win fudge ends */
}

/* Правый блок ПЕРВОЙ строки */
#content2 {
float: left; /* Opera5.02 will show a space at right when there is no scroll bar */
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #aaf0f6;
width: 50%; /* ie5win fudge begins */
width: 46%;
}
html>body #content2 {
width: 46%; /* ie5win fudge ends */
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}

Вроде в начале, я указал. что 1STROKA - это родительский ДИВ.
Что не так, подскажите плиз. уже всю голову сломал :( массу вариантов перепробывал... вот что получается: см. картинку.

РЕШЕНИИЕ:
перед закрытием ДИВА 1STROKA Вставить:
<div style="clear: both;"></div>
</div> - который закрывает 1STROKA.

Ответить с цитированием данного сообщения

sikwel_hb sikwel_hb 9.2.2010, 13:48; Сообщений: 254 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	9.2.2010, 13:48; Ответить: sikwel_hb Сообщение #2
0 Группа: User Сообщений: 254 Регистрация: 14.4.2009 Поблагодарили: 0 раз Репутация: 0	да, есть такая "проблема" у тех кто начинает изучать верстку, все дело в основном потоке, который нарушается использованием флоатов. на хабре есть статейка по теме http://habrahabr.ru/blogs/css/48383/ , да и вообще в интернете много чего по этому поводу сказано. лично я использую пустой блок с clear:both;

nikit0ss Topic Starter nikit0ssTopic Starter 9.2.2010, 14:12; Сообщений: 2 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 9.2.2010, 14:12; Ответить: nikit0ss Сообщение #3
0 Группа: User Сообщений: 2 Регистрация: 6.2.2010 Поблагодарили: 0 раз Репутация: 0	(sikwel_hb @ 9.2.2010, 15:48) лично я использую пустой блок с clear:both; Спасибо за ссылочку, мне не помогло :(

sikwel_hb

9.2.2010, 14:51; Ответить: sikwel_hb

Сообщение #4

Группа: User
Сообщений: 254
Регистрация: 14.4.2009
Поблагодарили: 0 раз
Репутация:

(nikit0ss @ 9.2.2010, 16:12)

Спасибо за ссылочку, мне не помогло :(

в смысле "не помогло"? вы же решили свою проблему одним из способов (; это я так, для общего развития отписался, не всегда и не все способы хороши, каждый для своего случая:goodpost:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.4.2024, 9:40

Дизайн