» Вопросы по CSS

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

Что ж, обновим тему 2007 года

Итак:

---

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

Код: <ol>

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

<li>
...
</li>

</ol>

Проблема такая:
Необходимо в таблице задать шрифт 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 заглавные буквы одинакового размера.

Помогите решить эту проблему. Заранее спасибо)

Добрый день.

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

Стиль:

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

klimusu

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

andead
эм.. в IE и FF перестало подсвечиваться, а вот в Opera теперь все работает

ссылку на пример

klimusu
сайт локальный

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

andead
перенес проблемную часть на бесплатный хостинг, адрес http://klim.coolpage.biz/

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

сейчас в css написано .mybtn:hover

Код: .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");
}

andead
Спасибо, вы меня спасли

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

указывайте размер в пикселях

andead
спасибо, сейчас буду пробовать, а можно ли на сайте сделать текст шрифтом, который не установлен у пользователей. Есть ли возможность подгружать шрифт с сайта прозрачно для пользователя?

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/

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?

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;

как решить проблему?

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

Цитата:

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

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]

ну у вас ячейки растягиваются по ширине контента, в данном случае - ссылке (200*50), вертикально выравниваться там нечему, потому что ссылка занимают всю ячейку, а у элементов с display:block нет свойства vertical-align, решениий есть несколько - указывать размер ячеек а не ссылок, либо ссылкам указать line-height:50px

т.е. нужно сделать класс
.mybtn{
width: 200;
height: 50;
}

а из других классов убрать сведения о размере?

да, ссылкам не нужно назначать класс mybtn, для них уже есть стиль .mybtn a:...

появился еще один побочный эффект,
теперь фон у ячейки не весь, а только под надписью + когда навожу курсор на ссылку, фон меняется, но тоже только под ссылкой, а хочется чтобы вся ячейка была залита фоном.

если укажу в .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 то при наведении курсора, текст будет подпрыгивать к верхнему краю

Цитата:

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

andead
это означает что он спустится на 50px, если у меня в табличке будет 5 слов, которые разьедутся в две-три строки, то уже будет не по центру

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

Цитата:

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

ну я таким образом делаю вертикальное меню кнопок

Код: <ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
</ul>

Подскажите как редактировать "сжатые" CSS файлы?
Чем восстановить исходное форматирование CSS кода?

Спасибо!