| |
 88.7 Кб |
|
| | Нужно осуществить как на картинке.
Делаю следующее:
На сайте прописываю дивы
<div id="content">
<div id="page-wrapper">
<div id="slideshow">
Изображение Изображение Изображение Изображение
</div>
<div id="message">
Content Content Content Content Content Content Content Content Content Content
</div>
</div>
</div>
|
В стилях
div#content {
margin: auto;
padding-bottom: 50px;
position: relative;
width: 800px;
}
div#page-wrapper {
background-color: #ffffff;
border: 1px solid #bababa;
clear: both;
min-height: 300px;
margin-top: 15px;
padding: 15px;
width: 560px;
}
*html #page-wrapper {
height: 300px;
}
/* Слайдшоу */
div#slideshow {
border-right: 1px solid #b2b2b2;
float: left;
padding-right: 15px;
width: 260px;
}
div#message {
width: 560px;
}
*html #message{
margin-top: -320px
}
|
Получается картинка и слева колонка текста. Для блока slideshow устанавливал hight, но без результатно, также делал левый отступ блоку message как в slideshow ( равной по его ширине 260px;)
Помогите пожалуйста | |
| |
|
|
| |
|
|
| |
для: immortal727
(31.05.2011 в 13:22)
| | | Слева колонка текста? Уверены? При таком коде будет слайдшоу слева, а текст будет обтекать его справа и снизу.. А в IE текст будет под картинкой.
Вы хотите чтобы текст не заплывал под картинку чтоль? | |
| |
|
|
| |
|
|
| |
для: SHAman
(31.05.2011 в 13:30)
| | | Мне нужно так как на картинке. Чтоб текст не был под картинкой. А вот чтоб он обтекал картинку справа и снизу не получается. | |
| |
|
|
| |
|
|
| |
для: immortal727
(31.05.2011 в 13:22)
| | | Самым простым решением будет отказаться от ширины и отступов #message и перевести его из блочного во встроенный режим.
div#content {
margin: auto;
padding-bottom: 50px;
position: relative;
width: 800px;
}
div#page-wrapper {
background-color: #ffffff;
border: 1px solid #bababa;
clear: both;
min-height: 300px;
margin-top: 15px;
padding: 15px;
width: 560px;
}
*html #page-wrapper {
height: 300px;
}
/* Слайдшоу */
div#slideshow {
border-right: 1px solid #b2b2b2;
float: left;
padding-right: 15px;
width: 260px;
}
*html #message{
display: inline;
}
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(31.05.2011 в 13:37)
| | | От ширины и отступов отказался, но проблема не решилась. Так и остается колонка текста справа. Нет обтекания текста картинки | |
| |
|
|
| |
|
|
| |
для: immortal727
(31.05.2011 в 13:22)
| | |
<div id="content">
<div id="page-wrapper">
<div id="slideshow">
Изображение Изображение Изображение Изображение
</div>
<div id="message">
Content Content Content Content Content Content Content Content Content Content
</div>
<div class="clear"></div>
</div>
</div>
|
div#slideshow {
border-right: 1px solid #b2b2b2;
float: left;
margin-right: -260px;
width: 260px;
position:relative;
}
div#message {
float:left;
padding-left:275px;
}
.clear{clear:both;}
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(31.05.2011 в 14:22)
| | | А после этого текст просто стал ниже картинки и всё. А мне надо так как на изображении | |
| |
|
|
| |
1.4 Мб |
|
| |
для: immortal727
(31.05.2011 в 16:03)
| | | Прикрепляю тогда полный дизайн страницы с картинками. Может быть тогда будет понятней что мешает тексту (если его будет много) обтекать картинку | |
| |
|
|
|
| |
|
|
| |
для: SHAman
(31.05.2011 в 16:54)
| | | А текст не пробовал увеличить?! Прибавь текста | |
| |
|
|
| |
|
|
| |
для: immortal727
(31.05.2011 в 17:13)
| | | Я его кагбе 3 раза скопировал. Куда больше-то? Или какого текста? | |
| |
|
|
| |
|
|
| |
для: SHAman
(31.05.2011 в 17:17)
| | | Да, вроде все работает. Разобрался почему. Надо было сразу говорить еще, что я этот дизайн внедряю в Joomla. Когда без нее, то всё действительно нормально. Но хотя проверял и без нее, то также ничего не работало. А попробуйте внедрить ее в Joomla, то тогда не получится. Если кто сможет, напишите. А я пошел дальше думать теперь, что же там мешает этой Joomla | |
| |
|
|
