X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Иконки с текстом
vesta2v
vesta2v
Topic Starter сообщение 29.4.2009, 14:52; Ответить: vesta2v
Сообщение #1


Прошу помочь, я начинаю учить верстку div, скажите как правильно реализовать одну вещь:

необходимо сделать ссылкой
изображение текст
изображение текст

#toplist li
{
display: inline;
list-style-type: none;
padding-right: 50px;
}
--------------------------------------
<ul id="toplist">
<li><a href="#"><img src="images/home.jpg"> Домой</a></li>
<li><a href="#"><img src="images/cont.jpg"> Контакты</a></li>
</ul>

не получается выровнять изображение и текст ссылки, они на разных уровнях. помогите пожалуйста.
Зараннее спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
web_programmer
web_programmer
сообщение 29.4.2009, 14:55; Ответить: web_programmer
Сообщение #2


Или используй относительное позиционирование для картинок (position:relative;), или сделай для LI фон из этих картинок. Свойство display для LI нужно указать inline-block.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vesta2v
vesta2v
Topic Starter сообщение 29.4.2009, 15:03; Ответить: vesta2v
Сообщение #3


(position:relative;) не помогает, а если делать фоном, расположение остается такое же :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 29.4.2009, 15:04; Ответить: Apay
Сообщение #4


у img есть align, попробуй его поставить в middle или absmiddle, и вообще перебери все значения, может какое-то и подойдет
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vesta2v
vesta2v
Topic Starter сообщение 29.4.2009, 15:32; Ответить: vesta2v
Сообщение #5


не помогает (
может как-нибудь по-другому это реализовать? не списком?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vesta2v
vesta2v
Topic Starter сообщение 29.4.2009, 15:37; Ответить: vesta2v
Сообщение #6


(webprogrammer @ 29.4.2009, 17:55) *
Или используй относительное позиционирование для картинок (position:relative;), или сделай для LI фон из этих картинок. Свойство display для LI нужно указать inline-block.


inline-block
не работает в ie
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 29.4.2009, 16:25; Ответить: Apay
Сообщение #7


списоок или не-список - без разницы, изображния не выравниваются в строке, как я говорил, надо было попробовать
<li><a href="#"><img src="images/home.jpg" align="absmiddle"> Домой</a></li>
вместо absmiddle можно попробовать middle или baseline
и, на худой конец, если это все не сработает, указать в стилях (кол-во пикселов можно подобрать)
#toplist li img { margin-top:5px }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vesta2v
vesta2v
Topic Starter сообщение 29.4.2009, 20:31; Ответить: vesta2v
Сообщение #8


спасибо! margin-top помог!
:goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 29.4.2009, 20:36; Ответить: klenovnn
Сообщение #9


Вообще это ламерский метод, правильнее использовать для ссылки фон, то есть сейчас вы вставляете картинку скажем img1.gif внутрь ссылки
<a href="#"><img src="/img1.gif" alt="" />Текст</a> а нужно
<a href="#" class="images" />Текст</a>

css
a.images {background:url('/img1.gif') center left no-repeat; padding-left:20px;}/* скажем. ну там еще по высоте можно сверху снизу добавить отступы.*/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 29.4.2009, 20:55; Ответить: Apay
Сообщение #10


2 Defunct,
делать картинки фоном, потом все подравнивать стилями, после всего каждой ссылке присваивать свой id (у каждой ссылки своя картинка) и городить огород из кучи стилей для каждого id - на мой взгляд не очень разумно, уж лучше такой "ламерский" подход, чем вся эта кажущаяся "крутизна" ради самой "крутизны"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2632 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Анимированные иконки для разделов форума
0 mimoplus 2579 21.3.2019, 16:48
автор: mimoplus
Открытая тема (нет новых ответов) Требуется разработать иконки для сайта
2 Mukis 2836 4.2.2019, 18:36
автор: piarpanelpro
Открытая тема (нет новых ответов) Нарисовать иконки
Тематика адалт
0 WoWeb 2835 3.10.2017, 18:34
автор: WoWeb
Открытая тема (нет новых ответов) Иконки в шаблоне.
3 SOROKVLAD29 3872 6.6.2017, 16:01
автор: ZaDrotom


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:52
Дизайн