Вопросы по CSS

Где можно найти хороший сборник рецептов по CSS?

Например, интересует следующее.

1. Сделать текстовую кнопку вида:



2. Выровнять поля по вертикали. Например:

Имя: -------------- Василий
Фамилия: -------- Пупкин
Год рождения: -- 1976

Только вместо дефисов - обычные пробелы.

Ну и разные другие фокусы. Типа "сборник рецептов по CSS"

Мне этот сервис нравится: http://www.w3schools.com/css/
Там есть и туториал, и редактор встроенный

На webmascon.com иди. Там много полезного по этой теме. Особенно на форуме и помогают охотно

Шпасибо, добавил в bookmarks

1 Делаешь таблицу либо див,создаешь для неё стиль в котором описываешь все параметры
нв твоём случае например

<div class="button1">зарегестрироваться</div>

стиль

.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #000000;
background-color: #FFFF00;
text-align: center;
width: 200px;
border: 1px solid #000000;
padding-top: 3px;
padding-bottom: 3px;
font-weight: bold;
}
если делать нормальную кнопку,тогда лучше использовать псевдо класс селекторы

2.Не совсем понял что значит
вместо дефисов - обычные пробелы.

как вариант делаешь 3х колоночную таблицу, к средней колонке делаешь стиль, в котором боттом бордер делаешь дотлайн

по типу
.border1 {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
}

можешь так же в среднюю колонку вставить див и там уже с ним поиграться по расположению в ячейке маргином паддингом

Vigo писал:

если делать нормальную кнопку,тогда лучше использовать псевдо класс селекторы

А что это такое?

Vigo писал:

как вариант делаешь 3х колоночную таблицу

А без таблиц возможно это?

Петр Кроликов писал:

А что это такое?

http://members.aol.com/jbjtutor/css/pagec_53.html

Петр Кроликов писал:

А без таблиц возможно это?

возможно,но
советую сначала хоть с таблицами разобраться,хоть в тему вьедешь

Vigo писал:

советую сначала хоть с таблицами разобраться,хоть в тему вьедешь

Дык, что такое стили я знаю. Просто использую сейчас, когда надо сделать, допустим, ссылку без подчеркивания, или текст выровнять по justify.

Мне интересно уже разные продвинутые вещи посмотреть.

А то "верстка без таблиц" много раз слышал, но ни разу не видел.

http://www.stylegala.com/features/css-reference/
держи, читай

Kass писал:

http://www.stylegala.com/features/css-reference/

Спасибо, но это справочник, а мне нужен cookbook

Петр Кроликов писал:

А то "верстка без таблиц" много раз слышал, но ни разу не видел.

здесь посмотри )
http://www.cssbeauty.com/gallery/

Еще в копилку http://alistapart.com/ http://stylegala.com/ http://www.quirksmode.org/

oswd.org - куча темплейтов, в основном на css

http://css.maxdesign.com.au/listamatic/

Спасибо, продолжаю смотреть присланные ссылки

Цитата:

Имя: -------------- Василий Фамилия: -------- Пупкин Год рождения: -- 1976

Что-то типа этого

Код:

<style type="text/css"> .list {margin: 0; padding: 0;} .list li {list-style: none; margin: 0; padding: 0; clear: both;} .list span {display: block; width: 200px; float: left; border: 1px dotted #CCC;} </style> .... <ul class="list"> <li><span>Имя:</span><span>Василий</span></li> <li><span>Фамилия:</span><span>Пупкин</span></li> <li><span>Год рождения:</span><span>1976</span></li> </ul>

Для наглядности добавил бордер для структурных элементов.

2igorr А как сделать отцентрованный блок _фиксированной_ ширины?
Как отцентровать штрину, заданную в % - знаю

Попробовал в лоб - не во всех браузерах прокатило...

igorr писал:

Что-то типа этого <li><span>Имя:</span><span>Василий</span></li> <li><span>Фамилия:</span><span>Пупкин</span></li>

Супер! Теперь знаю к кому обратиться на крупные проекты по верстке

А как сделать разную ширину столбцов? А то у меня получаются все одинаковые.

Догадался сам после недолгого раздумья:
<span style='width:30px'>

Только не получается сделать так, чтобы пустой столбец тоже отображался, а не складывался в точку.

pierx, вот так:

Код:

<style type="text/css"> .centercollumn {width: 700px; margin: auto;} </style>

Цитата:

Только не получается сделать так, чтобы пустой столбец тоже отображался, а не складывался в точку.

Неразрывный пробел добавить попробуй:

Код:

<style type="text/css"> .list {margin: 0; padding: 0;} .list li {list-style: none; margin: 0; padding: 0; clear: both;} .list span {display: block; width: 200px; float: left; border: 1px dotted #CCCCCC;} .list .col2 {width: 100px;} </style> ... <ul class="list"> <li><span>Имя:</span> <span class="col2">Василий</span></li> <li><span>Фамилия:</span> <span class="col2">Пупкин</span></li> <li><span>Год рождения:</span> <span class="col2">1976</span></li> <li><span>Пустой столбец:</span> <span class="col2">&nbsp;</span></li> </ul>