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

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



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Интересовал этот вопрос давно, никак не доходят руки в нем разобраться, как не нарушая стандарты (не используя <table height=100%>) спозиционировать элемент точно в центре видимой области страницы. Как увеличить страницу до размеров видимой области - при малом количестве контента на странице. Не используя javascript и не имея представления о разрешении экрана пользователя.

Всего записей: 238 | Зарегистр. 15-07-2005 | Отправлено: 13:02 07-12-2007
Kai

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Что ж, обновим тему 2007 года
 
Итак:


Вопрос к знатокам CSS


Код:
<ol>
 
<li>
<p class="mystyle">параграф1</p>
<p>параграф2</p>
</li>
 
<li>
...
</li>
 
</ol>

 
В классе "mystyle" (помимо прочего) указывается центрирование текста.
Однако в итоге маркер списка (цифра счетчика <li>) центрируется вместе с текстом первого параграфа.
 
Как сделать так, чтобы сама цифра оставалась скраю на той же строке? Наверное это возможно, т.к. <p> дочерний блок.
 
Только с помощью CSS (без изменения структуры, &nbsp;, доп. параграфа и т.д.)

Всего записей: 366 | Зарегистр. 23-10-2003 | Отправлено: 19:54 12-04-2009 | Исправлено: Kai, 20:02 12-04-2009
MakcRX



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Проблема такая:
Необходимо в таблице задать шрифт Cambria, 11px, small-caps, жирный.
 
Написал такой код:
 
  table.centertable
    {
      font-family: Cambria;
      font-size: 11px;
      font-weight: bold;
      font-variant:small-caps;
      color: #FEF8F8;
      table-layout: fixed;
    }
 
Но в разных браузерах отображается по-разному:
В Опере слишком мутно, а в IE6 заглавные буквы одинакового размера.
 
Помогите решить эту проблему. Заранее спасибо)

Всего записей: 1 | Зарегистр. 13-04-2009 | Отправлено: 15:41 13-04-2009
klimusu



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

Код:
 
.mybtn{
    background-image:url("images/button_main.png");
    width: 190;  
    height: 27;        
    padding: 0px 0px;
}
 

 
Далее ссылка href, где в место текста картинка на файл с текстом.
 
получилось так:
   
 
Теперь захотел чтобы при наведении курсора у меня кнопка подсвечивалась.
Ну добавил еще одни стиль с hover

Код:
 
.mybtn  a:hover{
  background-image:url("images/button_main_act.png");
}
 

 
Возникла проблема, в IE все отображается корректно, а вот в firefox и opera, выделение при наведении сползает наполовину вниз
   
 
Как побороть недуг?

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 11:39 21-12-2009
andead



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

Код:
.mybtn:hover{  
  background-image:url("images/button_main_act.png");  
}


----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 11:49 21-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
эм.. в IE и FF перестало подсвечиваться, а вот в Opera теперь все работает

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 11:53 21-12-2009 | Исправлено: klimusu, 11:54 21-12-2009
andead



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

----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 12:04 21-12-2009
klimusu



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

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 12:08 21-12-2009
andead



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

Код:
.mybtn  a:hover{  
  display: block;
  width: 190;  
  height: 27;
  background-image:url("images/button_main_act.png");  
}

 

Цитата:
сайт локальный

http://forum.ru-board.com/topic.cgi?forum=11&topic=4411


----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 12:35 21-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
перенес проблемную часть на бесплатный хостинг, адрес http://klim.coolpage.biz/
 
в опере работает, фф и ие не хотят  
 
сейчас в css написано .mybtn:hover

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 15:16 21-12-2009
andead



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

Код:
.mybtn a:link,
.mybtn a:visited
{
  display: block;
  background-image:url("images/button1.png");
  width: 50;  
  height: 27;        
}  
 
.mybtn a:hover ,
.mybtn a:active  
{
    background-image:url("images/button2.png");
}
 


----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 15:57 21-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
Спасибо, вы меня спасли

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 16:34 21-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно ли как-то сделать чтобы локальные настройки размера шрифта на компе пользователя не применялись к сайту?
допустим делаю картинки, фиксированной ширины, пишу на них текст.
Затем пользоветель открывает у себя (у него системный шрифт сделат максимального размера - хорошо для глаз) страничку, а она вся расползлась.

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 13:46 23-12-2009
andead



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

----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 14:21 23-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
спасибо, сейчас буду пробовать, а можно ли на сайте сделать текст шрифтом, который не установлен у пользователей. Есть ли возможность подгружать шрифт с сайта прозрачно для пользователя?

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 14:45 23-12-2009
andead



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
klimusu
http://vremenno.net/design/use-any-font-on-website/
http://habrahabr.ru/blogs/webdev/52755/
http://habrahabr.ru/blogs/webdev/61033/
http://cssing.org.ua/2009/10/24/font-face/
http://habrahabr.ru/blogs/css/64596/
http://www.umade.ru/log/2009/07/font-embed-eot-font-face/
http://habrahabr.ru/blogs/javascript/54109/
http://habrahabr.ru/blogs/webdev/43370/

----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 15:07 23-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
спасибо, сделал с помощью последней ссылки через js. работает.
Хотя не.. не работает. Захожу с компа где не установлен указанный мной шрифт, на страничке обычный стандартный вариант.
 
Не совсем понятно где скрипт typeface-0.14.js связывается с скриптом alibi_regular.typeface.js
1. Я добавил оба скрипта в хедер страницы
2. на странице написал  
    <div class="typeface">
      This text for test. Font=ALIBI.
    </div>
 
3. в css написал
.typeface {
    font:normal 36px ALIBI;
    color:blue;
}
 
получилось что я в css указал имя шрифта, который нужно загружать.  
где привязка к файлу alibi_regular.typeface.js?

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 10:00 24-12-2009 | Исправлено: klimusu, 10:35 24-12-2009
klimusu



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
andead
 
.mybtn a:link,
.mybtn a:visited
{
  display: block;
  background-image:url("images/button1.png");
  width: 50;  
  height: 27;        
}  
 
.mybtn a:hover ,
.mybtn a:active  
{
    background-image:url("images/button2.png");
}  
 
я применяют данный класс mybtn к ячейке таблицы, и хочу чтобы у меня текст в ячейке был выровнен по вертикали, дописываю в класс vertical-align: middle; но изменения не работают, до тех пор, пока я не удалю размеры width: 50;  height: 27;  
 
как решить проблему?

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 14:56 27-12-2009
andead



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

----------
мой блог

Всего записей: 1821 | Зарегистр. 22-09-2005 | Отправлено: 15:06 27-12-2009
klimusu



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

Цитата:
ссылку на не рабочий пример

http://klim.coolpage.biz/
 
CSS:
 
.mybtn a:link,
.mybtn a:visited
{
    display: block;
    /*background-image:url("images/button1.png");*/
    width: 200;  
    height: 50;  
    text-align: center;
    vertical-align: middle;  
}  
 
 
 
html:
 
<table border="1">
         <tr>
          <td class="mybtn"><a href=test>TEXT1</a></td>
          </tr>
          <tr>
          <td class="mybtn"><a href=test>TEXT2</a></td>
          </tr>
          <tr>
          <td class="mybtn"><a href=test>TEXT3</a></td>
          </tr>
          <tr>
          <td class="mybtn"><a href=test>TEXT4</a></td>
         </tr>
    </table>

Всего записей: 931 | Зарегистр. 23-01-2006 | Отправлено: 16:33 27-12-2009
Открыть новую тему     Написать ответ в эту тему

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