вопрос по html

enom · June 29, 2012

народ, подскажите пожалуйста, как организовать у себя штуку как (к примеру) на http://htmlbook.ru/css ,, крайний левый блок (CSS) там где идёт список значений css..

так вот.. как сделать так как в этом блоке, чтобы список выводился примерно в таком окне??

Zzz_ · June 30, 2012

<style>
div{
    display: block;
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid #f00;
}
</style>
<div>
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
ля<br />
</div>

mrnobody · June 30, 2012

Создаём маркированный список:

<ul>
	<li>список 01</li>
	<li>список 02</li>
	<li>список 03</li>
	<li>список 04</li>
	<li>список 05</li>
	<li>список 06</li>
	<li>список 07</li>
	<li>список 08</li>
	<li>список 09</li>
	<li>список 11</li>
	<li>список 12</li>
	<li>список 13</li>
	<li>список 14</li>
	<li>список 15</li>
	<li>список 16</li>
	<li>список 17</li>
	<li>список 18</li>
	<li>список 19</li>
	<li>список 20</li>
	<li>список 21</li>
	<li>список 22</li>
	<li>список 23</li>
	<li>список 24</li>
	<li>список 25</li>
	<li>список 26</li>
	<li>список 27</li>
	<li>список 28</li>
	<li>список 29</li>
	<li>список 30</li>
	<li>список 31</li>
</ul>

и задаем ему в стилях фиксированную высоту и ширину, ставим свойство overflow-y: auto;

вот полный код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>список</title>
<style type="text/css">
ul{
	height:300px; /*высота маркированного списка*/
	background-color: #E6EAEF; /*фон марк. списка*/
	width: 140px; /*ширина*/
	overflow-y: auto; /*создает вертикальную полосу прокрутку, если информация не помщается в блок*/
	padding: 0; /* убираем внутренние отступы, по умолчанию установлен отспуп слева 40px */
}
li{
	list-style: none; /*убираем маркеры*/
	border-radius: 3px;
	padding: 15px; /*отсут*/
	text-align: center; /*выравнивание слов по центру*/
}
li:nth-child(odd){
	background-color: #62D0E3; /*перекрашиваем нечетные элементы списка*/
}
</style>
</head>
<body>
<ul>
	<li>список 01</li>
	<li>список 02</li>
	<li>список 03</li>
	<li>список 04</li>
	<li>список 05</li>
	<li>список 06</li>
	<li>список 07</li>
	<li>список 08</li>
	<li>список 09</li>
	<li>список 11</li>
	<li>список 12</li>
	<li>список 13</li>
	<li>список 14</li>
	<li>список 15</li>
	<li>список 16</li>
	<li>список 17</li>
	<li>список 18</li>
	<li>список 19</li>
	<li>список 20</li>
	<li>список 21</li>
	<li>список 22</li>
	<li>список 23</li>
	<li>список 24</li>
	<li>список 25</li>
	<li>список 26</li>
	<li>список 27</li>
	<li>список 28</li>
	<li>список 29</li>
	<li>список 30</li>
	<li>список 31</li>
</ul>
</body>
</html>

Вот пример — http://jsfiddle.net/6c2tt/

UPD: блин, десятку пропустил, не вините строго :blush:

Edited June 30, 2012 by mrnobody

enom · June 30, 2012

спасибо))

Sign In

вопрос по html

Question

enom

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Zzz_

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

enom

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information