Ru-Board.club
← Вернуться в раздел «Web-программирование»

» Вопросы по CSS

Автор: Weinaum
Дата сообщения: 06.12.2013 14:20
Cheery
спасибо, как всегда не вижу что то простое.

Вот в этом вордпрессовском шаблоне в секции Media Gallery хочу сделать изменение картинки по hover - например, затемнить, или трансформ какой-нибудь симпатичный применить. Картинка, если я правильно вижу, внутри класса image.
Так вот, пытаюсь по a:hover задать background-color или transform, вижу что применяется,но почему то фотография все равно остается сверху. Ну и видно по маленькому - 5px- кусочку между датой и картинкой.
Где-то опять ошибаюсь, как все таки побороть?
Автор: OLEX
Дата сообщения: 06.12.2013 15:22
Weinaum
.image a:hover { opacity: 0.5; }
Автор: Weinaum
Дата сообщения: 06.12.2013 15:42
OLEX
это да, это получается, но эффект не тот... я хочу, например, полупрозрачный красный слой наложить - или изначально - без hover - накрыть толстым rgba(0, 0, 0, 0.75) - а по hover приоткрыть где-то до 0.4-0.5.
И вот это не получается пока...
Автор: OLEX
Дата сообщения: 06.12.2013 17:56
Weinaum

.image .gallery_image_overlay {
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: black;
opacity: 0.5;

}

.image:hover .gallery_image_overlay {
opacity: 1;
}
Автор: Weinaum
Дата сообщения: 06.12.2013 19:59
OLEX
спасибо, вот в этом дело - display: block
Только почему-то мне пришлось это в hover тоже принудительно записать.
В любом случае, теперь все работает, можно дальше экспериментировать ))
Автор: guliaish
Дата сообщения: 12.12.2013 12:32
Помогите.

Есть



<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Гостиница</title>
    <meta name="description" content="Описание страницы" />
    <meta name="keywords" content="Ключевые слова" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
<body>
    <div id="page">    <header>
        <a href="/" title="" class="logo"><img src="images/logo.png" alt="Гостиница е" /></a>
        <div class="phone">+7 8888 88888881</div>
        
        <nav>
            <ul id="top_menu">
                <li><a href="index.html">О гостинице</a></li>
                <li><a href="services.html">Наши услуги</a></li>
                <li><a href="contacts.html">Контакты</a></li>
<li><a href="galeri.html">Галерея</a></li>
            </ul>
        </nav>
        
        <div class="header_img1">
        <img src="images/header_img1.jpg" alt="Гостиница />
        </div>
    </header>

    <section id="content">
        <h1>Приветствуем Вас на сайте гостиницы "</h1>
        <img src="images/content_img.jpg" alt="Картинка" class="float-right" />
        <p>Здравствуйте! Мы рады приветствовать вас на сайте гостиницы !</p> .....
        <p>Вас встретит приветливый и профессионально грамотный персонал, который обеспечит все условия для

проживания в нашей гостинице, отдыха и продуктивной работы. </p>
        
<p>Сауна - островок спокойствия и отдыха, куда вы всегда можете приехать, чтобы восстановить силы и

укрепить здоровье. Мы будем рады, если однажды посетив нас, Вы захотите вернуться к нам снова.</p>

    </section>
    
    </div>
</body>
</html>


и таблица



