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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Динамические блоки
wertymne
wertymne
Topic Starter сообщение 20.7.2011, 22:36; Ответить: wertymne
Сообщение #1


Здравствуйте! Дело в том, что я столкнулся с одним вопросом, но столь длинную формулировку гугл не воспринял, похоже, задача не стандартна. Суть вопроса. Существуют три блока, внутри которых находится текст. Первый и третий блоки имеют фиксированную высоту, т.е. не растягивается, второй же эластичен. В первом блоке находится определенный текст. Когда текст уже не вмещается в первом блоке(т.к. блок не эластичен), он должен перейти в третий блок, если же текст не поместился в обеих блоках, он должен занять также и второй блок, который может растягиваться. Конечно, тяжело объяснить. Попробую показать:

[IMG]http://rghost.ru/15232751/image.png[/IMG]

* блоки 1 и 3 обозначены синим и зеленым цветами соответственно, блок 2 - розовым.

Вопрос: как реализовать данную конструкцию, использую html и css стили? Заранее, спасибо всем отвечающим!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
texno
texno
сообщение 21.7.2011, 6:06; Ответить: texno
Сообщение #2


На голом html и css вроде ни как, надо скриптом считать.
Только не понятно, а зачем такой выкрутас. Не вижу смысла.
Особо смущает, из первого в третий, а только потом во второй, а он то в середине. И как это читать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wertymne
wertymne
Topic Starter сообщение 21.7.2011, 13:52; Ответить: wertymne
Сообщение #3


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

Update: В крайнем случае, возможно ли сделать два слоя: первый слой будет состоять из синего(статического) и розового(растяжимого) блоков, второй будет состоять из зеленого блока, при расширении которого, блоки на первом слое(синий и розовый) будут заполнять его, как фон - синий не будет изменять параметров, розовый будет растягиваться, текст же будет содержаться в зеленом блоке.

[IMG]http://plasmon.rghost.ru/15289341.thumb[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nitrex
Nitrex
сообщение 21.7.2011, 17:10; Ответить: Nitrex
Сообщение #4


мда... Если как ты хочешь, то только со скриптом, а так можно просто все 3 блока объединить(в 1-м диве) и писать по центру
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 21.7.2011, 17:37; Ответить: Azazaza_hb
Сообщение #5


а что будет в первом и последнем блоках??
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wertymne
wertymne
Topic Starter сообщение 21.7.2011, 18:15; Ответить: wertymne
Сообщение #6


Хм. Как бы объяснить... Представьте рамку картины. В основном, её верхняя и нижняя часть облицованы какими-то дополнениями: узорами, вырезами и т.п. Пример ниже:

[img]http://rghost.ru/15318541/image.png[/img]

В заштрихованной фиолетовой части должен быть некий текст, его размер неизвестен, поэтому рамка должна менять размеры под данный текст. Увеличиваться/уменьшаться будет розовая часть.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mamchyts
mamchyts
сообщение 21.7.2011, 22:01; Ответить: mamchyts
Сообщение #7


[PHP]
<div style="width: 400px">
<div style="height:5px; width: 100%; background: url('картинка верха') no-repeat"></div>
<div style="width: 100%; background: url('картинка верха') repeat-y">
А здесь произвольный текст
</div>
<div style="height:5px; width: 100%; background: url('картинка низа') no-repeat"></div>
</div>
[/PHP]

как то так.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 22.7.2011, 0:27; Ответить: Azazaza_hb
Сообщение #8


вот, сделал так, для примера с рамочкой подойдет:sarcastic:[attachment=38046:index.rar] там немного лишнего, забыл убрать

все в одном блоке, и легко для понимания, вот без лишнего, все что надо:
#apDiv1 {
width:400px;
min-height:222px;
background:
url(foot.png) bottom no-repeat,
url(head.png) top no-repeat,
url(center.png) repeat-y;
}
<div id="apDiv1">
<p>текст</p>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wertymne
wertymne
Topic Starter сообщение 22.7.2011, 0:50; Ответить: wertymne
Сообщение #9


mamchyts, это немного не то, что я хотел, но все равно, спасибо!
Azazaza, огромнейшее вам спасибо, вы мне очень помогли, второй день застрял на данном вопросе!

На последок, Azazaza, еще один вопрос, кроссбраузерен ли этот вариант?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 22.7.2011, 1:56; Ответить: Azazaza_hb
Сообщение #10


вот если что:
свойство min-height для Internet Explorer (IE)

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам места под сквозные блоки на СМИ сайте
текст или графика
0 seo_vladimir 763 2.9.2020, 12:14
автор: seo_vladimir
Открытая тема (нет новых ответов) Не могу выровнять блоки по правую сторону
1 Dark_Delphin 5904 18.11.2016, 0:14
автор: -Петр Чирнов-
Открытая тема (нет новых ответов) При уменьшении масштаба разъезжаются блоки
0 Alex.Bulgakov 3482 9.11.2016, 15:28
автор: -Alex.Bulgakov-
Открытая тема (нет новых ответов) Как поднять блоки вверх
2 Denis_sf 12869 21.11.2013, 22:32
автор: -hennessy-
Открытая тема (нет новых ответов) Сайт расползается на блоки при смене размера шрифта
3 datenrettung 5613 26.2.2013, 22:16
автор: -Arks-


 



RSS Текстовая версия Сейчас: 29.3.2024, 16:32
Дизайн