» Вопросы по CSS

dariusii

Цитата:

ссылки кликабельны лишь в нижнем левом их углу

значит блоки перекрывают друг друга, возможно.
восстановите страницу для просмотра, например тут www.jsfiddle.net

ps: http://jsfiddle.net/k38Jc/
у вас картинки идут поверх ссылок, видимо.. поиграйтесь с z-index

Cheery

Цитата:

значит блоки перекрывают друг друга, возможно.

да. в том-то и дело.

dariusii
ссылки то в самом низу

Cheery
и да - у текста z-index "ближе" к мыше.

Я так понял, что css3 - это лишь декор. в реале блоке как бы остаются горизонтальными (в поведении под линки)?
так?

dariusii

Цитата:

так?

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

Cheery
у текста самый приоритетный позишн. у остальных блоков более маленький z-index. единичка и двойка.

как-то надо, вот только как)))



от задачи-то этой никуда.

Добавлено:
А возможно ли выстроить текст вертикально, без css3 способа? а уже потом его и наклонить через css3. ?
так получится, что ширина будет меньше и конфликтов не будет.
с таблицами. пусть и див в диве. таблицы ж с позишн не пойдут в одном указателе. ну и не беда.

просто, не смог найти такого метода. - выстраивание текста по вертикали, без css3. может, оно и рядом, но не вышло.

dariusii
ну вот смотрите, никакого перекрытия нет
http://jsfiddle.net/k38Jc/2/
понятно, что избавился от блоков.. но ваши картинки должны быть в самом низу, чтобы не перекрывали линки никак.

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

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

ps: если дадите картинку карандаша отдельно - могу набросать

Cheery
А. Ну я понял. Блоки нарисовать выше и оттащить их за пределы родительского блока. наверное, так. благодарю за подсказку.

хотя))) если это сново не перекроет текст.
странно. у родителей z-index-то ниже..

Добавлено:
Cheery
а, смотря что. так-то, карандаш вот https://www.dropbox.com/s/wj6lr9hhiejlu1k/0019.png

Добавлено:

Цитата:

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

так, они разделены
<div id="pencilb01">
    <div id="linkimg"><img src="images/0017.png" width="142" height="66" alt="0017png"></div>
    <div class="pencilt01"><a href="http://linuxportal.ru">Главная</a></div>
</div>
..

я пробовал линком делать не текст, а изображение. тож самое.

dariusii

Цитата:

а, смотря что. так-то, карандаш вот

ну если вы уж текст поворачиваете, то зачем карандаш повернут ?)
сейчас, набросаю кое что.

Cheery
карандаш не я поворачивал. он уже так был нарисован. изначально и текст растром был (так же повернут). но убила гребенка в "шрифте" и решил сделать текстом.

dariusii
http://jsfiddle.net/k38Jc/4/
это наспех, просто показать идею.

и с изменением картинки по :hover, если надо, не будет проблем.

Однако. Не думал, что тут такая экстренная помощь)))))

Добавлено:
Cheery
Премного Благодарен. Как отблагодарить еще, даже, не знаю.
Мой родной ru-board. лучше всех года с 2к.

Еще такой вопрос.
Возможно ли в css делать не так:

.link01,link02,link03 {position:absolute;}
link01 {left:30px;}
link02 {left:60px;}
link03 {left:90px;}

а

.link01,link02,link03 {position:absolute;а тут как-то ~left:n+30px~}
кто понял, тот понял.
что бы не плодить море координат+30px.

ну, несколько имен классов тут я условно вывел. что бы не указывать еще и html.
понятно, что тогда
.link {position:absolute;а тут как-то ~left:n30px~}

ну и без php в css. ибо один фик сложности будут с именами классов. то есть, конечно можно)) но не нафик ли))

dariusii
да без проблем
http://jsfiddle.net/k38Jc/5/

Cheery
если не с позишн, а с флоат, то их не "уловить" отрицательным margin)))
они, будут сжиматься (margin-left: -95px;), а уже при 94px начнут наоборот расжиматься и никак не впишутся в равномерную последовательность)))




десятичных значений в margin не выставить и нашел, что там принимаются лишь пиксели.
им надо что-то в духе ~ -94.5px, но как так точно выдержать размер.

еще пробовал, меняя ширину блока, ака, так сделать поправку/уточнение - тож не сахар. прыгает размер, как карась на сковороде.

dariusii
автоинкремента у абсолютного позиционирования нет.
равномерная последовательность чего? если картинка идет фоном в блоке ссылки, то там все равно какой сдвиг.

или вы о фоне? ну так и его можно сделать аналогично, загнав в нужный див.

ясно. значит, свой класс для каждого блока.

приветствую, посмотрите плз вот на этом сайте меню, никак не найду, как выровнять по длине - т.е. вот сейчас там 4 пункта меню, надо сделать, чтобы каждый занимал одинаковое расстояние по длине, т.е. по 25%. Сейчас же это зависит от длины имени и от параметра padding: 8px 85px; в #mainmenu ul li a
И второе - направьте, что добавить, чтобы корректно работало dropdown в браузерах устаревших версий.
Снкс

Weinaum

#mainmenu ul {
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
float: left;
width: 100%;
}

#mainmenu ul li {
width: 25%;
white-space: nowrap;
}

#mainmenu ul li a {
display: inline-block;
display: block;
}

