only_dimon
-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by only_dimon
-
-
Ясно, спасибо.
Убил еще пару часов на поиски аналогов flush space для html, но так и не нашел ничего.
-
То бишь без display: table / table-row / table-cell не выйдет?
При использовании этих свойств, вы совершенно правы, код от табличного ничем не отличается.
В том и дело, что ищу способ научить дивы поведению табличных элементов без описанных выше свойств.
Ячейки таблицы автоматически высчитывают ширину по какой-то мне неведомой формуле.
Интересует, есть ли способ сэмулировать этот расчет ширины.
-
Дивами не будет заполнения по ширине родителя.
И немного не так вы код написали.
<div class="table">
<div class="table-cell">data</div>
</div>
<table role="presentation">
<tr>
<td>
<div class="content">data</div>
</td>
</tr>
</table>По мне - сильно отличаются.
-
А разве сайт с большим количеством оберток и таблицами не хуже индексируется поисковыми системами? Поправьте меня, если я заблуждаюсь.
P.S. Зачем Вы злитесь. Когда возникает техническое противоречие надо стараться искать способ, который не требует компромиссов. В данном случае, не важно с какой стороны: соответствия дизайну, отказоустойчивости, скорости, удобочитаемости кода и индексации.
Меня вот проблема эта давно мучает. Идеального решения так и не нашел. Вот и решил обратиться к сообществу. Если здесь ответа не найду, ну что ж, придется идти на компромиссы.
P.P.S Плохо, когда отключенный JS ломает верстку или нарушает функциональность. При грамотном greaceful degradation можно так сверстать, чтобы и без вертикального выравнивания при отключении JS нормально выглядело. На функциональность эта оформительская вещь вообще не влияет.
-
Вы в курсе, что expression - это тоже JS? Т.е. если юзер отключит вдруг скрипты, то expression тоже работать не будет.
Да, именно поэтому первый пункт тоже включил, как не решенный окончательно.
В общем прекратите извращаться и используйте таблицу.Посмотрите вот этот пример в FF http://jsfiddle.net/only_dimon/KSwA2/2/
Чтобы сделать выравнивание выпадающего списка относительно родителя, придется помещать еще div в каждую ячейку, а в этом диве еще <a> для перехода к страницам. Получаем лесенку table-tbody-tr-td-div-a. Не очень мне такое нравится. Если способов эмулировать таблицу чистым CSS не существует, тыкнете носом, пожалуйста, в источник
-
Доброго времени суток.
Объектом моих неоднократных мучений является эмуляция таблицы. (важно! не использовать JS)
Зачем мне так нужна таблица?
1. Вертикальное выравнивание, когда высота выравниваемого объекта неизвестна. (то есть трюк с отрицательным margin-top не пройдет)
2. Вот такое меню с гибким составом элементов: http://screenshot.su...b9d38b5d5e9.jpg (растягивающееся на всю ширину сайта меню, размеры элементов зависят от размера контента).
С первым кое-как разобраться можно. display: table-cell и expression для IE lt 9.
Со вторым проблемы.
При верстке дивами, размер блока (float или inline-block) будет равен размеру контента, но не более. Таким образом у меня элементы всю область h-menu не заполнят. Когда набор элементов меню гибкий, прописывать паддинг или задавать точные размеры блокам, тоже не покатит. Процентная ширина элементов не будет зависеть от контента элемента.
В случае с таблицей ширина элементов table-cell растягивается относительно своего контента так, чтобы заполнить всего родителя. Буду очень признателен, если тыкнете носом в инфу, почему так происходит и как это поведение без js и без table-cell эмулировать. (table-cell не хочу использовать, так как возникают траблы с раскрывающимся css меню. в FF, например, для table-cell позиция не работает как надо)
Вот фиддл http://jsfiddle.net/only_dimon/KSwA2/
Нужно сделать так, чтобы элементы заполнили всю черную область (родителя), были разного размера в зависимости от размера содержимого (текста) и, чтобы выпадающее меню в FireFox могло выравниваться относительно родителя.
Спасибо всем, кто просветит меня в этом вопросе.
P.S. JS не подходит еще и потому, что неверно рассчитывает размер элементов, когда шрифт нестандартный подключается. Шрифт подгрузиться не успевает до запуска скрипта.
-
http://www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/IE/z-index-ie6-7.html
Плохо гуглили - для 8го тоже работает.
Простите за резкость, но читал я и именно это, и десяток похожих статей. Прекрасно знаю, что важен z-index родителя и должно быть задано position.
И чем же это моему случаю помогает?
Пробовал для li и для a задавать position и z-index больше, чем у ul. Ничего не помогает. Если задать ul бэкграунд, становится видно, что он ниже, чем li и a. Они его фоном не перекрываются. Без фильтра тени - все работает. В ie7 (который в статье) - все нормально. Так при чем тут статья про z-index, которую вы скинули?
Не сидел бы часами над этой траблой, не писал бы на форум (снова простите за резкость).
Здесь конкретно глюк только с IE8 и при использовании тени.
-
Доброго времени суток всем!
Столкнулся с проблемой, с бубном танцевал, гуглил, но решения так и не нашел. Надеюсь на помощь.
Есть попап-менюшка. Появляется ul. К нему я применил фильтр Shadow и тотчас в IE8 перестал работать hover для il. Пробовал для a hover - тоже не видит. Как оказалось после часов упорного тестирования, если вести мышью от элемента с большим, чем у ul z-index'ом, и навести на li - hover работает. Вот я и стал очень озадачен.
Ниже код:
<div id="add_panel"><a class="add active" href="#"></a>
<ul id="popup-add">
<li><a href="#">Категорию</a></li>
<li><a href="#">Товар</a></li>
</ul>
</div>и css для IE:
#add_panel .add.active{
width: 16px;
height: 16px;
background: url(../images/icons.png) 0 -20px;
display: block;
margin: 12px 0 0 12px;
z-index: 65;
}
#popup-add {
filter:
progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=45, Strength=10)
progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=135, Strength=10)
progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=225, Strength=10)
progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=315, Strength=10);
top: 46px;
left: -2px;
zoom: 1;
z-index: 60;
}
#popup-add li {
width: 150px;
background: #fff;
}
#popup-add li a {
color: #0097F8;
padding: 0 0 0 10px;
width: 150px;
}
#popup-add li a:hover {
color: #FFF;
}Если вести мышью с блока .add, hover работает.
Заранее спасибо за помощь!
P.S. В IE7 работает.
Text-shadow в IE lt 10 для кнопки и input[text]
in HTML Coding
Posted · Edited by only_dimon
Доброго времени суток уважаемые форумчане.
Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки.
Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода.
1. Кнопка
Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот
Попытки:
a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста.
б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой).
c) Реализовать
.action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10
.text - текст с тенью c z-index: 5
.bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1
Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка.
Но!
Проблема в реализации ховеров, эктивов и фокусов.
не работает нигде
не работает в IE, так как .action закрывает собой родителя полностью
Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил.
2.
input[type=text], input[type=password]
Условия: текст с тенью в IE. Скриншот
Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS?
Заранее спасибо за ответы.