Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
OLEX
спасибо, все класс, только при -"white-space: nowrap;" -с длинными именами подпунктов меню - например в "продукции" или в "для врачей и мед. персонала" проблемы.
 
Оставил данный параметр дефолтным, уменьшил padding 85px; в #mainmenu ul li a и добавил там же text-align:center;  - вроде бы выровнялось более менее )))
 
 

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 17:28 18-04-2014
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum
для подпунктов убираешь nowrap

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 19:32 18-04-2014
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
можно ли как-нибудь сделать, чтобы 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>

нужно, чтобы pre был с overflow, но при этом div.lang - вверху справка блока div.source, но не правее pre.

Всего записей: 6637 | Зарегистр. 14-02-2005 | Отправлено: 21:18 26-04-2014 | Исправлено: unreal666, 22:27 26-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666
а рабочий пример? а то в этом опечаток много.
поместить js в pre или в родителя inline (чтобы обтягивал pre) с  абсолютным позиционированием справа и вверху?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:46 26-04-2014
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

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

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

Цитата:
а рабочий пример?

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

Цитата:
поместить js в pre

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

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

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

Всего записей: 6637 | Зарегистр. 14-02-2005 | Отправлено: 22:27 26-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666

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

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

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:28 26-04-2014
unreal666



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

Всего записей: 6637 | Зарегистр. 14-02-2005 | Отправлено: 22:50 26-04-2014 | Исправлено: unreal666, 22:52 26-04-2014
mischael



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Доброго здоровья, друзья!
Вот такая интересная задачка.
 
Есть сайт на движке webasyst ss3.09, в котором главное меню генерируется динамически. В конечном итоге оно имеет вид такой:
актуальный кусочек кода сайта
 
задача сделать так, чтобы при наведении мышки на пункт меню картинка менюшки чуть увеличивалась.
 
Что я уже пробовал:
1) Подготовил по паре картинок (чуть меньше и чуть больше) для каждой менюшки.
 
2) Попробовал через такой селектор

Код:
#rootcatimg > a > img[src="/published/publicdata/NEOBAZARRUSHOP/attachments/SC/products_pictures/s_aksds.png"] {
src: url(http://neobazar.ru/img/spacer.png) !important;
width:200px;
height:200px;}

заменить картинку категории на прозрачную и менять бэкграунд у <a> при наведении вот так:

Код:
#rootcatimg > a[href="/category/sumki-i-koshelki/"] {
background: url(http://neobazar.ru/img/s_aksm.png) !important;
}
#rootcatimg > a[href="/category/sumki-i-koshelki/"]:hover {
background: url(http://neobazar.ru/img/s_aks.png) !important;
}

Но не отрабатывает
 
3) Пробовал на картинку наложить display:none;
Но тогда <a href></a> становится размером 0*0 и никакие width height на него не действуют и, соответственно, кликнуть по нему нельзя и background url(****) не виден.
 
Есть идея, но не знаю как реализовать: можно ли как-то обратиться к селектору-родителю, у которого есть совершенно определенный дочерний элемент?
Я имею в виду вот эту конструкцию: #rootcatimg > a[href="/category/sumki-i-koshelki/"] как мне обратиться к #rootcatimg у которого есть дочка a[href="/category/sumki-i-koshelki/"]?
 
И даже не предлагайте мне копаться в самом webasyst ss — я там почти ничего не понимаю, а те, кто понимает или просят бешеных денег за работу или просто не отвечают.
 
Спасибо.

Всего записей: 255 | Зарегистр. 25-11-2007 | Отправлено: 01:15 30-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
mischael
вам обязательно это нужно на чистом CSS?


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:56 01-05-2014
mischael



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
абсолютно не принципиально как. Просто я не знаю как ещё можно.