* {margin:0;padding:0;}
body {background-color:#f7f7c5;font-family:'Arial';}

#page {width:940px;margin:0 auto;}

header {height:615px auto;}
header .logo {float:left;}
header .logo img {margin:23px 0px 12px 0px;}
header .phone {float:right;margin-top:30px;font-size:30px;font-family:'Arial';color:#525252;}

*nav {clear:both;height:60px;background-color:#759fff;border-radius:8px 8px 0px 0px;}
nav ul {list-style:none;}
nav ul li {float:left;margin:17px 20px;font-size:20px;font-family:'Georgia';font-style:italic;}
nav ul li a {color:#f7f6c5;text-decoration:none;}
nav ul li a:hover {text-decoration:underline}

.header_img {height:435px;background-color:#759fff;border-radius:0px 0px 8px 8px;margin-bottom:15px;}

#content {clear:both;}
#content h1 {font-size:28px;font-family:'Georgia';font-style:italic;font-weight:normal;margin-bottom:20px;}
#content img.float-right {float:right;margin:0px 0px 15px 15px;}
#content p {margin-bottom:15px;}

footer {clear:both;border-top:4px #027fd5 solid;margin-top:30px;padding:15px 0px;font-size:12px;}
footer a {color:#000;text-decoration:underline;}
footer a:hover {text-decoration:none;}


На последней вкладке "Галерея" не распознает шрифт.
Я новичок и совсем не понимаю, чего не хватает?




Автор: OLEX
Дата сообщения: 12.12.2013 13:06
guliaish
Покажите в сети страницу.
Автор: guliaish
Дата сообщения: 12.12.2013 13:08
Она только на компе
Автор: OLEX
Дата сообщения: 12.12.2013 13:21
guliaish
у вас вобще меню не видно, цвет ссылок совпадает с цветом фона. А с шрифтом там все ок.
Автор: guliaish
Дата сообщения: 13.12.2013 09:42
Спасибо. Уже разобралась
Автор: vs6262
Дата сообщения: 17.12.2013 18:22
кто подскажет как сделать правильно с css

есть 3 div'а т.е. один основной а внутри 2.

нужно сделать так чтобы внутренние строились один за другим по горизонтали ?
Автор: Cheery
Дата сообщения: 17.12.2013 19:11
vs6262

Цитата:
нужно сделать так чтобы внутренние строились один за другим по горизонтали

float: left или float: right
Автор: OLEX
Дата сообщения: 17.12.2013 23:18
или dispaly: inline-block
Автор: vs6262
Дата сообщения: 22.12.2013 19:23
спасибо!

мой с партнером вебсайт
http://www.bw-webcreators.de/

чтото я наплодил сам, слишком много свободного места снизу, вроде у дополнительных visibility:hidden; div'ов выставил top:; с большим минусом.

и не пойму в чем дело. может кто поможет ?

Добавлено:
русский и английский на моем вебсайте будет попозже...
Автор: Cheery
Дата сообщения: 22.12.2013 20:43
vs6262
пора бы уже понять, что visibility: hidden не убирает элемент со страницы. делает невидимым - да, но резервирует место под него.
используйте display: none;
либо используйте абсолютное позиционирование для невидимых элементов и размещайте их за пределами страницы, либо в нижних слоях.
Автор: vs6262
Дата сообщения: 22.12.2013 21:52
Cheery
еще раз большие пасибки!
Автор: 324280
Дата сообщения: 28.12.2013 18:52
Вопрос: нужно подправить настройки сайта на Joomla 2.5. Посмотрел с Firebug в каком месте меняются. Попробовал с помощью Firebug изменить - результат получил. Но, уже задолбся искать в каком файле нужно править эти настройки. Все перерыл...
Детали (смотрю в Firebug):
1.код в index.php:

Код:
<div id="zt-component" class="clearfix">
Автор: Cheery
Дата сообщения: 28.12.2013 18:57
324280
Вы разницу между scolor.css и scolor3.css замечаете?
Автор: 324280
Дата сообщения: 28.12.2013 19:40
Cheery,
господи, да это опечатка. Это файл scolor3.css.
Если быть уже совсем точным, то файл называется: scolors3.css.

Добавлено:
Cheery,
блин, спасибо!!!
Заработался... название файла правильное, но файл не из той дирректории.
Нужно больше отдыхать - мозг будет более внимательным.
СПАСИБО!!!!!
Автор: Cheery
Дата сообщения: 28.12.2013 22:08
324280

Цитата:
но файл не из той дирректории.

в том же firebug можно посмотреть URL подгружаемого css файла.
Автор: unreal666
Дата сообщения: 29.12.2013 13:53
можно ли как-то на CSS составить селектор для "вычленения" только узла, являющегося первым у родителя. Именно узла, а не элемента.
А то под подобное:

Код: pre > code:first-child {}
Автор: Cheery
Дата сообщения: 29.12.2013 23:27
unreal666
CSS это не может.
тот же перенос строки между тегами, по сути, уже текстовый нод, к которым CSS явным образом не применить
Автор: unreal666
Дата сообщения: 30.12.2013 02:51
жаль.
Придется после <pre> вставлять какой-нибудь бестолковый тег
JS для такого чего-то не хочется использовать.
Автор: Cheery
Дата сообщения: 30.12.2013 06:17
unreal666

Цитата:
JS для такого чего-то не хочется использовать.

http://jsfiddle.net/4qdG8/


Код: var els = document.getElementsByTagName('pre');
for (var i = 0; i < els.length, e = els[i]; i++)
{
if (child = e.firstChild) {
while (child.nodeType == 3 && child.nodeValue.trim().length == 0)
child = child.nextSibling;
if (child.nodeType != 3)
child.className += ' highlight';
}
}
Автор: newbies
Дата сообщения: 31.12.2013 09:57
Здравствуйте, всех с наступающим, кто поможет мне решить проблемку небольшую,
создал тему тут: http://forum.ru-board.com/topic.cgi?forum=31&topic=19411#lt
Автор: Krimatorij
Дата сообщения: 31.12.2013 14:21
Люди, есть сайт на иностранном языке. Я хочу перевести некоторые элементы страницы (например, текст на кнопках) на русский язык. Думаю создать свой стиль и использовать его в дополнении для firefox "stylish".

Помогите начать. Вот кусок кода страницы:

Код:
<div id="toolbar" class="cmd-panel">

<div class="btn-group btns-filelist" style="">
<div class="item">
<span id="tbBack" class="y-btn-back y-btn-back-disable back show" title="" data-cn="back">

Заменить_этот_текст_переводом

</span>
</div>
Автор: Cheery
Дата сообщения: 01.01.2014 05:29
Krimatorij
то, что вы хотите, не делается через css - как вы ему отдавать свой перевод будете?
вручную прописывать для каждого блока текста? используйте тогда уж greasemonkey и делайте что угодно с помощью javascript
Автор: Weinaum
Дата сообщения: 23.01.2014 12:35
Приветствую, вот на этом сайте, в разделе демонстрационного портфолио, превью вверху имеют рамку, имитация браузера, собственно, как они все там сделали вопросов нет, видно все.
Но что то подумал, и захотел сделать так же, только обычными стилями для border-a.
И что то застрял, не получается png с 3-мя точками на бордер наложить - так нельзя что ли? Border-image по кругу все ставит, а я хочу просто: задал бордер - топ - размер, солид, цвет, радиус, сверху эти 3 точки - и что то не получается....
Автор: Cheery
Дата сообщения: 23.01.2014 19:57
Weinaum

Цитата:
не получается png с 3-мя точками на бордер наложить - так нельзя что ли

там это не border..

да все можно, смещаете див в нужное положение и рисуете в нем что хочется
Автор: Weinaum
Дата сообщения: 24.01.2014 08:56
Cheery
спасибо, понятно, да, я вижу, что это там не border - просто вспомнил, как то на хабре была статья про возможности border в css3, там такие интересные были показаны возможности, что можно нарисовать средствами только css border. Вот поэтому и подумал, можно ли такими же средствами и тут обойтись..
В любом случае, это не проблема, конечно.

Страницы: 12345678910111213141516171819202122232425262728293031

Предыдущая тема: Вопрос к знатокам CSS


Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.