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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
vs6262



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

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 05:25 03-12-2013
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
спасибо, как всегда не вижу что то простое.
 
Вот в этом вордпрессовском шаблоне в секции Media Gallery хочу сделать изменение картинки по hover - например, затемнить, или трансформ какой-нибудь симпатичный применить. Картинка, если я правильно вижу, внутри класса image.
Так вот, пытаюсь по a:hover задать background-color или transform, вижу что применяется,но почему то фотография все равно остается сверху. Ну и видно по маленькому - 5px- кусочку между датой и картинкой.
Где-то опять ошибаюсь, как все таки побороть?

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 16:20 06-12-2013
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum
.image a:hover { opacity: 0.5; }

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 17:22 06-12-2013
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
OLEX
это да, это получается, но эффект не тот... я хочу, например, полупрозрачный красный слой наложить - или изначально - без hover - накрыть толстым rgba(0, 0, 0, 0.75) - а по hover приоткрыть где-то до 0.4-0.5.
И вот это не получается пока...

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
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;
}

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 19:56 06-12-2013 | Исправлено: OLEX, 19:58 06-12-2013
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
OLEX
спасибо, вот в этом дело - display: block  
Только почему-то мне пришлось это в hover тоже принудительно записать.
В любом случае, теперь все работает, можно дальше экспериментировать ))

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 21:59 06-12-2013
guliaish

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Помогите.  
 
Есть  
 
 
 
<!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;}
   
 
На последней вкладке "Галерея" не распознает шрифт.
Я новичок и совсем не понимаю, чего не хватает?
 
 
 
 

Всего записей: 5 | Зарегистр. 22-07-2013 | Отправлено: 14:32 12-12-2013
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
guliaish
Покажите в сети страницу.

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 15:06 12-12-2013
guliaish

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

Всего записей: 5 | Зарегистр. 22-07-2013 | Отправлено: 15:08 12-12-2013
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
guliaish
у вас вобще меню не видно, цвет ссылок совпадает с цветом фона. А с шрифтом там все ок.

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 15:21 12-12-2013
guliaish

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо. Уже разобралась

Всего записей: 5 | Зарегистр. 22-07-2013 | Отправлено: 11:42 13-12-2013
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
кто подскажет как сделать правильно с css
 
есть 3 div'а т.е. один основной а внутри 2.  
 
нужно сделать так чтобы внутренние строились один за другим по горизонтали ?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 20:22 17-12-2013
Cheery



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

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

float: left или float: right

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

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:11 17-12-2013
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
или dispaly: inline-block

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 01:18 18-12-2013
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
спасибо!
 
мой с партнером вебсайт  
http://www.bw-webcreators.de/
 
чтото я наплодил сам, слишком много свободного места снизу, вроде у дополнительных visibility:hidden;  div'ов выставил top:;  с большим минусом.
 
и не пойму в чем дело. может кто поможет ?
 
Добавлено:
русский и английский на  моем вебсайте будет попозже...

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 21:23 22-12-2013 | Исправлено: vs6262, 21:34 22-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
пора бы уже понять, что visibility: hidden не убирает элемент со страницы. делает невидимым - да, но резервирует место под него.
используйте display: none;
либо используйте абсолютное позиционирование для невидимых элементов и размещайте их за пределами страницы, либо в нижних слоях.

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

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:43 22-12-2013
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
еще раз большие пасибки!

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 23:52 22-12-2013
324280

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вопрос: нужно подправить настройки сайта на Joomla 2.5. Посмотрел с Firebug в каком месте меняются. Попробовал с помощью Firebug изменить - результат получил. Но, уже задолбся искать в каком файле нужно править эти настройки. Все перерыл...  
Детали (смотрю в Firebug):
1.код в index.php:

Код:
 
<div id="zt-component" class="clearfix">  
 

 
2.ссылается на файл scolor3.css:

Код:
 
#zt-position3-inner, #zt-right .bmodule, #zt-left .bmodule, #zt-position8-inner, #zt-userwrap2-inner .pmodule, #zt-userwrap3 .pmodule, #zt-component, .zt-category, div.ItemsContainer {  
border-bottom: 4px solid #D4D7DB;
border-left: 1px solid #D4D7DB;
border-right: 1px solid #D4D7DB;
border-top: 1px solid #D4D7DB;
}
 

 
Изменить необходимо последние 4 строки на:

Код:
 
border-bottom: 5px solid #ffffff;
border-left: 5px solid #ffffff;
border-right: 5px solid #ffffff;
border-top: 1px solid #ffffff;
 

В Firebuge менял - все правится. А вот где и в каком файле нужно править - не могу найти.
 
3.сам файл scolor.css:

Код:
 
/* CSS Document */  
 ul.menu2 li.current,  
 ul.weblinks li:hover,  
 ul.mostread li:hover,  
 ul.latestnews li:hover,  
 ul.menu2 li:hover {  
   background: url("../images/megata/bullet-hover.png") no-repeat left 50%;  
 }  
 .menusys_mega { border-bottom: 3px solid #03AFB5; }  
 #menusys_mega li:hover a,  
 #menusys_mega li:active a,  
 #menusys_mega li:focus a,  
 #menusys_mega li a.active,  
 #menusys_mega li a.active:hover,  
 #menusys_mega li a.active:active,  
 #menusys_mega li a.active:focus { color: #03AFB5; }  
 #menusys_mega .fancy{ background:url('../images/megata/bkg-mainmenu.png') top left repeat-x; }  
 .logout-button .button.signout,  
 #menusys_mega .zt-field .button.signin { background:#03AFB5; }  
 #menusys_mega li.hasChild.arrow-top { background: url("../images/megata/menu/arrow.png") no-repeat center bottom;}  
 #menusys_mega .subwraptop{ background: url("../images/megata/menu/s-top-center.png") top left repeat-x; }  
 #menusys_mega .subwraptop .subwraptop-left{ background: url("../images/megata/menu/s-top-left.png") top left no-repeat;    }  
 #menusys_mega .subwraptop .subwraptop-right{    background: url("../images/megata/menu/s-top-right.png") top right no-repeat;}  
 #menusys_mega .menusub_mega  .menusub_mega  .subwrapcenter-left{background: url("../images/megata/menu/s2-mid-left.png") top left repeat-y;}  
 #menusys_mega .megacol ul li.hasChild.arrow-top { background: url("../images/megata/menu/arrow2.png") no-repeat right 5px;}  
 #menusys_mega .megacol ul li a:hover,  
 #menusys_mega .megacol ul  li a:active,  
 #menusys_mega .megacol ul  li a:focus,  
 #menusys_mega .megacol ul  li a.active,  
 #menusys_mega .megacol ul  li a.active:hover,  
 #menusys_mega .megacol ul  li a.active:active,  
 #menusys_mega .megacol ul  li a.active:focus{ color: #03AFB5; background:#e7e7e7 url('../images/megata/menu/bullet-hover.png') no-repeat 95% 50% !important;  }  
 #menusys_mega .megacol ul li a:hover .menu-title ,  
 #menusys_mega .megacol ul  li a:active .menu-title ,  
 #menusys_mega .megacol ul  li a:focus .menu-title ,  
 #menusys_mega .megacol ul  li a.active .menu-title ,  
 #menusys_mega .megacol ul  li a.active:hover .menu-title ,  
 #menusys_mega .megacol ul  li a.active:active .menu-title ,  
 #menusys_mega .megacol ul  li a.active:focus .menu-title { color: #03AFB5;}      
   
 #zt-userwrap6-inner2 { border: 1px solid #E8E8E8; padding: 20px; -webkit-border-radius: 5px; border-radius:  5px; }  
 #zt-userwrap6-inner{ padding: 20px 0 0 0 ;}  
 #zt-userwrap6 .container {  background: 0; border:0;}  
 #zt-userwrap7-inner2 { border: 1px solid #E8E8E8; padding: 20px; -webkit-border-radius: 5px; border-radius:  5px; }  
 #zt-userwrap7-inner{ padding: 20px 0 0 0 ;}  
 #zt-userwrap7 .container {  background: 0; border:0;}  
 #zt-footer .container {  background: 0; border:0;}  
 #zt-mainframe-inner {  padding: 20px 0 0 0; }  
 #zt-mainframe-inner2 { border: 1px solid #E8E8E8; padding: 20px; -webkit-border-radius: 5px; border-radius:  5px; }  
 #zt-breadcrumbs .container { background: 0; border:0;}  
 #zt-breadcrumbs .zt-breadcrumbs-inside{ padding: 10px 0 0 0; margin:0; bordeR:0;}  
 #zt-userwrap1-outer {  background: url("../images/megata/bkg-top-pos.png") repeat-x scroll left bottom #03a7ab; }  
 .bkg-control-down{ background:url('../images/megata/bkg-control-toggle.png') no-repeat right -27px; }  
 .bkg-control-up{background:url('../images/megata/bkg-control-toggle.png') no-repeat right 0;}  
 .rtl .bkg-control-down{ background:url('../images/megata/bkg-control-toggle.png') no-repeat left -27px; }  
 .rtl .bkg-control-up{background:url('../images/megata/bkg-control-toggle.png') no-repeat left 0;}  
 .rtl #menusys_mega .megacol ul li.hasChild.arrow-top { background: url("../images/megata/rtl/arrow2.png") no-repeat left 5px;}  
 .rtl #menusys_mega .menusub_mega  .menusub_mega  .subwrapcenter-left{background: url("../images/megata/rtl/s2-mid-left.png") top right repeat-y;}  
 .rtl #menusys_mega  .zt-field  ul li:hover{     background:url('../images/megata/rtl/bullet-hover.png') no-repeat 2px 50% !important; }  
 .rtl #menusys_mega .megacol ul li a:hover,  
 .rtl #menusys_mega .megacol ul  li a:active,  
 .rtl #menusys_mega .megacol ul  li a:focus,  
 .rtl #menusys_mega .megacol ul  li a.active,  
 .rtl #menusys_mega .megacol ul  li a.active:hover,  
 .rtl #menusys_mega .megacol ul  li a.active:active,  
 .rtl #menusys_mega .megacol ul  li a.active:focus{  background:#e7e7e7 url('../images/megata/rtl/bullet-hover.png') no-repeat 5% 50% !important;  }
 

 
Не вижу в этом файле ссылку на необходимый класс. Где рыть?
Help, pls!

Всего записей: 51 | Зарегистр. 30-07-2010 | Отправлено: 20:52 28-12-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
324280
Вы разницу между scolor.css и scolor3.css замечаете?

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

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:57 28-12-2013 | Исправлено: Cheery, 20:58 28-12-2013
324280

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery,
господи, да это опечатка. Это файл scolor3.css.
Если быть уже совсем точным, то файл называется: scolors3.css.
 
Добавлено:
Cheery,
блин, спасибо!!!
Заработался... название файла правильное, но файл не из той дирректории.
Нужно больше отдыхать - мозг будет более внимательным.
СПАСИБО!!!!!

Всего записей: 51 | Зарегистр. 30-07-2010 | Отправлено: 21:40 28-12-2013 | Исправлено: 324280, 21:42 28-12-2013
Открыть новую тему     Написать ответ в эту тему

Страницы: 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