Всего записей: 255 | Зарегистр. 25-11-2007 | Отправлено: 23:14 01-05-2014
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую, снова есть парочка вопросов,  
щас делаю сайт на купленной вп теме, ну и вопросы буду описывать и показывать на полигоне.
1. Хочу вставить один аккодреон на css3 - вот этот
Дело в том, что я его некоторое время назад уже без проблем вставил на один сайт, можно посмотреть вот тут , как видно, все ок.
Щас вставляю то же самое - не работает. То ли где то конфликты стилей, но отловить не могу.
аккордеон на пациенте  - как видно тут, не раскрывается....
 
Попробовал на другую вп тему поставить - работает. Вот тут например работает
 
В общем, кто то если подскажет, где конфликт, или еще в чем проблема, буду признателен.
 
2. На этом же сайте - только недавно обновил тему, пофиксили кое-какие баги, но появилась проблема, которую хотелось бы решить грамотно
ссылка 1
и ссылка 2
По ссылке 1 - страница объекта с большими картинками, и тут все в порядке.
А вот по ссылке 2 - страница объекта с маленькими картинками, и как видно, эти картинки увеличены до 100% вот тут:

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

Если убрать 100%, или дать auto, то картинка отображается нормально.
Но при этом теряется респонсивность страницы.
При 100% - с респонсивностью все ок, но интерполяция дикая удручает...
Вопрос: можно ли в данном случае как-то совместить нормальное отображение маленьких картинок и респонсивный дизайн страницы?

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 19:17 05-05-2014
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
По вопросу 2 - автор утверждает, что корректным для случая микс-картинок разного, большого и малого размера, будет следующее решение:

Код:
width: auto; max-width: 100%;

Однако у меня респонсивность страницы теряется при этом, при этом видно это и на их демо-сайте - например,  
http://wp.realia.byaviators.com/properties/3412-cloudcroft-dr-2-2/
если сделать как они советуют, страница перестает быть отзывчивой.
Или надо выбирать - то ли одно, то ли другое?

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 15:16 06-05-2014
oniava

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте.
 
Не знаю куда написать и решил здесь.
 
Подскажите, мне нужно сделать так, что бы станица, например "мой мир" в майле автоматически обновлялась при появлении новой запись.
 
То есть, пакет данных пришел, данные сразу отобразились на странице, без нажатия на кнопку обновить страницу.

Всего записей: 4 | Зарегистр. 13-04-2014 | Отправлено: 19:02 07-05-2014
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
oniava
писать расширение под конкретный браузер.

Всего записей: 6637 | Зарегистр. 14-02-2005 | Отправлено: 19:33 07-05-2014
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую, хочу сделать вот такую бирку, верее, близкую,подобную, но вертикальную, и безо всяких hover и a стилей, чисто нарисовать на css направленную треугольником вниз бирку.
 
Вот тут я хочу превратить "sale" и "rent" в подобную бирку, но что то никак...

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 11:10 12-05-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum

Код:
.properties-grid .property .rent-sale:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;    
    border-top: 11px solid #02344a;    
}
.properties-grid .property .rent-sale:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
}

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 14:10 12-05-2014 | Исправлено: Xrobak, 14:11 12-05-2014
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
спасибо, здОрово!
чуть "дырка" не по центру, но вроде margin-ами выравнивается легко.
А еще вопрос тут же,на который пока не смог найти ответ: можно ли, и если можно то как в случае вот такого вертикального текста чуть уменьшить визуально расстояние между буквами? letter-spacing не срабатывает, вижу, что справа-слева меняется расстояние межбуквенное, а реально сверху-снизу от буквы нет.

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 15:17 12-05-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
http://jsfiddle.net/gR8bg/ тут с комментами + я поменял классы с before и after, чтобы круг не уползал под треугольник

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 15:28 12-05-2014
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
Блин, line-height, двойка мне сразу без разговоров )))
Спасибо, все супер, работает.

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 20:54 12-05-2014
DarkSmoke



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Люди добрые, помогите.
http://avtopromin.com.ua/ak-test
на компьютере нормально смотрится а на телефоне или планшете меню в две строки съезжает, не знаю почему (((

Всего записей: 962 | Зарегистр. 08-10-2005 | Отправлено: 00:49 02-06-2014
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru