Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.94/48: Рейтинг темы: голосов - 48, средняя оценка - 4.94
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
1

красивые ссылки

28.02.2009, 21:11. Просмотров 8665. Ответов 12
Метки нет (Все метки)

подскажите, пожалуйста, какие есть способы сделать красивые ссылки при помощи css, например сделать фон не однотонным а,например градиентным, если делать фон в виде картинки, то как (если картинка намного шире текста) отцентровать текст по высоте (vertical-align: middle не помогает), а ещё лучше как написать, чтобы фоновая картинка растягивалась под размер ссылки, ну или под указаный размер. заранее всем спасибо
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.02.2009, 21:11
Ответы с готовыми решениями:

красивые сайты
Люди подскажите плиз)) Я учусь кодить сайты чуть меньше года и верстаю шаблоны...

Красивые углы в border
Есть рамка одного цвета, нужно сделать углы другого цвета. Вот как здесь

Прикрепление ссылки в vk, показывает только название ссылки
Ребята, привет! как раз искал такую тему. у меня вопрос: А как дела обстоят с...

Ссылки
Почему-то не получается переходить по ссылкам, в браузерах пишется, что...

Li и ссылки
Привет. Есть нумерованный список, а в нем пункты. Как добавить ссылку к самой...

12
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
28.02.2009, 23:07 2
какие есть способы сделать
1. красивые ссылки при помощи css
Практически никаких. Только цвет, фон и реакция при наведении и нажатии.
2. сделать фон не однотонным а, например, градиентным
С помощью одного только CSS - никак. Для этого используются изображения.
3. если делать фон в виде картинки, то как (если картинка намного шире текста)
Если картинка используется как фон, то она будет отображена ровно столько же, сколько тот HTML-элемент, фоном которого она служит. Отсчёт начинается с левого верхнего угла. Естественно, это в случае, когда картинка больше, чем объект и при условии, что свойства того или иного элемента поддерживают фон.
4. отцентровать текст по высоте (vertical-align: middle не помогает)
vertical-align: [top, middle, bottom]; Больше никак.
5. как написать, чтобы фоновая картинка растягивалась под размер ссылки, ну или под указаный размер
Для этого ничего особо делать не нужно. Картинка по-умолчанию бедет растяниваться до размеров элемента, фоном которого она является. Просто ставишь картинку в качестве фона и всё. А под указанный размер - это есть такие свойства как width и height

А вообще попробуй почитать какую-нибудь книжку по HTML и CSS. Говорят помогает. Видно, что ты ни разу не читал ничего подобного. И в дальнейшем вопросы задавай с примерами. Тут никто ничего за тебя писать не будет. Могут только помочь найти ошибку, или подскажут что-то.
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
01.03.2009, 17:27  [ТС] 3
Пример такой:
кусочек css:
a.spec
{
display: block;
text-decoration: none;
background: url(src/button.gif);
min-width:150px;
padding:10px;
height:auto;
}
в документе так:
<a href="products.html" target="_blank" class="spec"> Уход за лицом</a>
В IE не работает min-width, почитал нашёл такое решение
width:expression(this.width < 150 ? "150px": this.width);
но оно у меня не работает,
если пишу width=150px; то текст сползает вниз-конфликт с padding(пробовал убрать его-становилось норм, но он нужен) подскажите, пожалста, что делать
0
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
01.03.2009, 18:41 4
А чё получить-то нужно в конечном итоге?
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
01.03.2009, 22:12  [ТС] 5
в конечном итоге надо получить ссылку, лежащую на фоне картинки имеющую отступы с трёх сторон по 5px и слева 15px,выровненную по вертикали по середине, и имеющую фиксированную ширину. причем текст ссылки может быть различной длины и, соответственно, может быть в две или более строки (если текст не умещается в указанную ширину)
это надо сделать одним классом так как ссылок предполагается более сотни и верстать куждую ручками "не айс"
0
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
01.03.2009, 22:27 6
Примерно понятно. Где они будут? в div'ах или в таблице? В смысле, кто их будет упорядочивать? Какого размера предусмотрено место под ссылку (по вертикали и горизонтали)? Какого размера картинка? Это что-то осмысленное или какой-то фон или градиент? Имеет ли значение размер картинки? Под что нужно подогнать размер, под картинку или картинку под выделенное под ссылку место?
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
01.03.2009, 22:32  [ТС] 7
они будут в таблице, как вариант в таблице только по ширине, те в каждом столбце несколько ссылок с переносом на след строку
<table>
<tr><tv><a....>.....</a> <br> <a....>.....</a></td></tr>
.........
<tr><tv><a....>.....</a> <br> <a....>.....</a></td></tr>
</table>
хотя какойто сомнительный вариант ИМХО,но и верстаь полсотни <td> не радует перспективка, хотелось бы получить стиль именно для абстрактной ссылки, которую куда ни сунь-будет как надо (ну это уже в целях повышения образованности)
я почти получил результат(пост выше), но IE, сцуко, всё обламал
по пунктам-
места предусмотрено 200 на 30-40 пикселов
картинка по факту 200 на 30,но можно налобать какую надо,не вопрос
на картинке градиент и в левой части будет типа бриллиант (ромбик обозначающий ка бы элемент списка)
картинку нужно подогнать под текст ссылки, который мб одно,двух или трхстрочным, места ограничено только в ширину
0
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
01.03.2009, 23:05 8
А не проще закатать все ссылки в файл или БД, а потом брать их оттуда генерируя таблицу нужного количества ссылок в строке?

