Проблемы вёрстки списка

dimacat · October 4, 2010

Приветствую ! Есть проблема: верстаю вертикальный список с маркером в виде картинки. Однако, ни в Опере, ни в Хроме маркеры не отображаются посередине своего элемента списка. Вот как показано на картинках (1-я картинка - Опера, 2-я - Хром).

Пробовал способ задать картинку-маркер в виде фона для элемента списка. Однако, вот что происходит, когда слишком длинный текст:

т.е. если элемент списка слишком длинный, то маркер становится посередине элемента.

Так вот, расскажите, как сделать при помощи первого способа так, чтобы маркер одинаково посередине отображался во всех браузерах ?

Edited October 4, 2010 by dimacat

psywalker · October 4, 2010

делай с помощью background;

dimacat · October 4, 2010

Так я же написал и показал, что из этого вышло. Третья картинка.

psywalker · October 4, 2010

А покажи код.

dimacat · October 4, 2010

CSS:

.section ul {
	list-style-type: none;
	margin-left: 20px;
}

.section li a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #616156;
	text-decoration: none;
	display: block;
	background: url(img/dot.jpg) left no-repeat;
	padding-left: 10px;
}

HTML:

<div class="section">
                        <h1>Туризм и путешествия</h1>
                    <ul>
                        <li><a href="#">Виды туризма (56)</a></li>
                        <li><a href="#">Иммиграция (11)</a></li>
                        <li><a href="#">Разное (3)</a></li>
                        <li><a href="#">Гостиницы и отели (14)</a></li>
                        <li><a href="#">О рыбалке (6)</a></li>
                        <li><a href="#">Страны и города (19)</a></li>
                    </ul>
                </div>

Это, как можно заметить, сделано с помощью бэкграунда.

psywalker · October 4, 2010

Отлично, а попробуй задать фон LI, а не А

dimacat · October 4, 2010

Та же песня...

Justnewone · October 4, 2010

Та же песня...

background: url(img/dot.jpg) left top no-repeat;

Ну или там в пикселях/ем

psywalker · October 4, 2010

1) Перенёс твой код к себе, всё отображается по середине, во всех браузерах

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">



.section ul {
list-style-type: none;
margin-left: 20px;
}

.section li a {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #616156;
text-decoration: none;
display: block;
background: url(bgA.png) left no-repeat;
padding-left: 10px;
}
</style>
</head>

<body>
<div class="section">
<h1>Туризм и путешествия</h1>
<ul>
<li><a href="#">Виды туризма (56)</a></li>
<li><a href="#">Иммиграция (11)</a></li>
<li><a href="#">Разное (3)</a></li>
<li><a href="#">Гостиницы и отели (14)</a></li>
<li><a href="#">О рыбалке (6)</a></li>
<li><a href="#">Страны и города (19)</a></li>
</ul>
</div>

</body>
</html>

dimacat · October 5, 2010

1) Перенёс твой код к себе, всё отображается по середине, во всех браузерах

Я же говорю, что таким способом отображается посередине, согласен. Но посмотрите внимательнее третью картинку. Там где я подчеркнул красным: когда слишком много текста, текст переносится на другую строку, однако, маркер становится по середине всей перенесённой строки. Вот что за проблема в этом способе.

background: url(img/dot.jpg) left top no-repeat;
Ну или там в пикселях/ем

Ваш совет помог ! Весьма благодарен за помощь !

psywalker, Вам также спасибо за то, что откликнулись !

Sign In

Проблемы вёрстки списка

Question

dimacat

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information