Помогите с хитрой версткой

[Удален]

19 февраля 2009, 08:55

1226

В общем что есть что на рисунке:

.frame - блоки одинаковой ширины. По высоте тянутся по контенту, по горизонтали - ширина такая же как у #viewport, стоят фактически впритык, выровняны по верхнему краю, ну можт маргин есть.

Самих таких блоков может быть неограниченно много.

#viewport - блок с overflow:hidden, ширина = 100% от родительского элемента, который тянется по окну. Его высота жабаскриптом подравнивается под высоту того .frame, который в нем в данный момент виден. Т.е. по сути цепочка из блоков .frame как бы скроллится по горизонтали внутри #viewport-а.

Сейчас это реализовано как таблица с одной строкой, каждый фрейм - это ячейка, внутри неё див, по которому собсно и выставляется высота #viewportа.

Чем это неудобно - ширина таблицы задается заранее (100% * кол-во фреймов), кроме того нельзя например из 10 фреймов в цепочку легко сделать 2 ряда по 5 (чтобы во вьюпорте одновременно два торчали).

Как-то это можно дивами сделать? Простой способ float:left не проходит, так как размер каждого дива равен (ну с учетом паддингов) размеру родительского #viewport, и они тупо переносятся друг под друга.

gif verstka.gif

675

vandamme

19 февраля 2009, 10:40

#1

возьмите div с z-index

вот примерчик

<html>
<body>
Слой 1 наверху
<div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color: orange; font-size:70px; z-index:1">Слой 2</div>

Слой 2 наверху
<div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color: orange; font-size:70px; z-index:4">Слой 2</div>
</body>
</html>

47

lazio

19 февраля 2009, 10:53

#2

а есть где взглянуть на реализацию таблицами? прост не очень понимаю из описания что нужно сделать=)

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)

[Удален]

19 февраля 2009, 11:35

#3

lazio:
а есть где взглянуть на реализацию таблицами? прост не очень понимаю из описания что нужно сделать=)


<div id='slider_outer'>

<div id="slider_inner">

	<table id="slider_table">

	<tbody><tr>



<td class="slide">

<span class='frm'> <!--Для определения высоты содержимого ячейки-->



</td>

<!--пять штук таких-->



</tr>

</tbody></table>

</div>

</div>

Стили такие:


#slider_outer {

clear:both;

margin:1px;

overflow:hidden;

position:relative;

width:100%;

}



#slider_inner {

left:0;

overflow:visible;

position:absolute;

top:0;

width:500%;

}



#slider_inner #slider_table {

width:100%;

}



#slider_inner .slide {

padding:3px 10px;

width:20%;

}

А дальше легким javascriptом у slider_inner меняется left: (с шагом по 100%) и получается типа горизонтальный постраничный скролл

vandamme:
возьмите div с z-index
вот примерчик

Сами то пробовали?

Не вижу ничего общего.

gif verstka2.gif

675

vandamme

19 февраля 2009, 15:16

#4

neolord:
Сами то пробовали?
Не вижу ничего общего.

что вы намутили

675

vandamme

19 февраля 2009, 15:20

#5

Вот что должно получиться

а спомощью этого можно организовать то что вы показывали

jpg 000000.jpg

[Удален]

19 февраля 2009, 16:23

#6

vandamme:
Вот что должно получиться
а спомощью этого можно организовать то что вы показывали

я просто открыл ваш код файрфоксом =) Но даже если так, то ваше предложение с моим вопросом ничего общего не имеет. Как наложить элементы друг на друга я прекрасно представляю, тут вопрос в другом - цепочка дивов в ряд должна быть внутри родительского дива, причем должна превосходить его по суммарной ширине

Резкий всплеск прямых заходов. Почти все страницы на Может ли gmail или

255

malls

19 февраля 2009, 16:32

#7

neolord:
я просто открыл ваш код файрфоксом =) Но даже если так, то ваше предложение с моим вопросом ничего общего не имеет. Как наложить элементы друг на друга я прекрасно представляю, тут вопрос в другом - цепочка дивов в ряд должна быть внутри родительского дива, причем должна превосходить его по суммарной ширине

Я тоже не понял сути проблемы, точнее проблемы даже не увидел. Как я понял CSS не пугает, JS тоже - чего ж может не получаться то? Как вариант - абсолютное позиционирование, где позиции задаются скриптом.

Показали бы текущую реализацию - тогда понятнее стало бы.

Резко упал CTR. И Нарушение требований к запросам Яндекс кобласит

[Удален]

19 февраля 2009, 16:36

#8

malls, я показал =) см пост #4

Насчет вашего варианта - мне такое в голову не приходило, спс, надо попробовать

neolord добавил 19.02.2009 в 19:43

Лана, вот как это выглядит и работает (на кнопочки под заголовком покликать надо)

http://uskoff.com/admin/index.php?mode=stat&act=edit&id=9

47

lazio

19 февраля 2009, 17:41

#9

посмотрел страницу в файрфоксе - баг! некрасиво уезжает, есть какая-то граница справа.

А вот это должно вам помочь (если поменять библиотечку ;) ). Плюс подобные решения можно поискать в инете на чистом js.

[Удален]

19 февраля 2009, 18:41

#10

ну хз, у меня в фоксе все нормально =)

может у вас конечно чудо разрешение в районе 1900, тогда хз, не проверял

jQuery по ряду причин использовать не хочу, меня вполне устраивает прототип. Вопрос в общем как переверстать внутряк, а не то как заставить его ездить =)

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта

Курс биткоина превысил $50 тысяч