Разные размеры шрифта в одном элементе списка

zodcyi · October 27, 2012

Доброго времени суток! Вот, что нужно сверстать:

Размер шрифта для самих элементов меню (Account Sign In, Register...) - 13 пикселей. Для точек-разделителей - 25 пикселей. Интерлиньяж одинаковый - 30 пикселей. Между элементом меню и точкой-разделителем расстояния в 3 пробела размером шрифта 13 пикселей. Базовая линия элементов меню и базовая линия точек-разделителей совпадают. Вот мой код, использую unordered list, сначала устанавливаю размер шрифта для элементов меню и точек одинаковый - 13 пикселей.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/style.css" />
</head>

<body>
	<header>
		<div id="services_wrapper">
			<div id="services">
				<ul>
				     <li>Account Sign In   .</li>
				     <li>   Register   .</li>
				     <li>   Buyers Guide   .</li>
				     <li>   About   .</li>
				     <li>   Blog   .</li>
				     <li>   Contact</li>
				</ul>
			</div><!--end of services-->
		</div><!--end of services_wrapper-->
	</header>
</body>
</html>

Лист стилей:


/*GENERAL*/
html, body {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

#wrapper {
	width: 960px;
	margin: 0px auto;
}

/*HEADER*/
#services_wrapper {
	width: 100%;
	height: 30px;
	background: repeat-x url(../img/services_bg.gif);
}

#services {
	margin: 0px auto;
	width: 960px;
	height: 30px;
	background: repeat-x url(../img/services_bg.gif);
}

#services ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	color: #c0c0c0;
	font: 13px Arial, sans-serif;
	line-height: 30px;
}

#services ul li {
	float: left;
}

Открываю браузер:

Все нормально, остается добавить для точек-разделителей размер шрифта 25 пикселей. Использую тег span. Вот код:


...
                        <div id="services">
				<ul>
				     <li>Account Sign In   <span>.</span></li>
				     <li>   Register   <span>.</span></li>
				     <li>   Buyers Guide   <span>.</span></li>
				     <li>   About   <span>.</span></li>
				     <li>   Blog   <span>.</span></li>
				     <li>   Contact</li>
				</ul>
			</div><!--end of services-->
...

В лист стилей добавляю следующее правило:


...
#services ul li span {
	font-size: 25px;
}
...

Открываю браузер:

Меню съехало. И здесь непонятно несколько моментов. Смотрю в Firebug:

1)

Для спиcка ul я задал наследуемое свойство line-height: 30px, откуда тогда появились эти 34 пикселя для элемента li?

2) Так же не работает line-height и для тега span

Вместо 30 пикселей, высота span 29 пикселей.

В принципе, меню можно поднять с помощью position:relative. Но все равно у элементов li и span остается высота в 34 и 29 пикселей соответственно.

Объясните, пожалуйста, что происходит в данном случае и подскажите, есть ли решение получше для данной задачи. Спасибо.

Ergonav · October 28, 2012

Вырезать картинку и вставить..зачем заморачиваться

USF · October 28, 2012

а чем вас разделитель в стандартном list-style-type не устроил? :blink:

mrnobody · October 28, 2012

Согласен с предыдущими комментариями.

Попробуйте Alt+0183 (·) или Alt+0149 (•) вставить в ваши span`ы.

zodcyi · October 28, 2012

Всем спасибо за ответы!

Sign In

Разные размеры шрифта в одном элементе списка

Question

zodcyi

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Ergonav

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

zodcyi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information