Квадратные ссылки
Квадратные ссылки не совсем правильное название, точнее ссылки не зависящие от ширины текста, входящего в них.
Самое простое решение - использовать свойство display со значением inline-block, генерирующим элемент, внутренняя чать которого форматируется как блочный <div>, а внешняя как встроенный <span>. После этого у ссылки можно задать ширину и высоту, как у дива. Её текст центрируется по горизонтали свойством text-align, а по вертикали свойством line-height (высота строки), значение которого должно быть равным высоте блока. Расстояние между каждым блоком ссылки будет 4px.
.kvadrat-link a {
display: inline-block;
width:33px;
height:27px;
line-height:27px;
text-align:center;
border: solid 1px #ccc;
}
.kvadrat-link a:hover {
color:#eee;
background-color:#666;
border: solid 1px #0c0;
}К сожалению браузеры Mozilla Firefox 1.5 и 2 не поддерживают свойство display: inline-block, можно конечно использовать хаки исправляющие этот недостаток, но тогда верстка станет невалидной.
Оптимальным решением будет использование display: block, создающим блочный элемент, и float: left, вырвнивающим его по левой стороне. Текст ссылки внутри блока центрируется так же как при использовании display: inline-block. Единственный минус - получившиеся ссыки нельзя выровнять по центру.
.kvadrat-link-alternate a {
display: block;
float: left;
border: solid 1px #ccc;
height:27px;
width:33px;
text-align:center;
line-height:27px;
}
.kvadrat-link-alternate a:hover {
color:#eee;
background-color:#666;
border: solid 1px #0c0;
}Заодно приведу пример ссылок без жесткого ограничения по ширине. Это реализуется с помощью свойства padding. Следует учесть что у блока, в котором находятся ссылки, нужно задать внутренний верхний и нижний отступы равными padding ссылок.
.pryamoyg-link{
padding:5px 0;
}
.pryamoyg-link a {
padding:5px 10px;
border: solid 1px #ccc;
}
.pryamoyg-link a:hover {
color:#eee;
background-color:#666;
border: solid 1px #0c0;
}Полезные ссылки: Горизонтальное меню без float
Ранее Иконки для Блоголета | Позже JS: HTML редактор