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

» Вопросы по CSS

Автор: Dr Logic
Дата сообщения: 07.12.2007 12:02
Интересовал этот вопрос давно, никак не доходят руки в нем разобраться, как не нарушая стандарты (не используя <table height=100%>) спозиционировать элемент точно в центре видимой области страницы. Как увеличить страницу до размеров видимой области - при малом количестве контента на странице. Не используя javascript и не имея представления о разрешении экрана пользователя.
Автор: Kai
Дата сообщения: 12.04.2009 18:54
Что ж, обновим тему 2007 года

Итак:


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


Код: <ol>

<li>
<p class="mystyle">параграф1</p>
<p>параграф2</p>
</li>

<li>
...
</li>

</ol>
Автор: MakcRX
Дата сообщения: 13.04.2009 14:41
Проблема такая:
Необходимо в таблице задать шрифт 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 заглавные буквы одинакового размера.

Помогите решить эту проблему. Заранее спасибо)
Автор: klimusu
Дата сообщения: 21.12.2009 10:39
Добрый день.

Создал кнопку

Стиль:

Код:
.mybtn{
    background-image:url("images/button_main.png");
    width: 190;
    height: 27;        
    padding: 0px 0px;
}
Автор: andead
Дата сообщения: 21.12.2009 10:49
klimusu

Код: .mybtn:hover{
background-image:url("images/button_main_act.png");
}
Автор: klimusu
Дата сообщения: 21.12.2009 10:53
andead
эм.. в IE и FF перестало подсвечиваться, а вот в Opera теперь все работает
Автор: andead
Дата сообщения: 21.12.2009 11:04
ссылку на пример
Автор: klimusu
Дата сообщения: 21.12.2009 11:08
klimusu
сайт локальный
Автор: andead
Дата сообщения: 21.12.2009 11:35

Код: .mybtn a:hover{
display: block;
width: 190;
height: 27;
background-image:url("images/button_main_act.png");
}
Автор: klimusu
Дата сообщения: 21.12.2009 14:16
andead
перенес проблемную часть на бесплатный хостинг, адрес http://klim.coolpage.biz/

в опере работает, фф и ие не хотят

сейчас в css написано .mybtn:hover
Автор: andead
Дата сообщения: 21.12.2009 14:57

Код: .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");
}
Автор: klimusu
Дата сообщения: 21.12.2009 15:34
andead
Спасибо, вы меня спасли
Автор: klimusu
Дата сообщения: 23.12.2009 12:46
Можно ли как-то сделать чтобы локальные настройки размера шрифта на компе пользователя не применялись к сайту?
допустим делаю картинки, фиксированной ширины, пишу на них текст.
Затем пользоветель открывает у себя (у него системный шрифт сделат максимального размера - хорошо для глаз) страничку, а она вся расползлась.
Автор: andead
Дата сообщения: 23.12.2009 13:21
указывайте размер в пикселях
Автор: klimusu
Дата сообщения: 23.12.2009 13:45
andead
спасибо, сейчас буду пробовать, а можно ли на сайте сделать текст шрифтом, который не установлен у пользователей. Есть ли возможность подгружать шрифт с сайта прозрачно для пользователя?
Автор: andead
Дата сообщения: 23.12.2009 14:07
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/
Автор: klimusu
Дата сообщения: 24.12.2009 09:00
andead
спасибо, сделал с помощью последней ссылки через js. работает.
Хотя не.. не работает. Захожу с компа где не установлен указанный мной шрифт, на страничке обычный стандартный вариант.

Не совсем понятно где скрипт typeface-0.14.js связывается с скриптом alibi_regular.typeface.js
1. Я добавил оба скрипта в хедер страницы
2. на странице написал
[no] <div class="typeface">
This text for test. Font=ALIBI.
</div>[/no]

3. в css написал
[no].typeface {
    font:normal 36px ALIBI;
    color:blue;
}[/no]

