PDA

Показать полную графическую версию : [решено] Див не определяет свой размер


Artem-Samsung
15-06-2008, 16:01
Проблемма, которая у меня неоднократно наблюдалась, и я таки забивал на див в таком случае, и обращался к таблицам, но хочу разобраться раз и навсегда в чем проблемма.

http://deykun.com

Там есть блок новостей.
Вот такой вот код:


* * * * *<div class="news">
* * * * * *<div class="newsimg"><img src="xvxvc" alt="xcvxvxv" width="100" height="57" /><br />
* * * * * * * * *05.05.1988<br />
* * * * * * * * *Категорія:
* * * * * * * * *Статті
* * * * * * *</div>
* * * * * *<div class="newscont">
* * * * * * *<a href=""><h1>Гаррі Поттер. Журнал &quot;Магічна Правда&quot;. Гогсмід</h1>
* * * * * * *<p>Гогсмід-Диканька - один із найперших розділів нашого Рольового Форуму. А заснований від був у свій час дуже дивним способом. Влітку 2005-го року, коли форум тільки встановили і головному адміністратору Артеміусу потрібно було виїхати з міста на відпочинок,*головним заступником адміністратора було призначено дуже ініціативну на той час особу — Гієну-Пятністую.<br />
* * * * * * *Не минуло і місяця, як Артеміус приїхав додому і, зайшовши на форум, побачив найактивніший в обговорюванні розділ – «Секс у Гогсміді» ...
* * * * * * *</p>
* * * * * * *</a>
* * * * * *</div>
* * * * * *&nbsp;
* * * * *</div>


Сам главный див, который все это обьеденяет: class="news"
Не может нормально задаться размером, и это видно, когда делаем бордер.
А если не поставить в конце &nbsp;, то и вооще все в одну строчку.

Вот стили:


.news .newsimg {
width:100px;
float:left;
font-size:10px;
}
.news .newscont {
width:640px;
float:right;
font-size:12px;
}

.news p {
margin:3px;
padding:0;
}
.news h1 {
font-size:16px;
margin:0;
padding:0;
}
.newscont a:hover {
text-decoration:none;
color:#000000;
background: #FFFF99;
display:block;
border: #000000 1px solid;
}
.newscont a {
text-decoration:none;
color:#000000;
display:block;
padding:1px;
}
.news {
border: #000000 1px solid;
}


Если у кого то будет свободное время, то прошу обратить внимание.
Спасибо

bruder
15-06-2008, 16:40
это довольно известный эффект схлопывания родительского элемента если внутри есть флоатнутые. Решить можно несколькими способами. Первый спозиционировать родительский если можно ,

.news {
border: #000000 1px solid;
position: absolute;
}

или

.news {
border: #000000 1px solid;
float: left;
}

или добавить еще один див внизу который делает clear на все
<style>

.clear{
clear: both;
}
</style>

<div class="news">
<div class="newsimg"><img src="xvxvc" alt="xcvxvxv" width="100" height="57" /><br />

</div>
<div class="newscont">

</div>
<div class="clear"></div>
</div>

Busla
15-06-2008, 20:51
Artem-Samsung, садись - два!

плавающие элементы исключаются из обычного контекста отоображения, поэтому <div class="news"> получается пустым (100% ширина; нулевая высота).

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

<div class="newsimg"> и вложенная картинка одной ширины - так оставлять нельзя. Надо картинку сделать блочной (тогда и br не понадобится); сбросить отступы и бордюр.

Читайте доки - они рулез!

Artem-Samsung
16-06-2008, 01:55
bruder, большое спасибо за четкое разьяснение, мне помог float, первый метод не подошел... да и послдний я запомню
Busla, Я пытаюсь придерживать This Page Is Valid HTML 4.01 Strict!, хотя бы на троечку не катит?))
Да, недостатков хватает, и благодарен вам за указание на них, а вот по поводу документаций, не могли бы поконкретней, какие бы на ваш взгяд заслуживали бы большего внимания.

Спасибо

Busla
16-06-2008, 16:39
На счёт документаций я может слегка перегнул - официальные стандарты пишут скорее для разработчиков броузеров, чем для web-дизайнеров.

Много полезных идей и "разбора полётов" есть в книгах: (ссылки на Озон)
Джеффри Зельдман "Web-дизайн по стандартам" (http://www.ozon.ru/context/detail/id/2369681/)
Дэйв Ши, Молли Е. Хольцшлаг "Философия CSS-дизайна" (http://www.ozon.ru/context/detail/id/2433755/)




© OSzone.net 2001-2012