| Регистрация Правила Главная форума Поиск |
| 0
- 19.09.2012 - 20:41
|  надеюсь, картинка видна. нужно два блока, типо столбики. Как видим, в левом выравнивание по середине. И оба они растягиваюццо в зависимости от высоты текста в правом. Расскажите, ув. господа, как такое сверстать дивами, обойдясь без таблицы. Мне действительно интересно и я пока что еще не начинал верстать. Но по прикидам, такое можно сбацать токо таблицей. Или я неправ?     | | ||||
| 1
- 19.09.2012 - 20:42
|
если картинка не видна, то она вот http://www.fotolink.su/pic_b/f96d0eb...04ae4a5b36.jpg  | | ||||
| 2
- 19.09.2012 - 23:07
|
Как-то сникли бойкие почитатели дивовой верстки. Ладно, отложу верстку до завтра. Авось чо-то умное все ж народите. =) | | ||||
| 3
- 19.09.2012 - 23:32
|
У блочных элементов есть такое замечательное свойство: display: table(table-row, table-cel и т.д.). Ими можно построить любую таблицу на дивах, не работает в IE 6,7 (но есть костыль), подробнее в мануале. пример: http://www.cyberforum.ru/html/thread431748.html Ответ на поставленный вопрос - Можно сверстать не только таблицами. Там же (в примере) написано то, что обсуждалось и здесь - "Таблицы как раз для отображения табличных данных и нужны. Использовать таблицы по их прямому назначению не запрещено." То что на картинке - я бы сделал обычным TABLE и не заморачивался, как я понимаю это будет выводится где-то в середине страницы, ну а основную верстку, как радикальный любитель, Конечно же дивами.. | | ||||
| 4
- 19.09.2012 - 23:56
| Цитата:
Добавлю: это что-то типо баннера. Токо реклама там будет каждый раз разная по высоте и если снять флажок, то грузиться реклама не будет. =) Эта вещь будет внизу страницы. Как видим, для таблицы она не особо подходит, т.к. это не вывод данных, а дизайн, поэтому те, кто сходили с ума в другой теме, доказывая что таблицами верстать вообще низя, просто таки обязаны подсказать как решить ЭТОТ случай с помощью дивов. =)) Так что слив не принимаеццо. =) | | ||||
| 5
- 20.09.2012 - 11:52
|
Если эти блоки имеют конкретную ширину (то есть не "резиновые"), и только меняется высота в зависимости от содержимого, то можно сделать блоками :) Нужно только знать что такое относительное и абсолютное позиционирование :) А я бы сделал таблицей и не парился :) | | ||||
| 6
- 20.09.2012 - 19:44
|
5-Искусственный Интеллект1 > правый блок - %-ный. В данное время - 60%. Левый - фиксированный. Цитата:
| | ||||
| 7
- 20.09.2012 - 21:39
|
6-Гавайские субтитры > разницу видишь между версткой страницы и версткой баннера, если это вообще можно назвать версткой. Цитата:
| | ||||
| 8
- 20.09.2012 - 22:21
|
7-Искусственный Интеллект1 > гы, как? =) | | ||||
| 9
- 20.09.2012 - 22:21
| Цитата:
| | ||||
| 10
- 20.09.2012 - 22:43
| Откладываю еще на один день, в надежде, что будет подсказано крутое решение без таблицы =) | | ||||
| 11
- 20.09.2012 - 22:53
| 8-Гавайские субтитры > а голова тебе на что? Чтоб туда только кушать и шапку носить? :) Думай :) Относительное и абсолютное позиционирование тебе в помощь :) | | ||||
| 12
- 21.09.2012 - 00:03
| Цитата:
Цитата:
А далее что? | | ||||
| 13
- 21.09.2012 - 13:42
|
Считай это тоже костылем - http://thexmails.narod.ru/ Ну а для авторитетности - выдача гугла и яндекса построена аналогично.. | | ||||
| 14
- 21.09.2012 - 19:40
| О, вроде оно. | | ||||
| 15
- 21.09.2012 - 19:42
| Скопировал ?? Я удаляю. | | ||||
| 16
- 21.09.2012 - 19:53
|
Знаешь почему не поставлю? Потому что левый блок не фиксированной ширины и контрол перекашивается при изменении ширины браузера. Вот такое вот. =( Да и вообще, top 50% это реальный изврат и токо имитация выравнивания посредине. А если в левом блоке будет не токо чекбокс и высота его контента будет меняться в зависимости от ширины окна, то куда оно улетит? Не. Низачот. Но конечно благодарю за то, что хоть что-то сделал, а не токо языком это самое. =) | | ||||
| 17
- 21.09.2012 - 20:09
|
Верстать сайт за тебя я не собирался. то что на картинке, Конкретно поставленная задача решена. Поиграй со стилями на досуге, очень увлекательно решать не тривиальные задачи. чуть чуть фантазии и можно сверстать любой макет, но за тебя это делать никто не будет.. | | ||||
| 18
- 21.09.2012 - 20:27
|
17-Kuba > это не решение, а хитрость. Сам подумай - с таблицей, где valign=middle, оно будет по центру, хоть что ты с ней делай. В той верстке - не будет. Будет только если ограничить ширину контейнера. А мне надо, чтобы оно было "конкретно по центру", без всякого. И, конечно же, я признателен за помощь в решении. | | ||||
| 19
- 21.09.2012 - 21:20
|
Мдя. Сделал, чтобы если выключено писало под контролом "реклама выключена". Угадайте с трех раз куда оно все сдвинулось? =))) | | ||||
| 20
- 21.09.2012 - 22:11
| Гавайские субтитры > знаешь что такое jquery? | | ||||
| 21
- 21.09.2012 - 22:28
| tooltip | | ||||
| 22
- 21.09.2012 - 22:44
|
20-lublurtk > гыгы. Дизигн надо делать чисто по css. JQ и прочие игрушки - это для немного другого =) 21-Kuba > га? | | ||||
| 23
- 21.09.2012 - 23:29
|
Ради интереса все же сделал свой вариант. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Верстка баннера блоками div </title> <style type="text/css"> html ** height:100%; padding: 0px; margin: 0px; ** body ** background: #fff; text-align: left; margin: 0px; padding: 10px 10px; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; ** .banner_div ** padding: 15px; background: #ddd; ** .banner_one ** padding: 5px 0px; ** .banner_container ** background: #fff; position: relative; ** .banner_part_left ** position: absolute; left: 0px; top: 50%; width: 100px; text-align: center; ** .banner_part_left_contr_1 ** ** .banner_part_left_contr_2 ** position: absolute; left: 0px; bottom: 50%; width: 100%; ** .banner_part_right ** padding: 0px 0px 0px 100px; ** .banner_part_right_contr_1 ** padding: 0px 0px 0px 10px; background: #ddd; ** .banner_part_right_contr_2 ** padding: 5px 5px 5px 5px; background: #fff; ** </style> </head> <body> <div> Тут текст. <div> <div style=""> <div style=""> Баннер будет ниже: 100 px левая часть, остальная будет правая. </div> </div> </div> </div> <div> <div class="banner_div"> <div class="banner_one"> <div class="banner_container"> <div class="banner_part_left"> <div class="banner_part_left_contr_1"> <div class="banner_part_left_contr_2"> <input type="checkbox" name="pf" value=""> </div> </div> </div> <div class="banner_part_right"> <div class="banner_part_right_contr_1"> <div class="banner_part_right_contr_2"> <div> Тут тект правой части баннера.<br> Купите у нас какую-нибудь ерунду.<br> Пусть она вам и не нужна<br> Все равно купите. </div> </div> </div> </div> </div> </div> <div class="banner_one"> <div class="banner_container"> <div class="banner_part_left"> <div class="banner_part_left_contr_1"> <div class="banner_part_left_contr_2"> <input type="checkbox" name="pf" value=""> </div> </div> </div> <div class="banner_part_right"> <div class="banner_part_right_contr_1"> <div class="banner_part_right_contr_2"> <div> Тут тект правой части баннера.<br> Тут какой-нибудь рекламный текст.<br> И дальше убеждаем посетителя купитьт какую-нибудь лабуду пусть и абсолютно ему не нужную </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> | | ||||
| 24
- 21.09.2012 - 23:39
|
23-Искусственный Интеллект1 > это прикол? | | ||||
| 25
- 22.09.2012 - 11:14
|
22-Гавайские субтитры >в jquery определяешь height дива с текстом. потом задаешь этот размер и line-height диву с чекбоксом. http://jsfiddle.net/ тут можно все это делать. можно использовать таблицу + css. можно в таблицу добавить div. главное не ленись и пробуй все варианты) | | ||||
| 26
- 22.09.2012 - 13:27
| 24-Гавайские субтитры > какой прикол, все работает нормально. | | ||||
| 27
- 22.09.2012 - 20:34
|
26-Искусственный Интеллект1 > неа. Не робит. 25-lublurtk > ага щас. Буду вязать стокилобайтную либу ради выравнивания по центру. Еще чего. =) | | ||||
| 28
- 23.09.2012 - 12:01
| Цитата:
| | ||||
| 29
- 23.09.2012 - 13:23
| подтверждаю, код рабочий.. | | ||||
| 30
- 23.09.2012 - 16:23
| Цитата:
Ща еще раз скопирну и поменяю. Щас... | | ||||
| 31
- 23.09.2012 - 21:41
|
Пацаны, вы или не понимаете, или прикидываетесь. Вы понимаете что такое центр по вертикали или не? То что вы предлагаете, это не центрирование в контейнере по вертикали, а отдаление от верха контейнера на 50%. Вы же должны знать, что при центрировании учитывается еще и высота объекта, подлежащего центрированию. Вот что делать, когда флажок снимается, и при таком условии ниже флажка появляется текст "реклама выключена"? Угадайте, куда сместится центр при таком варианте? Веть высота объекта, который вы предлагаете "отталкивать" от верха - измениццо. =)) | | ||||
| 32
- 23.09.2012 - 21:43
|
Да и вообще, учитывая что объект имеет хоть какую высоту, top уже не может быть 50%. А 49, или даже 48, а может и меньше. =) Это даже не костили. Это гнилые подпорки, а не центрирование. =))) | | ||||
| 33
- 23.09.2012 - 23:11
| Цитата:
Если все же надо сделать центрирование по высоте при добавлении текста после чекбокса, то нужно кое-что добавить в коде: после кода <div class="banner_part_left_contr_1"> нужно будет добавить <br> | | ||||
| 34
- 23.09.2012 - 23:17
| Цитата:
Цитата:
во-вторых. видать ты еще не видел настоящих извратов в верстке :) особенно для браузера ie6 :) | | ||||
| 35
- 23.09.2012 - 23:35
| Цитата:
Разницу понимаешь? =)) Если бы мне надо было поставить верхний край элемента посредине, я бы не спрашивал, как отцентрировать, понятно? =) Цитата:
Цитата:
Тебе не кажется что это не то, что спрашивалось? =) Цитата:
Ты вообще понял про что вопрос? Про центрирование ЭЛЕМЕНТА по вертикали. Этот ваш изврат - это НЕ центрирование ЭЛЕМЕНТА по вертикали. =)) | | ||||
| 36
- 23.09.2012 - 23:56
| http://shpargalkablog.ru/2012/03/vyr...vertikali.html интересно почитать. несколько способов вертикального выравнивания. не так просто как в таблице, но знать о них стоит. | | ||||
| 37
- 25.09.2012 - 02:12
|
div.classname ** margin-top: -120px; /* margin-top = -(X/2) */ height: 240px; /* height = X */ top: 50%; ** Не канает? | | ||||
| 38
- 25.09.2012 - 15:42
| Есть такой изврат: разложить все дивы в точности по структуре как в таблице (таблица, заголовок, строки, ячейки) и назначить диву тип отображения «table-cell» ну или как-то так (забыл, давно было дело) то есть по сути та же таблица, но определённая через CSS а не тегами: гланды через жопу. | | ||||
| 39
- 25.09.2012 - 16:01
| в третьем посте я говорил об этом, в IE6,7 не работает, а хак для них просто заменяет эти дивы обычной таблицей. Определенный изврат в этом есть )) | |
Интернет-форум Краснодарского края и Краснодара |
