Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 12, средняя оценка - 4.75
Товарищ Саахов
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
#1

Позиционирование маркера списка - HTML, CSS

03.08.2014, 14:06. Просмотров 2748. Ответов 8
Метки нет (Все метки)

Привет! Нужна подсказка, есть код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mini-menu">   
        <ul>
        <li><a href="#">lorem ipsum</a>
        <ul>
        <li><a href="#">Lorem ipsum submenu 1</a></li>
        <li><a href="#">Lorem ipsum submenu 2</a></li>
        <li><a href="#">Lorem ipsum submenu 3</a></li>
        <li><a href="#">Lorem ipsum submenu 4</a></li>
        </ul>
        </li>
        <li><a href="#">Donec tincidunt laoreet</a></li>
        <li><a href="#">Vestibulum elit</a></li>
        <li><a href="#">Etiam pharetra</a></li>
        <li><a href="#">Phasellus placerat</a></li>
        <li><a href="#">Cras et nisi vitae odio</a></li>
        </ul>
        </div>
и

CSS
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
.mini-menu{
    max-width: 250px;
    margin: 0px auto;
    font: normal 14px 'oswaldbook';
}
ul {
    margin:0;
    padding:0;
    text-align:left;
    list-style-image: url(images/menu-non-act.png);
    }
 
.mini-menu > ul {
    margin-bottom: 300px;
    border: 1px solid #e7e7e7;
   }
.mini-menu > ul > li > a {
    display: block; 
    outline: 0; 
    padding: .7em 1em;  
    text-decoration: none;  
    color:#C9C9C9;  
    font-weight: normal;    
    background: #f3f3f3;    
    border-bottom: 1px solid #e7e7e7;
}
.mini-menu > ul > li > a:hover{
    color:#43cae7;
    }
 
.mini-menu ul li:hover{list-style-image: url(images/menu-act.png);}
.mini-menu > ul > li > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    color: #777;
    font-size: .75em;
   }
.mini-menu > ul > li > ul > li{
    counter-increment: items;
    padding: .5em 1.3em;
    border-bottom: 1px solid #e7e7e7;
}
.mini-menu > ul > li > ul > li:hover{
    background: #ccc;
}
.mini-menu > ul > li > ul > li > a{
    color:#8f8f8f;
    text-decoration: none;
}
.mini-menu > ul > li > ul > li > a:hover{
    color:#43cae7;
    margin-left: 8px;
    }
.mini-menu > ul > li > ul > li > a:after{
    float: left;
    margin-right:4px;
}
.mini-menu > ul > li > ul:after {
    content: counter(items);
    font-size: 0.857em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 15px;
    background: #e7e7e7;
    line-height: 1em;
    padding: .7em .8em;
    margin: -.9em 0 0 0;
    color: white;
    text-indent: 0;
    text-align: center;
    font-weight: 500;
    border-radius:.769em;}
проблема такая, ставлю свои маркеры, они вылазят за бордер, двигаю маргином, не помогает. Собственно вопрос как придвинуть маркер к тексту?
Спс.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.08.2014, 14:06
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Позиционирование маркера списка (HTML, CSS):

Позиционирование текста списка к центру своего маркера - HTML, CSS
&lt;ul&gt; &lt;li class=&quot;clli&quot;&gt;Какой-то текс&lt;/li&gt; &lt;li class=&quot;clli&quot;&gt;Тоже какой-то текс&lt;/li&gt; &lt;li class=&quot;clli&quot;&gt;Ещё текст какой&lt;/li&gt; &lt;/ul&gt; ...

Изменение маркера списка <ul> - HTML, CSS
Здравствуйте, уважаемое комьюнити! Давеча столкнулась с проблемой: упорно не могу поменять маркер в таблице на свой квариант из .gif...

Выравнивание по вертикали маркера списка - HTML, CSS
Имеется список, в качестве маркера-отдельное изображение высотой 1 пиксель. После добавления маркер находится внизу строки. Возможно ли его...

Картинка вместо маркера списка - HTML, CSS
Здравствуйте. Нужно вместо символа маркера списка использовать картинку с зданными размерами. Как это реализовать? Сказали что нужно...

Одинаковый размер и отступы маркера списка - HTML, CSS
уважаемые господа, прошу вас, прежде чем давать совет, пожалуйста, убедитесь лично, что он правильный :) спросить хотел насчёт маркера...

Выравнивание элементов ненумерованного списка относительно маркера - HTML, CSS
Подскажите пожалуйста вот в каком вопросе: Имеется ненумерованный список который располагается внутри блока шириной 400px. Как только...

8
Nicholas Essen
3 / 3 / 0
Регистрация: 02.04.2011
Сообщений: 38
03.08.2014, 14:08 #2
Киньте скрин, плиз.
0
dimadyak
8 / 8 / 6
Регистрация: 08.04.2014
Сообщений: 54
03.08.2014, 14:14 #3
list-style-position:inside; для ul ?
0
Товарищ Саахов
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
03.08.2014, 15:20  [ТС] #4
вот скрин как получается
0
Товарищ Саахов
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
03.08.2014, 15:26  [ТС] #5
Позиционирование маркера списка
0
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
03.08.2014, 15:27 #6
Для полного контроля лучше использовать background а не list-style

Добавлено через 54 секунды
Тем более в вашем случае можно вообще без картинок такое сделать
0
Товарищ Саахов
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
03.08.2014, 16:13  [ТС] #7
хм так если я например прописываю:

CSS
1
.mini-menu ul li{background:url(images/menu-non-act.png); list-style:none;}
то не активные маркеры вообще порпадают
0
Crystal-3
76 / 72 / 35
Регистрация: 04.04.2014
Сообщений: 222
04.08.2014, 00:36 #8
Товарищ Саахов, как вам такой вариант? http://cssdeck.com/labs

HTML5
1
2
3
4
5
6
7
8
<ul>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Donec tincidunt laoreet</a></li>
        <li><a href="#">Vestibulum elit</a></li>
        <li><a href="#">Etiam pharetra</a></li>
        <li><a href="#">Phasellus placerat</a></li>
        <li><a href="#">Cras et nisi vitae odio</a></li>
    </ul>
CSS
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
ul li {
            list-style:none;
        }
        ul li a {
            display:block;
            padding: .7em 1em;  
            text-decoration: none;  
            color:#C9C9C9;      
            background: #f3f3f3;    
            border-bottom: 1px solid #e7e7e7;
            width:30%;
        }
        ul li:before {
            content:' ';
            width:10px;
            height:10px;
            background:#C9C9C9;
            display:block;
            float:left;
            margin:16px 20px;
        }
        ul li:hover:before {
            background:#43cae7;
        }
        ul li a:hover {
            color:#43cae7;
        }
0
Товарищ Саахов
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
04.08.2014, 17:54  [ТС] #9
to Crystal-3 интересно спасибо, но планировал раздвигающееся меню, и решил сделать маркеры через background, в принципе получилось спасибо за подсказку vovandr, но вылез другой бок с бордерами: .mini-menu ul > li > ul > li{} которые должны быть на всю длину блока (

http://cssdeck.com/labs/95vo1qod
0
04.08.2014, 17:54
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.08.2014, 17:54
Привет! Вот еще темы с ответами:

Позиционирование элементов списка <ul> - HTML, CSS
Подскажите как сделать что бы &quot;приветствие&quot; и &quot;выход&quot; прибилось к правому углу. А остальное осталось на месте. Что бы не писать &amp;nbsp;. ...

Позиционирование пунктов списка по левому и правому краю - HTML, CSS
Доброго времени суток! Ребят, помогите с таким вопросом: Имеется нумерованный список, к каждому из li приписываю class left или...

Удаление маркера от ul ломает верстку - HTML, CSS
внутри Bootstrapовского &lt;div class=&quot;row&quot;&gt; находится обычный &lt;ul&gt; список &lt;div span&gt;ами разбиты ячейки и вышла замечательная таблица,но...

Изменить размер маркера в ненумерованном списке - HTML, CSS
Приветствую. Как сделать так, чтобы кружки были очень большие (диаметр кружка = высота буквы)? &lt;ul type=&quot;disc&quot;&gt; &lt;li&gt;Раз&lt;/li&gt; ...


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

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

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