Добавлено через 22 минуты 31 секунду
Типа так:
HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title></title>
<style type="text/css">
table {
    border-color: #000000;
    border-width: 0;
   text-align: center;
   width: 100%;
}
td {
    text-align: center;
    border: 1px solid #000000;
    background-image: url('button.gif');
   width: 200px;
   height: 30px;
   padding: 5px 5px 5px 15px;
}
</style>
</head>
 
<body>
 
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом. Очень длинный уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
    </tr>
    <tr>
      <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом. Очень длинный уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
        <td><a href="products.html" target="_blank"> Уход за лицом</a></td>
    </tr>
</table>
 
</body>
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
01.03.2009, 23:08  [ТС] 9
идея хорошая, но есть два минуса:
-сайт статика,будет правиться руками и не так часто
-даже при автогенерации как сделать нормальный вид у каждой отдельной ссыли? надо чтобы независимо от длины/строчности текста ссылка была по вертикали по середине картинки и чуть смещена вправо относительно середины по горизонтали, вопрос, собственно в этом.
Против стиля td одно большое НО-нет события mouseover, а для сцылки оно есть, в этом случае просто подгружается вторая картинка
a.spec:hover
{
background: url(src/button+.gif);
}
0
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
01.03.2009, 23:40 10
Цитата Сообщение от red_88 Посмотреть сообщение
нет события mouseover
Об этом речи небыло. А в моём примере ссылки как раз и будут находиться там, где нужно, а именно, 15 пикселей слева и по 5 с каждой из остальных сторон. При чём это будет при любом количестве слов в тексте ссылки.
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
02.03.2009, 08:57  [ТС] 11
речь была о стиле ССЫЛКИ. Но всё равно спасибо. Если у кого есть способ задать min-width для IE чтоб работало, отпишитесь, плиз.
0
red_88
6 / 6 / 0
Регистрация: 10.02.2009
Сообщений: 140
04.03.2009, 14:49  [ТС] 12
народ, помогите плиз с задачкой поконкретнее:
надо чтобы ссылка независимо от длины текста находилась ровно посередине backgraund-image'a, последний имеет заведомо бОльший размер чем, самая большая ссылка. Размер имейджа мы знаем (допустим 220px*60px). Вот класс для ссылки:
a.manufacturer
{
background-image: url(src/button.gif);
width: 220px;
height: 60px
text-align: center;
vertical-align: middle;
}
а не работает. Просьба не предлагать запихивать ссылку внутрь дивов, ячеек таблицы и тд, надо просто выровнять текст по центру по высоте и ширине, где бы ни находилась ссылка с таким стилем. Заранее всем спасибо
0
Ceran
172 / 98 / 9
Регистрация: 22.02.2009
Сообщений: 440
05.03.2009, 01:52 13
height: 60px - точка с запятой где?
0
05.03.2009, 01:52
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.03.2009, 01:52

ссылки.
Добрый день! Возможно мой вопрос прозвучит глупо, но я всего лишь начинающий...

Позиционирование ссылки
Всем привет, мне надо сделать чтоб две ссылки (div class=&quot;menu&quot;) были вверху но...

Высота ссылки
Имеется такой код: &lt;div class=&quot;lang&quot;&gt; &lt;a class=&quot;lang-ru&quot; href=&quot;#&quot;&gt;&lt;img...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru