Не показываются свои маркеры

Rustick · July 9, 2011

1. В менюшке, у элементов списка не показываются маркеры, почему?

Пропали когда прописал display: inline для элементов списка.

li.icon_1, li.icon_2, li.icon_3, li.icon_4 {
display: inline;
padding-left: 32px;
}

2. Опять проблема с пониманием того, как работает margin

img.logo {
margin-left: 20px;
float: left;
}

.logo_text {
font: 20px Tahoma;
color: #3c3c3e;
margin-left: 5px;
float: left;
}

После того, как добавил float: left; для img.logo (листочек) пришлось прописать для .logo_text (corporate energy) margin-left: 5px; а до этого было 55px, то есть margin начинает браться от листочка, потому что идет обтекание, верно? А да это получается брался от края тела?

psywalker · July 9, 2011

1) Вместо этого list-style-image: использую background;

2) Верно, но текста это не касается.

Rustick · July 10, 2011

1) Вместо этого list-style-image: использую background;
2) Верно, но текста это не касается.

Не понимаю каким образом пересекаются маркер и фон? Или я что-то не так понял.

psywalker · July 10, 2011

1) Вместо этого list-style-image: использую background;
2) Верно, но текста это не касается.
Не понимаю каким образом пересекаются маркер и фон? Или я что-то не так понял.

Никак, просто фоновую картинку лучше задавать через свойство background. Меньше проблем.

Rustick · July 10, 2011

Может я что=то не так объяснил. Мне нужно сделать вот так. Смотреть в верхней части сайта.

psywalker · July 10, 2011

Может я что=то не так объяснил. Мне нужно сделать вот так. Смотреть в верхней части сайта.

Нормал?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	ul {list-style-type: square;}
	li { float: left; margin-left: 20px;}
	li span { color: #000;}
	.icon_1 { color: red;}
	.icon_2 { color: blue;}
	.icon_3 { color: #0F0;}
	.icon_4 { color: #606;}
</style>
</head>

<body>
<ul class="menu">
			<li class="icon_1"><span>home</span></li>
			<li class="icon_2"><span>investors</span></li>
			<li class="icon_3"><span>products</span></li>
			<li class="icon_4"><span>contact</span></li>
		</ul>
</body>
</html>

Rustick · July 10, 2011

Спасибо. Подсмотрел у тебя. Заменил display: inline на float: left и все стало нормально.

Еще вопросик назрел, как можно изменить расстояние между текстом и маркером? То есть паддингов никаких нету, но расстояние между текстом и маркером 7px, а мне нужно 5px.

psywalker · July 11, 2011

Спасибо. Подсмотрел у тебя. Заменил display: inline на float: left и все стало нормально.
Еще вопросик назрел, как можно изменить расстояние между текстом и маркером? То есть паддингов никаких нету, но расстояние между текстом и маркером 7px, а мне нужно 5px.

Как вариант:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

        ul {list-style-type: square;}
        li { float: left; margin-left: 20px;}
        li span { color: #000; margin-left: -5px;}
        .icon_1 { color: red;}
        .icon_2 { color: blue;}
        .icon_3 { color: #0F0;}
        .icon_4 { color: #606;}
</style>
</head>

<body>
<ul class="menu">
                        <li class="icon_1"><span>home</span></li>
                        <li class="icon_2"><span>investors</span></li>
                        <li class="icon_3"><span>products</span></li>
                        <li class="icon_4"><span>contact</span></li>
                </ul>
</body>
</html>

Sign In

Не показываются свои маркеры

Question

Rustick

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Rustick

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Rustick

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Rustick

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information