получилось что я в css указал имя шрифта, который нужно загружать.
где привязка к файлу alibi_regular.typeface.js?
Автор: klimusu
Дата сообщения: 27.12.2009 13:56
andead
[no]
.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");
}
[/no]
я применяют данный класс mybtn к ячейке таблицы, и хочу чтобы у меня текст в ячейке был выровнен по вертикали, дописываю в класс vertical-align: middle; но изменения не работают, до тех пор, пока я не удалю размеры width: 50; height: 27;

как решить проблему?
Автор: andead
Дата сообщения: 27.12.2009 14:06
ссылку на не рабочий пример
Автор: klimusu
Дата сообщения: 27.12.2009 15:33

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

http://klim.coolpage.biz/

CSS:
[no]
.mybtn a:link,
.mybtn a:visited
{
    display: block;
    /*background-image:url("images/button1.png");*/
    width: 200;
    height: 50;
    text-align: center;
    vertical-align: middle;
}
[/no]


html:
[no]
<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>
[/no]
Автор: andead
Дата сообщения: 27.12.2009 15:47
ну у вас ячейки растягиваются по ширине контента, в данном случае - ссылке (200*50), вертикально выравниваться там нечему, потому что ссылка занимают всю ячейку, а у элементов с display:block нет свойства vertical-align, решениий есть несколько - указывать размер ячеек а не ссылок, либо ссылкам указать line-height:50px
Автор: klimusu
Дата сообщения: 27.12.2009 16:05
т.е. нужно сделать класс
.mybtn{
width: 200;
height: 50;
}

а из других классов убрать сведения о размере?
Автор: andead
Дата сообщения: 27.12.2009 16:09
да, ссылкам не нужно назначать класс mybtn, для них уже есть стиль .mybtn a:...
Автор: klimusu
Дата сообщения: 27.12.2009 17:21
появился еще один побочный эффект,
теперь фон у ячейки не весь, а только под надписью + когда навожу курсор на ссылку, фон меняется, но тоже только под ссылкой, а хочется чтобы вся ячейка была залита фоном.

если укажу в .mybtn a:.. размер, то фон заливается полностью и выделение работает, но тогда мы возвращаемся к варианту, который описан выше, нельзя выставить текст по центру.

если я в .mybtn укажу фон, ячейка заливается полностью, ссылка по середине, но выделение только под текстом, а не всей ячейки.

вот код, который сейчас установлен:
[no]
.mybtn{
    width: 180;
height: 50;
text-align: center;
    vertical-align: middle;
    background-image:url("images/button1.png");
}

.mybtn a:link,
.mybtn a:visited
{
    display: block;
    /*background-image:url("images/button1.png");*/
}

.mybtn a:hover ,
.mybtn a:active
{
background-image:url("images/button2.png");
}
[/no]

а если указать размеры в классе .mybtn a:hover, .mybtn a:active то при наведении курсора, текст будет подпрыгивать к верхнему краю
Автор: andead
Дата сообщения: 27.12.2009 17:25

Цитата:
либо ссылкам указать line-height:50px

Автор: klimusu
Дата сообщения: 27.12.2009 17:26
andead
это означает что он спустится на 50px, если у меня в табличке будет 5 слов, которые разьедутся в две-три строки, то уже будет не по центру
Автор: andead
Дата сообщения: 27.12.2009 17:29

Код: .mybtn:hover
{
background-image:url("images/button2.png");
}
Автор: klimusu
Дата сообщения: 27.12.2009 17:34

Цитата:
з.ы.: не понимаю зачем вам таблицы

ну я таким образом делаю вертикальное меню кнопок
Автор: andead
Дата сообщения: 27.12.2009 18:09

Код: <ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
</ul>
Автор: FUTURiTY
Дата сообщения: 30.12.2009 21:28
Подскажите как редактировать "сжатые" CSS файлы?
Чем восстановить исходное форматирование CSS кода?

Спасибо!

Страницы: 12345678910111213141516171819202122232425262728293031

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


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