Форум Сайтостроение Веб-строительство

CSS

12
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
658

HTML 

<ul class="top_menu">

               <li>Call me back</li> 

        		<li>Client area</li>

                <li>Mon - Fri : +44 0(20) 1234 5678</li>

        		<li>Chat Online</li>

            </ul>

CSS 

ul.top_menu{float: right; list-style-type: none;}

Как сделать список в одну строку? Как поставить разделители между тегами li?

Vauquelin
На сайте с 02.09.2012
Offline
9
Vauquelin
#1

.top_menu li {display: inline-block;}

Для разделителя можно использовать border-right, например.

Или конструкцию вида


<li>
  <a href="#">Home</a> 
  <span class="separator">|<span>
</li>
LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#2

Или background-image. А ещё кроссбраузерный inline-block поищите. Ну либо float:left; используйте.

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#3

LovelAss, куда добавить картинку с разделителем? 

ul.top_menu{float: right; list-style-type: none;}

ul.top_menu li{display: inline; padding: 7px;}

ul.top_menu li a{color: #333; font-size: 13px; display: inline;}

Как выровнять блок по правой стороне? http://jsfiddle.net/xjhng/

B
На сайте с 10.03.2013
Offline
4
buzzzis
#4
Pasha199:
LovelAss, куда добавить картинку с разделителем? 

ul.top_menu{float: right; list-style-type: none;}

ul.top_menu li{display: inline; padding: 7px;}

ul.top_menu li a{color: #333; font-size: 13px; display: inline;}


Как выровнять блок по правой стороне? http://jsfiddle.net/xjhng/

ul.top_menu{float: right; list-style-image:url(name.jpg); width: 100%; text-align: right;}

ul.top_menu li{display: inline; padding: 7px;}

ul.top_menu li a{color: #333; font-size: 13px;}
Верстка сайтов "за еду"... (http://easydevelop.ru/uslugi/)
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#5

buzzzis, благодарю.

Как у первого li убрать картинку? Т.е. чтобы она была у 2, 3, 4 li 

ul.top_menu{list-style-type: none;width: 100%;margin: 0 0 0 0; text-align: right;}

ul.top_menu li{display: inline; padding: 7px; background:url(../images/line.jpg) 0px 12px no-repeat;}

ul.top_menu li a{color: #333; font-size: 13px; display: inline;}
eis
На сайте с 18.10.2008
Offline
473
eis
#6

Pasha199, первому li задайте id и в css пропишите этому id {background-image: none; }

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
B
На сайте с 10.03.2013
Offline
4
buzzzis
#7
Pasha199:
buzzzis, благодарю.

Как у первого li убрать картинку? Т.е. чтобы она была у 2, 3, 4 li

код бы глянуть. Первое, что приходит на ум 

li:nth-child(1) {list-style-type:none;}

li{list-style-image: url(name.jpg);}
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#8

eis, 

ul.top_menu{list-style-type: none;width: 100%;margin: 0 0 0 0; text-align: right;}

ul.top_menu li{display: inline; padding: 7px; background:url(../images/line.jpg) 0px 12px no-repeat;}

ul.top_menu li a{color: #333; font-size: 13px; display: inline;}

ul.top #none li{background-image: none;}

			<ul class="top_menu">

				<li id="none"><span class="color"><i class="icon-share-alt"></i><a href="#">Call Me Back</a></li>

				<li><span class="color"><i class="icon-user"></i><a href="#">Client Login</a></li>

				<li><span class="color"><i class="icon-phone"></i></span>Mon - Fri: <strong>0(20) 1234 5678</strong></li>

				<li><span class="color"><i class="icon-comments"></i></span><a href="#"></span>Chat <span class="red"> Online</span></a></li>

            </ul>

Не пропала картинка с первого li

gormarket
На сайте с 29.12.2010
Offline
47
gormarket
#9

ul.top #none li{background-image: none;}

пропущено "_menu", но все равно такой стиль может примениться только для элемента li имеющего родителя с id="none", который в свою очередь имеет родителя ul с class="top_menu"

Вот так еще может сработать

ul.top_menu li#none {background-image: none;}

но вообще то id должен быть уникальным в пределах документа, поэтому правильнее будет так

#none {background-image: none;}

Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)
Помогите, пожалуйста. Выпадающее горизонтальное Что прописать в CSS Профи в вопросах верстки,
B
На сайте с 10.03.2013
Offline
4
buzzzis
#10 

ul.top_menu{list-style-type: none;width: 100%;margin: 0 0 0 0; text-align: right;}
ul.top_menu li:nth-child(1){background-image: none;}
ul.top_menu li{display: inline; padding: 7px; background:url(../images/line.jpg) 0px 12px no-repeat;}
ul.top_menu li a{color: #333; font-size: 13px; display: inline;}

в html беда. span не везде закрыт

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий