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

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

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

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
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Scorpion71
К сожалению, это не клуб телепатов. Мы тоже не знаем, где искать какой-то стиль навигации в каком-то шаблоне.
 
CoolCmd

Цитата:
Но есть один косяк.

Это фича

Код:
.container{
min-width: 800px;
max-width: 1200px;  
margin: auto;
}

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 20:27 06-02-2011
Scorpion71



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
S0ldier,вот всё что нашёл:
 
Это в base.css:
/*разбиение на страницы*/
.navigation {
    color:#666;  
    border:0px;
    padding: 2px;
}
 
.navigation a:link,
.navigation a:visited,
.navigation a:hover,
.navigation a:active {
    text-decoration: none;
    color: #636363;
    background-color: #F9F9F9;
    border: 1px solid #E6E6E6;
    padding: 3px 6px;
}
 
.navigation a:hover {
    background: #61a5cf;
    color: #fff;
    border-color: #61a5cf;
}
 
.navigation span {
    text-decoration: none;
    background-color: #fff;
    padding: 3px 6px;
    border: 1px solid #E6E6E6;
    color: #ccc;
}
 
Это в blocks.css:
 
/*left navigation*/
.leftside .bvnav .dtop,
.leftside .bpartn .dtop { height: 45px; }
.leftside .bvnav .dcont,
.leftside .bpartn .dcont {
    padding-top: 0;
    padding-bottom: 16px;
    margin: 3 8px;
    width: 200px;
}
 
.bvnav ul, .bvnav ul li,
.bpartn ul, .bpartn ul li { list-style: none; margin: 0; padding: 0; display: block; }
 
/*НАВИГАЦИЯ РАЗДЕЛОВ*/
.bvnav li a {
    text-decoration: none !important;
}
 
.bvnav li  {
    display: block;
    cursor: pointer;
    text-decoration: none !important;
    background: #ffffff url("../images/bvnav_link.png") no-repeat 0px -24px;
    width: 100%;
}
 
.bvnav li:hover {
    background: #e6f2f9 url("../images/bvnav_link.png") no-repeat 0px 0px;
    color: #ea5c24;
}
 
ul.sample-menu { padding:0;margin:10px 15px; }
ul.sample-menu li { padding: 0;margin: 1px 0 0 0;list-style:none;}
ul.sample-menu li ul { padding:0;margin:0; text-indent:20px; font-weight:normal;}
ul.sample-menu li ul li ul { padding:0;margin:0; text-indent:40px; font-weight:normal; font-style:italic;}
ul#my-menu a { padding-left:20px; }
ul#my-menu .parent a.collapsed { background:url('../images/arrow_col.png') 2px 5px no-repeat; display:block;}
ul#my-menu .parent a.expanded { background:url('../images/arrow_exp.png') 2px 5px no-repeat; display:block;}
 
/*НАВИГАЦИЯ ПАРТНЕРОВ SAPE*/
.bpartn li { display: block; line-height: 14px; }
.bpartn li {
    background: #f2f8fb url("../images/bpartn_links.png") no-repeat 0 0;
    width: 100%;
}
.bpartn li:hover { background: #fff url("../images/bpartn_links.png") no-repeat 0 -100px; }
.bpartn li div { padding: 5px 8px 5px 12px; }
.bpartn li div { background: url("../images/bpartn_links_btm.png") no-repeat 0 100%; }
.bpartn li:hover div { background: url("../images/bpartn_links_btm.png") no-repeat 100% 100%; }

Всего записей: 43 | Зарегистр. 15-06-2009 | Отправлено: 22:32 06-02-2011
S0ldier



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

Код:
.navigation {
margin-top: 1em;
...
}

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 22:43 06-02-2011
evoroz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Scorpion71
Если совет S0ldier не поможет, лучше адрес сайта. Обычно стиль ставится на блок.
В коде его можно найти.

Всего записей: 3491 | Зарегистр. 30-03-2002 | Отправлено: 23:06 06-02-2011
miranon



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Помогите пожалуйста решить такую проблему:
 
Сайт: http://new.illusiy.net
В Firefox меню слева отображается нормально, в Internet Explorer ( 7, 8 ) буквы не сглаживаются. Проблема в css параметре display:block; В IE он почему то неправильно работает. Если параметр убираю, буквы нормальные но меню соответственно всё улетает влево. Также почему то в IE не работает seperator.png
 
Вот код:
 

Код:
.side_links a {
    display:block;
    padding:8px 0px;
    margin-right:4px;
    text-align:right;
    background:url(Images/seperator.png) no-repeat top right;
    font-size:1.5em;
    font-weight:lighter;
    text-transform:uppercase;
    outline:none;
}

 
Кто нибудь может помочь?

Всего записей: 504 | Зарегистр. 03-06-2004 | Отправлено: 23:30 06-02-2011 | Исправлено: miranon, 23:32 06-02-2011
Scorpion71



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

Всего записей: 43 | Зарегистр. 15-06-2009 | Отправлено: 23:38 06-02-2011
S0ldier



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

 
miranon
Оберните каждую ссылку меню в дополнительный div.

Код:
div.linkouter {
display:block;
padding: 8px 0px;
margin-right: 4px;
text-align: right;
background: url(Images/seperator.png) no-repeat top right;
}
 
.side_links a {
font-size: 1.5em;
font-weight: lighter;
text-transform: uppercase;
outline: none;
}


Код:
<div class="linkouter"><a href="..." id="...">...</a></div>

 
Похоже, что-то не так со скриптами. Обратите внимание, что и в этом случае при плавном появлении страницы шрифты искажаются, и только потом приходят в норму.

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 00:08 07-02-2011
CoolCmd



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

Цитата:
Это фича
О спасибо, пропустил этот кусок!
 
Более сложный вопрос по резиновым колонкам с сайта http://www.tinyfluidgrid.com/
Сделал "табличку" по такому же принципу. Вот скрин:
http://savepic.ru/2232084.png
Ширина первой "строки" и нижней рамки (это div-ы) не совпадает с шириной строк в середине. (на скрине обведено красным) Причем разница в 1-2 пиксела плавает в зависимости от ширины браузера.
Косяк в Хроме 8, в лисе все четко!
Можете на сайте http://www.tinyfluidgrid.com/ создать колонки, их правые бордюры тоже будут в Хроме плавать. В лисе опять же все четко.
Либо косяк в Хроме, который где-то в расчетах чета округляет и точность падает, либо нужно как-то подправить css. Но как? Единственный способ сделать одинаковый размер в Хроме - это что бы количество div-ов и их размеры (которые в процентах) совпадали.

Всего записей: 35 | Зарегистр. 05-02-2005 | Отправлено: 00:31 07-02-2011 | Исправлено: CoolCmd, 00:34 07-02-2011
miranon



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
S0ldier
 
Спасибо, заработало, но к сожалению с этим вариантом перестал работать эффект меню fade in / fade out ( когда тушатся неактивные ссылки в меню ). Опять же, в Firefox эффект работает, в IE нет. :/
Есть какие то еще варианты кроме дополнительного div?

Всего записей: 504 | Зарегистр. 03-06-2004 | Отправлено: 01:27 07-02-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
CoolCmd
Нецелые значения размеров, заданных в процентах, разные браузеры могут обрабатывать, то есть переводить в пиксели, по-разному. Издержки округления. Обратите внимание, что в Опере происходит.
 
Интересно, что IE показывает правильно.
 
Добавлено:
miranon
Как и предполагал, дело в jQuery.
 
Пробуйте: http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 01:34 07-02-2011
miranon



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
S0ldier
 
В jQuery я полный чайник. :/ Попробовал применить код по ссылке - ничего не получилось.  
 
Мне кажется все таки проблема в display:block;
Как только я убираю display:block; в IE всё работает нормально ( т.е. всё эффекты jQuery присутствуют ), но проблема в том что тогда ссылки меню улетают влево. Так что думаю как то можно поправить это через CSS, просто не знаю как :/  
 
Вот 2 версии сайта:
С display:block; - http://ak.illusiy.net - корявые буквы, блокируется jQuery?
Без display:block; - http://new.illusiy.net - нормальные буквы с jQuery, меню сместилось влево.
 
В Firefox И Опере с display:block; всё отлично работает, но так как большинство людей всё еще используют IE, хочется для него также настроить нормальное отображение.  

Всего записей: 504 | Зарегистр. 03-06-2004 | Отправлено: 02:30 07-02-2011
S0ldier



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

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

В комментариях приведен рабочий вариант:

Код:
jQuery.fn.fadeTo = function(speed,to,callback) {
    return this.animate({opacity: to}, speed, function() {
        if (to == 1 && jQuery.browser.msie)
            this.style.removeAttribute('filter');
 
        if (jQuery.isFunction(callback))
            callback();
    });
};
 
$(document).ready(function(){
    $("#div").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
    $("#div").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.3); // This should set the opacity back to 30% on mouseout
    });
});

...Текст исправляется, но все равно не то.
 
Добавлено:
http://www.google.com/search?q=jquery+IE+fade+fix&hl=ru
 
Много решений. Будет забавно, если ни одно не подойдет.
 

Цитата:
Как только я убираю display:block; в IE всё работает нормально ( т.е. всё эффекты jQuery присутствуют ), но проблема в том что тогда ссылки меню улетают влево. Так что думаю как то можно поправить это через CSS, просто не знаю как :/  

Проще всего - через таблицу. Иногда они творят чудеса.
 
Или использовать дополнительный див, но тогда тоже придется в JS-коде копаться.

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 03:02 07-02-2011 | Исправлено: S0ldier, 03:28 07-02-2011
CoolCmd



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

Цитата:
Нецелые значения размеров, заданных в процентах, разные браузеры могут обрабатывать, то есть переводить в пиксели, по-разному. Издержки округления.  
 
И ничего нельзя сделать? Вот допустим мне нужен будет аналог colspan...
Может сделать как-то с помощью таблиц, а не div-ов?

Цитата:
Обратите внимание, что в Опере происходит.
В оперу не хожу.

Всего записей: 35 | Зарегистр. 05-02-2005 | Отправлено: 11:41 07-02-2011 | Исправлено: CoolCmd, 11:43 07-02-2011
Scorpion71



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Прошу ещё помощи,сегодня решил проверить сайт в IE,и обнаружил не отображающуюся кнопку в конце страницы,вот скрин:

а вот в FireFox её нету,найти в коде не могу,может кто-то глянет сайт,где она спряталась.

Всего записей: 43 | Зарегистр. 15-06-2009 | Отправлено: 18:52 07-02-2011 | Исправлено: Scorpion71, 18:53 07-02-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
CoolCmd
http://savepic.ru/2232084.png - это то, что нужно сделать?
 
Scorpion71

Цитата:
найти в коде не могу


Код:
<a href="#top"><img src="/templates/zeos/images/top.png"></a>

Картинки нет.

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 22:41 07-02-2011
Scorpion71



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
S0ldier, ещё раз респект

Всего записей: 43 | Зарегистр. 15-06-2009 | Отправлено: 23:21 07-02-2011
CoolCmd



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

Цитата:
http://savepic.ru/2232084.png - это то, что нужно сделать?  
Это то что уже сделано.
Вот допустим нужно закинуть в заголовок длинный текст, т.е. как бы сделать colspan=3 для первой строки.

Всего записей: 35 | Зарегистр. 05-02-2005 | Отправлено: 00:22 08-02-2011 | Исправлено: CoolCmd, 14:14 08-02-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
CoolCmd
Если идти по пути наименьшего сопротивления:

Код:
<table id="maintable">
<tr>
<td id="str1">
Строка 1
</td>
</tr>
<tr>
<td id="str2">
<div id="col1">
Колонка 1
</div>
<div id="col2">
Колонка 2
</div>
<div id="col3">
Колонка 3
</div>
</td>
</tr>
</table>

 
CSS пишете исходя из того, какова должна быть в итоге ширина колонок.

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 23:38 08-02-2011
CoolCmd



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
S0ldier Спасибо.

Всего записей: 35 | Зарегистр. 05-02-2005 | Отправлено: 11:49 09-02-2011
Scorpion71



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите,как на главной странице в DLE прописать модуль,который имеет адрес: http://мой сайт.ru/?do=games ?

Всего записей: 43 | Зарегистр. 15-06-2009 | Отправлено: 13:14 13-02-2011
Открыть новую тему     Написать ответ в эту тему

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

Компьютерный форум 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