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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Наращивание картинки блоками
zidan
zidan
Topic Starter сообщение 2.6.2011, 0:05; Ответить: zidan
Сообщение #1


Решил сделать в шапке картинку, которая удлиняется при увеличении разрешения. Проблема в том, что середину картинки нельзя просто растянуть — её нужно наращивать блоками. Пример:

[attachment=37919:sofa.jpg]

Что-то похожее мне удалось реализовать с помощью таблицы, div'ов с inline-block в растягиваемой части и overflow: hidden (результат третий на картинке):
<div class="over">
<table class="pic">
<tr>
<td>
<div class="sofa sofaL"></div>
</td>
<td>
<div class="sofa sofaC"><div class="sofa sofaC"><div class="sofa sofaC"><div class="sofa sofaC">
</td>
<td>
<div class="sofa sofaR"></div>
</td>
</tr>
</table>
</div>

[CSS].over
{
height: 192px;
overflow: hidden;
}

table.pic
{
border: 0px;
padding: 0px;
border-collapse: collapse;
}

table.pic td
{
vertical-align: top;
padding: 0px;
}

.sofa
{
display: inline-block;
height: 192px;
}

.sofaL
{
background: url(img/sofa_l.png);
width: 100px;
}

.sofaR
{
background: url(img/sofa_r.png);
width: 100px;
}

.sofaC
{
background: url(img/sofa_c.png);
width: 70px;
}[/CSS]
При такой реализации лишние центральные блоки переносятся на следующую строку, которая скрывается под overflow. Однако при переносе строки ячейка начинает занимать всё свободное место, из-за чего в большинстве разрешений появляется пустое место перед правой частью картинки. Никак не могу от него избавится. Подскажите, пожалуйста — как это сделать (или другой способ сверстать такую картинку)?

P.S. Конечно, я без труда могу сделать такую картинку при помощи JS, но меня интересует HTML/CSS реализация.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
adlic
adlic
сообщение 2.6.2011, 0:56; Ответить: adlic
Сообщение #2


<div>
<div class="left">a</div>
<div class="right" >a</div>
<div class="center">a</div>
</div>

[CSS].left{width:100px; float:left; background:#511111;}
.right{width:100px; float:right; background:#633333;}
.center{background:#422892; margin:0px; margin-left:100px; margin-right:100px; }[/CSS]
Правый и левый блок фиксированной ширины, остальная часть тянется в зависимости от разрешения. Основному блоку просто задайте отступы справа и слева нужные, а в остальные части повставляйте картинки на фон.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zidan
zidan
Topic Starter сообщение 2.6.2011, 1:23; Ответить: zidan
Сообщение #3


Мне нужно другое. В таком варианте средняя часть не будет стыковаться с правой. Т. е. между левой и правой частью должно быть целое количество средних картинок, а сама правая часть не должна прилипать к правому краю страницы.

Мне казалось, что картинка всё объясняет, но попробую объяснить на словах. Например, в разрешении 1024x768 должно быть 2 средних картинки, в 1100x768 — опять же 2 (а не 2.68), в 1150x768 — уже 3, и т. д. Т. е. вся составная картинка не должна растягиваться на 100%, а должна вмещать максимально возможное целое количество средних частей.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
adlic
adlic
сообщение 2.6.2011, 1:37; Ответить: adlic
Сообщение #4


Скиньте исходник, проще будет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zidan
zidan
Topic Starter сообщение 2.6.2011, 2:09; Ответить: zidan
Сообщение #5


В первом посте почти весь исходник и был, но хорошо, кидаю (там названия другие):
[attachment=37920:111.zip]

Нужно, чтобы работало также, как сейчас, но без промежутка перед правой частью картинки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 3.6.2011, 12:42; Ответить: ValianT
Сообщение #6


Считать ширину over и при кратных(ширине вставляемого блока картинки) вставлять эту самую картинку с куском дивана. При большем/меньшем значении ничего не делать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zidan
zidan
Topic Starter сообщение 3.6.2011, 13:08; Ответить: zidan
Сообщение #7


Считать ширину over и при кратных(ширине вставляемого блока картинки) вставлять эту самую картинку с куском дивана. При большем/меньшем значении ничего не делать.

P.S. Конечно, я без труда могу сделать такую картинку при помощи JS, но меня интересует HTML/CSS реализация.
Я это уже реализовал на JS (причём несколькими способами). Однако реализация на HTML/CSS приоритетнее.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 3.6.2011, 13:12; Ответить: ValianT
Сообщение #8


(zidan @ 3.6.2011, 16:08) *
Я это уже реализовал на JS (причём несколькими способами). Однако реализация на HTML/CSS приоритетнее.


чтобы поддерживалось большинством браузеров никак.
Если совсем совсем важно,делать полупрозрачной картинку справа,но получить красивого ровного стыка не выйдет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zidan
zidan
Topic Starter сообщение 3.6.2011, 13:22; Ответить: zidan
Сообщение #9


Я тоже думал, что никак, но с таблицей почти получилось. :rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 3.6.2011, 13:29; Ответить: ValianT
Сообщение #10


(zidan @ 3.6.2011, 16:22) *
Я тоже думал, что никак, но с таблицей почти получилось. :rolleyes:


Это "почти" будет постоянно :) Уж поверь. Как по твоему должны стыковаться картинки с разной высотой графики?
Если нужен красивый стык-то js. Если религия не позволяет js, то полупрозрачный край картинки.
Интересно будем мне посмотреть на иную реализацию этой задумки на чистом css+html :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Комплексное наращивание ссылочной массы
Уникальное статейное продвижение
12 SANR 6599 Вчера, 1:29
автор: Taylor
Горячая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок
Большой опыт работы, отзывы
284 tario777 169925 13.5.2022, 12:09
автор: tario777
Открытая тема (нет новых ответов) Премиум картинки с freepic - Бесплатно
только до 1 мая
0 GigArt 405 12.4.2022, 19:41
автор: GigArt
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
54 metvekot 4890 5.3.2022, 8:34
автор: GlazAlmaz
Открытая тема (нет новых ответов) Продам генератор постов для соц. сетей, работающий на контенте со сторонних сайтов, со встроенными своими рекламными блоками под выведение нужной рекламы
0 Tutich 850 19.8.2021, 9:47
автор: Tutich


 



RSS Текстовая версия Сейчас: 21.5.2022, 13:52
Дизайн