Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2011, 11:31
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Верстка в две колонки
Подскажите, может возможно реализовать такую верстку.
Имеется 2 набора элементов (например блоков DIV): левая колонка - набор элементов a, правая колонка - набор элементов b.
Получается нужно сделать так, чтобы элементы a были всегда слева. А элементы b всегда справа. Причем: например, если нет элементов a то элементы b всё равно находятся справа (см. картинку 3).
Но это еще не всё:
необходимо чтобы любой элемент можно было увеличить по ширине на всю строку, а элемент находящийся с ним на одной линии перешел на следующую строку (см. картинку 1 и 2).
Задачу с картинки 1 и 2 я частично решил используя float:left и float:right. Но возникает проблема, что элементы перескакивают не в свою колонку (как описал к картинке 3). Иными словами хотел бы узнать(какая нить хитрость на CSS), можно ли как-то элементам b указать что они не могут стоять в левой колонке, а элементы a в правой?

Если никакой хитрости верстки не придумать, то тут видимо только верстка таблицей, с перемещением содержимого ячеек на JS.
Спасибо.
Изображения:
Тип файла: jpg ab.jpg (15.7 Кб, 12 просмотров)
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2011, 13:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Покажите код, из объяснений хрен поймёшь в чём проблема.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2011, 14:04
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Да код любой, например:
JS с использованием mootools:
<script language="javascript">
function open_child(iId) {
	var miniSize = $("mini_"+iId);
	var fullSize = $("full_"+iId);
	if(miniSize.hasClass("open")) {
		miniSize.removeClass("open");
		miniSize.addClass("close");
		fullSize.removeClass("close");
		fullSize.addClass("open");
	}
}

function close_child(iId) {
	var miniSize = $("mini_"+iId);
	var fullSize = $("full_"+iId);
	if(miniSize.hasClass("close")) {
		miniSize.removeClass("close");
		miniSize.addClass("open");
		fullSize.removeClass("open");
		fullSize.addClass("close");
	}
}
</script>


HTML код:
<div class="m1">

<div id="full_1" class="left close fullSize" onclick="close_child(1)">1111111111111111</div>
<div id="full_5" class="right close fullSize" onclick="close_child(5)">1111111111111111</div>
<div id="mini_1" class="left open miniSize" onclick="open_child(1)">1</div>
<div id="mini_5" class="right open miniSize" onclick="open_child(5)">1</div>

<div id="full_2" class="left close fullSize" onclick="close_child(2)">22222222222222222222</div>
<div id="full_6" class="right close fullSize" onclick="close_child(6)">2222222222222222222222</div>
<div id="mini_2" class="left open miniSize" onclick="open_child(2)">2</div>
<div id="mini_6" class="right open miniSize" onclick="open_child(6)">2</div>

<div id="full_3" class="left close fullSize" onclick="close_child(3)">333333333333333333333</div>
<div id="full_7" class="right close fullSize" onclick="close_child(7)">33333333333333333333333</div>
<div id="mini_3" class="left open miniSize" onclick="open_child(3)">3</div>
<div id="mini_7" class="right open miniSize" onclick="open_child(7)">3</div>

<div id="full_4" class="left close fullSize" onclick="close_child(4)">44444444444444444444444</div>
<div id="full_8" class="right close fullSize" onclick="close_child(8)">4444444444444444444444444</div>
<div id="mini_4" class="left open miniSize" onclick="open_child(4)">4</div>
<div id="mini_8" class="right open miniSize" onclick="open_child(8)">4</div>

<div class="clear"></div>
</div>


CSS код:
.m1 { margin:0 auto; }
.miniSize { width:392px; }
.fullSize { width:784px; }
.left { float:left; background:#66FFFF; border:#999999 1px solid; }
.right { float:right; background:#FF99FF; border:#999999 1px solid; }
.open { display:block; }
.close { display:none; }


Проблема:
нужно заставить элементы и с классом left (и miniSize) отображаться только слева, а с классом right (и miniSize) только справа. С классом fullSize выводится на всю ширину ( width:784px; ).
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн

Последний раз редактировалось greatilya, 04.08.2011 в 14:07.
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2011, 14:19
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

/*.close { display:none; }*/
.m1 {width: 788px}

и вроде всё в потоке, или я не понял цель игры...
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2011, 14:49
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Сообщение от Serg_pnz
и вроде всё в потоке, или я не понял цель игры
Попробую пояснить на живом примере:
В блоках с id="mini_1...8" расположены краткие тексты комментариев. Также эти комментарии поделены на 2 столбика, левый и правый (классы left и right соответственно). Эти комментарии изначально видны.

В блоках с id="full_1...8" расположены подробные тексты комментариев этих же комментариев (mini_1 соответствует комментарию full_1). Эти блоки отображаются на всю строку, но изначально они скрыты (класс close).

При клике на краткий текст комментария должен открыться блок с полным текстом комментария, причем блок с кратким текстом должен скрыться(чтобы лучше представить положение блоков после клика я нарисовал картинку см. выше).

Проблемы которые не смог решить:
если например в правой колонке нет комментариев, то она наполнится из элементов левой колонки (это нужно исключить).
Также при клике по правому комментарию, комментарий слева отображается в правой колонке.

Если честно то думаю это можно решить только кучей JS и скорее всего с табличной версткой.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #6 (permalink)  
Старый 04.08.2011, 15:54
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Сообщение от greatilya Посмотреть сообщение
Попробую пояснить на живом примере:
если например в правой колонке нет комментариев, то она наполнится из элементов левой колонки (это нужно исключить)
может не надо кучи js? а напишем, что если $(".right").length == 0, то левым margin-right = 392?
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2011, 16:27
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Сообщение от greatilya Посмотреть сообщение
Также при клике по правому комментарию, комментарий слева отображается в правой колонке.
как вариант так заверстать (сменить порядок следования)
<div id="mini_1" class="left open miniSize" onclick="open_child(1)">1</div>
<div id="mini_5" class="right open miniSize" onclick="open_child(5)">1</div>
<div id="full_1" class="left close fullSize" onclick="close_child(1)">1111111111111111</div>
<div id="full_5" class="right close fullSize" onclick="close_child(5)">1111111111111111</div>
Ответить с цитированием
  #8 (permalink)  
Старый 04.08.2011, 16:30
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Serg_pnz,
Большое спасибо!
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2011, 00:40
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Можно было бы сделать:
float:left; clear:left;
float:right;clear:right;
и не париться.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
javascriptmvc две страницы pechnik.pechnik@yandex.ru Библиотеки/Тулкиты/Фреймворки 0 22.07.2011 13:51
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29
jQuery jCarousel в две строки Родогор Элементы интерфейса 2 12.11.2010 18:47
верстка под 17 дюймовый монитор Артем125 (X)HTML/CSS 8 20.08.2010 23:09
IFRAME согласно разрешения экрана и ширины колонки?? reDDevil Элементы интерфейса 0 30.10.2009 19:11