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



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Автоматическая высота DIVа =\
IndigoGL
IndigoGL
Topic Starter сообщение 17.2.2011, 7:51; Ответить: IndigoGL
Сообщение #1


Новичок
*

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


Проблема такая, есть DIV, в нем картинка и текст, если написать текст, то див по высоте следует за ним, но если вставить изображение, то оно вылазит за край, как сделать так чтобы ДИВ был динамичным по высоте в зависимости от размера картинки?

Для наглядности я залил див синим фоном, хочу чтобы было так как на нижней =):



.news {
padding: 5px;
background: #003;
}
.news img {
padding: 0 5px 5px 0;    
}

            <div class="news">
                <img src="images/news/1.jpg" width="60" height="43" align="left" />
                   <h1><a href="#">Дэниел Рэдклифф меняет профессию</a></h1>
            </div>


ps я понимаю что можно жестко указать высоту дива, мне нужно чтобы она была динамичной

Сообщение отредактировал IndigoGL - 17.2.2011, 7:51


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nitroov
nitroov
сообщение 17.2.2011, 8:16; Ответить: nitroov
Сообщение #2


Частый гость
**

Группа: User
Сообщений: 56
Регистрация: 19.10.2010
Поблагодарили: 6 раз
Репутация:   1  


http://htmlbook.ru/css/max-height может быть вот это свойство попробовать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ska-TGD
Ska-TGD
сообщение 17.2.2011, 8:25; Ответить: Ska-TGD
Сообщение #3


artemeff.com
******

Группа: Active User
Сообщений: 1139
Регистрация: 18.3.2009
Поблагодарили: 249 раз
Репутация:   15  


(IndigoGL @ 17.2.2011, 6:51) *
<img src="images/news/1.jpg" width="60" height="43" align="left" />

Добавить в css такую строку:
.clear { clear: both; }

И после текста добавить:
<div class="clear"></div>


Сообщение отредактировал Ska-TGD - 17.2.2011, 8:25


--------------------
Ruby on Rails dev | artemeff | @artemeff


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kostap13
Kostap13
сообщение 17.2.2011, 10:18; Ответить: Kostap13
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 358
Регистрация: 5.7.2010
Поблагодарили: 81 раз
Репутация:   17  


max-height не работает в IE6, и в данном случае ни при чем.

(Ska-TGD @ 17.2.2011, 7:25) *
Добавить в css такую строку:
.clear { clear: both; }

И после текста добавить:
<div class="clear"></div>


Это должно помочь, только для сброса лучше использовать:
.clear {
clear:both;
font-size:0;
overflow:hidden; /*для старых IE */
}

Ну и ещё после картинки можно поставить:
<br clear="right" />


А я бы вообще сделал так:
.news img, #headText {
float: left;    
}

.clear {
clear:both;
font-size:0;
overflow:hidden; /*для старых IE */
}

.....

            <div class="news">
                <img src="images/news/1.jpg" width="60" height="43" />
                <div id="headText">  
                      <h1><a href="#">Дэниел Рэдклифф меняет профессию</a></h1>
                </div>
                <div class="clear"></div>
            </div>


Сообщение отредактировал Kostap13 - 17.2.2011, 10:23
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ska-TGD
Ska-TGD
сообщение 17.2.2011, 12:06; Ответить: Ska-TGD
Сообщение #5


artemeff.com
******

Группа: Active User
Сообщений: 1139
Регистрация: 18.3.2009
Поблагодарили: 249 раз
Репутация:   15  


(Kostap13 @ 17.2.2011, 9:18) *
А я бы вообще сделал так:
.news img, #headText {
float: left;    
}

.clear {
clear:both;
font-size:0;
overflow:hidden; /*для старых IE */
}

.....

            <div class="news">
                <img src="images/news/1.jpg" width="60" height="43" />
                <div id="headText">  
                      <h1><a href="#">Дэниел Рэдклифф меняет профессию</a></h1>
                </div>
                <div class="clear"></div>
            </div>


А использовать ID для элементов, которых на сайте будет более, чем один, не рекомендуется. В данном случае лучше использовать классы.


--------------------
Ruby on Rails dev | artemeff | @artemeff
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kRicha
kRicha
сообщение 17.2.2011, 12:14; Ответить: kRicha
Сообщение #6


Завсегдатай
*****

Группа: Active User
Сообщений: 931
Регистрация: 29.6.2010
Из: Киева
Поблагодарили: 217 раз
Репутация:   39  


(Ska-TGD @ 17.2.2011, 10:06) *
А использовать ID для элементов, которых на сайте будет более, чем один, не рекомендуется. В данном случае лучше использовать классы.

это почему же?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ska-TGD
Ska-TGD
сообщение 17.2.2011, 12:36; Ответить: Ska-TGD
Сообщение #7


artemeff.com
******

Группа: Active User
Сообщений: 1139
Регистрация: 18.3.2009
Поблагодарили: 249 раз
Репутация:   15  


kRicha, а Вы в конце адреса сайта введете #headText, и на какой из элементов будет фокусироваться браузер? Рано Вам в верстку, если не знаете таких простых вещей. И еще рекомендую почитать этот пост.


--------------------
Ruby on Rails dev | artemeff | @artemeff
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kRicha
kRicha
сообщение 17.2.2011, 12:55; Ответить: kRicha
Сообщение #8


Завсегдатай
*****

Группа: Active User
Сообщений: 931
Регистрация: 29.6.2010
Из: Киева
Поблагодарили: 217 раз
Репутация:   39  


(Ska-TGD @ 17.2.2011, 10:36) *
kRicha, а Вы в конце адреса сайта введете #headText, и на какой из элементов будет фокусироваться браузер? Рано Вам в верстку, если не знаете таких простых вещей. И еще рекомендую почитать этот пост.

а если меня интересует использование id, только для удобства задания стилей css? Вы об этом не задумывались?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ska-TGD
Ska-TGD
сообщение 17.2.2011, 14:02; Ответить: Ska-TGD
Сообщение #9


artemeff.com
******

Группа: Active User
Сообщений: 1139
Регистрация: 18.3.2009
Поблагодарили: 249 раз
Репутация:   15  


kRicha, Т.е. Вы сначала верстаете все в ID, и только потом переводите их в Class? Или вы подсовываете свои решения неправильными намеренно?
В любом случае, ТС опубликовал свой стиль CSS, в котором четко написано .news, слово употреблено во множественном числе, следовательно блок будет использоваться не один раз. И не пытайтесь оправдываться, лучше признайте ошибку, это Вам на будущее.

Далее, этот бессмысленный разговор, я продолжать не намерен.


--------------------
Ruby on Rails dev | artemeff | @artemeff
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
IndigoGL
IndigoGL
Topic Starter сообщение 17.2.2011, 17:17; Ответить: IndigoGL
Сообщение #10


Новичок
*

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


(Ska-TGD @ 17.2.2011, 7:25) *
Добавить в css такую строку:
.clear { clear: both; }

И после текста добавить:
<div class="clear"></div>


Спасибо за разъяснения, заодно решил еще одну схожую проблему, это помогло.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыRush Analytics - автоматическая кластеризация (группировка) семантического ядра
+ автоматизированный сбор ключевых слов
53 RushAgency 22505 5.11.2016, 19:56
автор: Алексей87


 



RSS Текстовая версия Сейчас: 6.12.2016, 18:04
Дизайн