Списки

boompaw · March 8, 2011

Всем привет!

Есть идея реализовать вот это:

Но каждый вот этот блок (текст сверху и три текста сбоку, а так же картинка слева), должен быть сделан через <li></li>.

Ну а расположение уже текста и картинок внутри <li></li>, как лучше это сделать?

Начал пихать внутрь списка тег <div>, чтобы расположить как хочу текста и картинку, так вообще ахинея какая-то вышла.

Заранее спасибо за любую помощь.

swetlana · March 8, 2011

откуда тут какой-то див?

нет тут никаких дивов.

Всё правильно: это вложенные списки, совершенно классические.

<ul>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
</ul>

boompaw · March 8, 2011

откуда тут какой-то див?

нет тут никаких дивов.

Всё правильно: это вложенные списки, совершенно классические.

<ul>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
	<li>
		<h1>Заголовок</h1>
		<img src="image.psd" />
		<ul>
			<li>Текст:123</li>
			<li>Текст:123</li>
			<li>Текст:123</li>
		</ul>
	</li>
</ul>

а в css как правильно написать задать оформление вложенным спискам? тобишь как их записать нужно в css?

swetlana · March 8, 2011

о чём вопрос?

какие селекторы использовать?

те, которые бы явно говорили о вложенности.

Например:

ul ul,
ul ul li

Serlutin · March 8, 2011

А я бы сделал так:

<article>
	<h1>Заголовок</h1>
	<figure>
		<img src="#" alt="">
		<figcaption>
			<ul>
				<li>Текст 1</li>
				<li>Текст 2</li>
				<li>Текст 3</li>
			</ul>
		</figcaption>
	</figure>
</article>

<article>
	<h1>Заголовок</h1>
	<figure>
		<img src="#" alt="">
		<figcaption>
			<ul>
				<li>Текст 1</li>
				<li>Текст 2</li>
				<li>Текст 3</li>
			</ul>
		</figcaption>
	</figure>
</article>

<article>
	<h1>Заголовок</h1>
	<figure>
		<img src="#" alt="">
		<figcaption>
			<ul>
				<li>Текст 1</li>
				<li>Текст 2</li>
				<li>Текст 3</li>
			</ul>
		</figcaption>
	</figure>
</article>

Edited March 8, 2011 by Serlutin

swetlana · March 8, 2011

А я бы сделал так:
…

и был бы абсолютно прав.

Прямо-таки хрестоматийный пример из учебников по html5 для первого класса

только вот у автора темы требование, чтобы через li было.

boompaw · March 8, 2011

и был бы абсолютно прав.
Прямо-таки хрестоматийный пример из учебников по html5 для первого класса
только вот у автора темы требование, чтобы через li было.

Всё верно, обязательно через li.

swetlana, при всем уважении, но у меня не получается расставить стили. Каша какая-то получается. Не могли бы вы объяснить наглядно как расставить стили, чтобы получилось примерно как в моем примере?

Xorigan · March 8, 2011

вот у меня проблема тож была: нажми сюда

мб поможет

tt48 · March 8, 2011

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type='text/css'>
	ul.list{
		width: 500px;
		margin:0 auto;
		border: 10px dotted pink;
		list-style-type: none;
		padding:0;
	}
	ul.list h1{
		text-align: center;
	}
	ul.list > li{
		display: block;
		clear: both;
		border: 1px solid black;
		overflow: hidden;
	}
	ul.list > li > img{	
		height: 200px;
		width : 200px;
		border: 1px solid red;
		float: left;/* or comment it and uncomment next*/

	}
	/*ul.list > li > img,
	ul.list ul{
		display: inline-block;
		clear: none;
		vertical-align: middle;
	}*/
	ul.list ul{
		border: 1px solid yellow;
		width: auto;
		list-style-type: none;
	}
</style>
</head>
<body>
	<ul class='list'>
		<li>
			<h1>Заголовок</h1>
			<img src="poisk4.jpg" height/>
			<ul>
				<li>Текст:123</li>
				<li>Текст:123</li>
				<li>Текст:123</li>
			</ul>
		</li>
	</ul>
</body>
</html>

имхо

Sign In

Списки

Question

boompaw

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

boompaw

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Serlutin

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

boompaw

Link to comment

Share on other sites

Xorigan

Link to comment

Share on other sites

tt48

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information