Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Див не определяет свой размер

Ответить
Настройки темы
[решено] Див не определяет свой размер

Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать


Проблемма, которая у меня неоднократно наблюдалась, и я таки забивал на див в таком случае, и обращался к таблицам, но хочу разобраться раз и навсегда в чем проблемма.

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>Гаррі Поттер. Журнал "Магічна Правда". Гогсмід</h1>
 * * * * * * *<p>Гогсмід-Диканька - один із найперших розділів нашого Рольового Форуму. А заснований від був у свій час дуже дивним способом. Влітку 2005-го року, коли форум тільки встановили і головному адміністратору Артеміусу потрібно було виїхати з міста на відпочинок,*головним заступником адміністратора було призначено дуже ініціативну на той час особу — Гієну-Пятністую.<br />
 * * * * * * *Не минуло і місяця, як Артеміус приїхав додому і, зайшовши на форум, побачив найактивніший в обговорюванні розділ – «Секс у Гогсміді» ... 
 * * * * * * *</p>
 * * * * * * *</a>
 * * * * * *</div>
 * * * * * * 
 * * * * *</div>
Сам главный див, который все это обьеденяет: class="news"
Не может нормально задаться размером, и это видно, когда делаем бордер.
А если не поставить в конце  , то и вооще все в одну строчку.

Вот стили:

Код: Выделить весь код
.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;
}
Если у кого то будет свободное время, то прошу обратить внимание.
Спасибо

-------
Мой блог Web Development


Отправлено: 16:01, 15-06-2008

 

Старожил


Сообщения: 313
Благодарности: 46

Профиль | Отправить PM | Цитировать


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

Код: Выделить весь код
.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>
Это сообщение посчитали полезным следующие участники:

Отправлено: 16:40, 15-06-2008 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Ветеран


Сообщения: 3806
Благодарности: 824

Профиль | Отправить PM | Цитировать


Artem-Samsung, садись - два!

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

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

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

Читайте доки - они рулез!
Это сообщение посчитали полезным следующие участники:

Отправлено: 20:51, 15-06-2008 | #3


Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать


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

Спасибо

-------
Мой блог Web Development


Отправлено: 01:55, 16-06-2008 | #4


Ветеран


Сообщения: 3806
Благодарности: 824

Профиль | Отправить PM | Цитировать


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

Много полезных идей и "разбора полётов" есть в книгах: (ссылки на Озон)
Джеффри Зельдман "Web-дизайн по стандартам"
Дэйв Ши, Молли Е. Хольцшлаг "Философия CSS-дизайна"
Это сообщение посчитали полезным следующие участники:

Отправлено: 16:39, 16-06-2008 | #5



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Див не определяет свой размер

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
[решено] Комп не определяет аудиоустройства. primusit Непонятные проблемы с Железом 6 29-11-2008 19:06
Установка - [решено] не правильно определяет видео карту alexLyova Microsoft Windows Vista 4 27-10-2008 18:08
[решено] Система не определяет сетевуху yotser Поиск драйверов, прошивок и руководств 9 07-08-2008 09:59
[решено] Сделать див ссылкой. Artem-Samsung Вебмастеру 12 26-04-2008 17:44
[решено] Не определяет USB-flash Green Owl Microsoft Windows 2000/XP 3 01-02-2007 09:45




 
Переход