вот есть код:
<div style="float:left">
<p style="line-height:5px">aaaa </p>
<p style="line-height:5px">bbbb </p>
<p style="line-height:5px">cccc </p>
<p style="line-height:5px">dddd </p>
<p style="line-height:5px">ffff </p>
</div>
<div>
<p style="line-height:5px"> cccc1 </p>
<p style="line-height:5px"> cccc2 </p>
</div>
хочу так сделать как на скриншите, то есть вертикланое позиця втарого див тег биль такое же, какои есть для тега <p> в котором написано "cccc "
маргин-топ не помагло так как резултат в разних броузерах получается не одинакови
Спустя 14 минут, 43 секунды (12.02.2012 - 16:36) Invis1ble написал(а):
Свернутый текст
Цитата |
скриншите |
:lol:
так можно, например
<p style="line-height:5px;display:inline-block">cccc </p>
<p style="line-height:5px;display:inline-block"> cccc1 </p><br />
<p style="line-height:5px;display:inline-block">dddd </p>
<p style="line-height:5px;display:inline-block"> cccc2 </p>
Спустя 6 минут, 58 секунд (12.02.2012 - 16:43) Invis1ble написал(а):
А для чего тебе это нужно?
Спустя 16 секунд (12.02.2012 - 16:43) nugle написал(а):
html
css
<div class="parent">
<div class="first">
<p>aaaa </p>
<p>bbbb </p>
<p>cccc </p>
<p>dddd </p>
<p>ffff </p>
</div>
<div class="second">
<p> cccc1 </p>
<p> cccc2 </p>
</div>
<div class="clear"></div>
</div>
css
.clear{clear:both;}
.parent{width:80px;}
.parent div p{line-height:5px}
.first{float:left;}
.second{float:right; padding-top:40px;}
Спустя 7 минут, 41 секунда (12.02.2012 - 16:51) Invis1ble написал(а):
Цитата |
.clear{clear:both;} .parent{width:80px;} .parent div p{line-height:5px} .first{float:left;} .second{float:right; padding-top:40px;} |
а еще лучше так
.clear{clear:both;}
.parent{width:80px;}
.parent div p{line-height:0.5em}
.first{float:left;}
.second{float:right;padding-top:3em;}
Спустя 9 минут, 45 секунд (12.02.2012 - 17:01) nugle написал(а):
Invis1ble
так съедит вниз, 2.5 надо)
так съедит вниз, 2.5 надо)
Спустя 52 секунды (12.02.2012 - 17:01) Invis1ble написал(а):
nugle
я протестил в 4-х браузерах, у меня все ч0тко
я протестил в 4-х браузерах, у меня все ч0тко
![tongue.gif](http://phpforum.ru/html/emoticons/tongue.gif)
Спустя 3 минуты, 40 секунд (12.02.2012 - 17:05) nugle написал(а):
Invis1ble
А у меня нет
Все равно идея главная моя
А у меня нет
![sad.gif](http://phpforum.ru/html/emoticons/sad.gif)
![tongue.gif](http://phpforum.ru/html/emoticons/tongue.gif)
Спустя 43 секунды (12.02.2012 - 17:06) Invis1ble написал(а):
nugle
Цитата |
А у меня нет |
в каком браузере, версия, ОСь
Спустя 4 минуты, 37 секунд (12.02.2012 - 17:10) nugle написал(а):
хром последний, windows 7
Спустя 56 секунд (12.02.2012 - 17:11) dadli написал(а):
Цитата |
скриншите |
aх
Invis1ble
![laugh.gif](http://phpforum.ru/html/emoticons/laugh.gif)
![laugh.gif](http://phpforum.ru/html/emoticons/laugh.gif)
Invis1ble
Цитата |
А для чего тебе это нужно? |
хочу сделать под-подменю из одного пyнкта подменю.
nugle
Invis1ble
Цитата |
а еще лучше так |
везде работает прекрасно, кроме хрома, там "second" контеинер намного више, чем тег <p>cccc </p>. можно исправить ?
верся хрома: 4.1
Спустя 3 минуты, 46 секунд (12.02.2012 - 17:15) nugle написал(а):
dadli
чем тебя мой вариант с px не устроил?
чем тебя мой вариант с px не устроил?
Спустя 2 минуты, 1 секунда (12.02.2012 - 17:17) sergeiss написал(а):
Цитата (dadli @ 12.02.2012 - 18:11) |
хочу сделать под-подменю из одного пyнкта подменю. |
Подумай тогда, что можно сделать по-другому.
Делаешь список (ul-li....) и изначально скрываешь некоторые внутренние части списка. Посредством CSS либо CSS+JS можно в нужные моменты разворачивать или скрывать эти части.
Спустя 45 секунд (12.02.2012 - 17:18) Invis1ble написал(а):
nugle
Цитата |
хром последний, windows 7 |
у меня в нем все норм. Возможно, дело в доктайпе, я тестирую с
<!DOCTYPE html>
Цитата |
чем тебя мой вариант с px не устроил? |
с px second вверх смещен
dadli
Цитата |
везде работает прекрасно, кроме хрома, там "second" контеинер намного више, чем тег <p>cccc </p>. можно исправить ? верся хрома: 4.1 |
Обнови хром :)
Спустя 1 минута, 57 секунд Invis1ble написал(а):
Да, меню лучше делать с помощью списков, как написал sergeiss
Сам недавно намучался с подменю, ненавижу пиксельхантинг
![mad.gif](http://phpforum.ru/html/emoticons/mad.gif)
Спустя 4 минуты, 8 секунд (12.02.2012 - 17:22) nugle написал(а):
Цитата |
с px second вверх смещен |
А у меня с em вниз. и с другим доктайпом тоже самое
Спустя 14 минут, 23 секунды (12.02.2012 - 17:36) sergeiss написал(а):
dadli - как вариант для размышления, вот так можно - и никаких извращений, всё вполне кроссбраузерно :) Хотя, конечно, надо будет немного доработать. В т.ч., может быть, использовать не <p>, а другой тэг.
PS. И потом только надо будет управлять видимостью "детей".
<div style="float:left">
<p style="line-height:5px">aaaa </p>
<p style="line-height:5px">bbbb </p>
<p style="line-height:5px; position:relative;">cccc
<label style="line-height:5px; position: absolute ;left:100px; top:0px"> cccc1 </label>
</p>
<p style="line-height:5px; position:relative">dddd
<label style="line-height:5px; position: absolute ;left:100px; top:0px"> cccc2 </label>
</p>
<p style="line-height:5px">ffff </p>
</div>
PS. И потом только надо будет управлять видимостью "детей".
Спустя 14 минут, 46 секунд (12.02.2012 - 17:51) dadli написал(а):
nugle
Цитата |
чем тебя мой вариант с px не устроил? |
просто в маём версие хрома не работал коректно
Invis1ble
Цитата |
Обнови хром ![]() |
я абнавлаяю но может бить комуто (ползователю) есть ранная верся
sergeiss
да, даже маём старом хроме работает коректно
нy спасибо люди
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
боже, почему не сушествует один и толко один браузер на свете ?
![biggrin.gif](http://phpforum.ru/html/emoticons/biggrin.gif)
Спустя 3 минуты, 7 секунд (12.02.2012 - 17:54) TranceIT написал(а):
Цитата (dadli @ 12.02.2012 - 14:51) |
боже, почему не сушествует один и толко один браузер на свете ? |
Потому что он был бы платный и стоил 400$ =)
Спустя 3 минуты, 54 секунды (12.02.2012 - 17:58) Invis1ble написал(а):
Цитата |
может бить комуто (ползователю) есть ранная верся |
щас может начнется холивар, но, имхо, надо плюнуть на таких
так можно и под NCSA Mosaic начать верстать
В тему http://habrahabr.ru/blogs/browsers/84222/
из комментов
http://upload.wikimedia.org/wikipedia/comm...eb_browsers.svg
Спустя 15 минут, 17 секунд (12.02.2012 - 18:13) redreem написал(а):
для привязки вертикального выравнивания к тексту вообще говоря vertical-align служит. думается грамотная комбинация vertical-align + line-height будет более семантична нежели вышепредложенные решения. хотя я честно говоря не догнал до конца задачу
если еще актуально - переформулируй, я ковырну
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
Спустя 7 минут, 55 секунд (12.02.2012 - 18:21) Invis1ble написал(а):
Что может быть семантичнее <menu> - <li> ?
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
Спустя 41 минута, 12 секунд (12.02.2012 - 19:03) dadli написал(а):
redreem
Цитата |
если еще актуально - переформулируй, я ковырну |
пусть будит так, как есть. уже дали рабочего варянта
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
болшое спасибо за предложение
![smile.gif](http://phpforum.ru/html/emoticons/smile.gif)
_____________
когда чарли чаплин принимал участие в конкурсе: "клон чарли чаплинов", то чарли занимал третю позицию.