OLEX
спасибо, все класс, только при -"white-space: nowrap;" -с длинными именами подпунктов меню - например в "продукции" или в "для врачей и мед. персонала" проблемы.

Оставил данный параметр дефолтным, уменьшил padding 85px; в #mainmenu ul li a и добавил там же text-align:center; - вроде бы выровнялось более менее )))

Weinaum
для подпунктов убираешь nowrap

можно ли как-нибудь сделать, чтобы overflow не "вытеснял" элементы с float?
Т.е. есть, к примеру, такое:

Код: <style>
pre { overflow: auto; }
code { padding: 4px; }
.source {float: right; }
</style>
<div class="source">
    <div class="lang">JS</div>
    <pre><code>...какой-то код</code></pre>
</div>

unreal666
а рабочий пример? а то в этом опечаток много.
поместить js в pre или в родителя inline (чтобы обтягивал pre) с абсолютным позиционированием справа и вверху?

Цитата:

а то в этом опечаток много.

только 2 увидел. исправил.

Цитата:

а рабочий пример?

не получится. Часть div'ов генерится JS'ом, в том числе и с div.lang.

Цитата:

поместить js в pre

pre в примере не имеет отступов/полей, а у меня имеет. Поэтому div.lang будет не в углу div.source.

Цитата:

с  абсолютным позиционированием справа и вверху?

тогда придется создавать враппер div-контейнер с position не static, чтобы от него отталкиваться.

ЗЫ.
Хотя наверно можно и с абсолютным позиционированием. Все равно часть кода создается JS'ом. Одним больше одним меньше.

unreal666

Цитата:

div-контейнер с position не static, чтобы от него отталкиваться.

зачем? дать pre position:relative и все. внутри позиционирование будет относительно него.

Cheery
не понял.
у div.lang же родитель div.source, а не pre. Т.е. при явном указании top/right для div.lang он (div.lang) начнет позиционироваться относительно документа, если нет родителя без static.
А внутри pre не катит, т.к. надо, чтобы прилегало к отступу div.source.
Поэтому наверно надо внутри div.source сделать еще внутренний контейнер-враппер без static.

Доброго здоровья, друзья!
Вот такая интересная задачка.

Есть сайт на движке webasyst ss3.09, в котором главное меню генерируется динамически. В конечном итоге оно имеет вид такой:
[more=актуальный кусочек кода сайта]
Код: <tr>            <td width="1%" align="center" class="cat_image">
<div id="rootcatimg">
    <a href="/category/sumki-i-koshelki/">
        <img border="0" src="/published/publicdata/NEOBAZARRUSHOP/attachments/SC/products_pictures/s_aksds.pn" alt="Аксессуары">
    </a>
</div>
    <div class="root_cat_name">
        <a href="/category/sumki-i-koshelki/" class="rcat_root_category">Аксессуары</a> <span class="rcat_products_num">[20]</span>
        <div class="rcat_child_categories">
                </div>
    </div>
    </td>
    

                    <td width="1%" align="center" class="cat_image">
<div id="rootcatimg">
    <a href="/category/suveniry/">
        <img border="0" src="/published/publicdata/NEOBAZARRUSHOP/attachments/SC/products_pictures/s_igrfq.png" alt="Игрушки ">
    </a>
</div>
    <div class="root_cat_name">
        <a href="/category/suveniry/" class="rcat_root_category">Игрушки </a> <span class="rcat_products_num">[24]</span>
        <div class="rcat_child_categories">
                </div>
    </div>
    </td>
    

                    <td width="1%" align="center" class="cat_image">
<div id="rootcatimg">
    <a href="/category/kartiny/">
        <img border="0" src="/published/publicdata/NEOBAZARRUSHOP/attachments/SC/products_pictures/s_kar4e.png" alt="Картины">
    </a>
</div>
    <div class="root_cat_name">
        <a href="/category/kartiny/" class="rcat_root_category">Картины</a> <span class="rcat_products_num">[44]</span>
        <div class="rcat_child_categories">
                </div>
    </div>
    </td>
    

    </tr>

mischael
вам обязательно это нужно на чистом CSS?

Cheery
абсолютно не принципиально как. Просто я не знаю как ещё можно.

Приветствую, снова есть парочка вопросов,
щас делаю сайт на купленной вп теме, ну и вопросы буду описывать и показывать на полигоне.
1. Хочу вставить один аккодреон на css3 - вот этот
Дело в том, что я его некоторое время назад уже без проблем вставил на один сайт, можно посмотреть вот тут , как видно, все ок.
Щас вставляю то же самое - не работает. То ли где то конфликты стилей, но отловить не могу.
аккордеон на пациенте - как видно тут, не раскрывается....

Попробовал на другую вп тему поставить - работает. Вот тут например работает

В общем, кто то если подскажет, где конфликт, или еще в чем проблема, буду признателен.

2. На этом же сайте - только недавно обновил тему, пофиксили кое-какие баги, но появилась проблема, которую хотелось бы решить грамотно
ссылка 1
и ссылка 2
По ссылке 1 - страница объекта с большими картинками, и тут все в порядке.
А вот по ссылке 2 - страница объекта с маленькими картинками, и как видно, эти картинки увеличены до 100% вот тут:

Код: .carousel.property .preview a img {
width: 100%;
}