<ul> <li>

termoplus · September 2, 2009

нужно сделать типа такой контент

проблема заключается в том что не получается добавить разделители (черные линии) между блоками, так в теге li присутствует уже фон (синий). прописывая background в общем теге li ни к чему не приводит.

 li {
	float: left;
	width: 220px;
	display: block;
	margin-right:30px;
}
li.01{ background: url(image.jpg) no-repeat 0px 0px; }
li.02{ background: url(image.jpg) no-repeat 0px 0px; }
li.03{ background: url(image.jpg) no-repeat 0px 0px; } 
li.04{ background: url(image.jpg) no-repeat 0px 0px; }

 <ul>
		<li class="01">
		  <h1 class="">01</h1>
		  <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dapibus purus non varius. </p>
		  <a href="#"><img src="btn.jpg" alt="" width="146" height="30" class="" /></a>
		  </li>
		   .............................
 </ul>

думаю нужно добавлять дополнительный тег li, главный где будет прописывать разделитель... <li><li class="">......</li></li>

Edited September 2, 2009 by termoplus

mishka · September 2, 2009

Heading - это вам не просто так - это вам заголовок. Так что логичнее этот синий фон поцепить на (в вашем случае) h1. Я дизайна невижу всего, но я бы делал максимум h2. Так как в идеале h1 должен быть один на странице.

И зачем вам классы на <li> они же абсолютно одинаковы!

И я бы делал чтобы эти полоски тянулись все одинаково по высоте, так как высота колонок может быть разной, то сделать визуально одинаковую высоту им, было бы эстэтично

3ABAPKA · September 2, 2009

можно еще вот так:

в коде движка отрабатывающего эти li написать переменную, имеющую одно значение равное имени класса (css), и счетчик в цикл закинуть условие что если счетчик больше нуля то переменная не пуста, иначе пуста.

а в css написать класс где у li левый бордер черный

mishka · September 2, 2009

<li><li class="">......</li></li>

вы попробуйте еще <body><body>...</body></body> заюзать для сложных бекграундов

termoplus · September 2, 2009

спасибо. как я сразу не догнал на счет закинуть бекграунд заголовку, туплю я уже спасибо

Flare · September 3, 2009

termoplus:

думаю нужно добавлять дополнительный тег li, главный где будет прописывать разделитель... <li><li class="">......</li></li>

для того чтобы сделать разделители, измените в css:

li {
float: left;
width: 220px;
display: block;
margin-right:30px;
padding-right:30px;
border-right:2px solid #000;
}

.noborder {border-right:none;}

уберите ненужные классы 01, 02 …

у последнего li пропишете:

<li class="noborder">

Sign In

<ul> <li>

Question

termoplus

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

3ABAPKA

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

termoplus

Link to comment

Share on other sites

Flare

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information