[Resolvido] Estilização de UL e LI

[mhqmelo 0]

Boa tarde!

 

Meu problema é o seguinte:

 

Na pagina princinpal tem uma parte de "Ultimas Noticias".

 

Minha duvida é se tem como fazer o texto dentro da "Bola Vermelha" ser texto e não imagem, pq nesse modelo eu estou usando 3 fotos separadas. O problema é quando tiver 50 noticias, eu vou ter que colocar 50 fotos diferentes!

 

Obrigado pela ajuda. :)

 

HTML:

 

     <div id="latest-news" class="grid_4">
           <h2>Latest News</h2>
           <ul>
           	<li class="list-news sep-second">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
               <hr />
               <li class="list-news august-nineteen">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
               <hr />
               <li class="list-news august-twentytwo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
           </ul>

       </div><!-- /grid4 -->
   </div><!-- /container_12 -->

 

CSS:

 

#content-index hr{
height: 1px;
background-color:#555;
width:90%;
margin: 0 auto 20px auto;
}
.list-news{
height:85px;
padding: 0 0 0 80px;
}
.sep-second{
background:url(../images/02sep.png) no-repeat 0% 0%;
}
.august-nineteen{
background:url(../images/19aug.png) no-repeat 0% 0%;
}
.august-twentytwo{
background:url(../images/22aug.png) no-repeat 0% 0%;
}

 

Foto:

 

 

Uploaded with ImageShack.us

[William Bruno 1501]

poste a imagem, se não fica complicado imaginarmos a situação.

[mhqmelo 0]

poste a imagem, se não fica complicado imaginarmos a situação.

 

O link nao tinha funcionado da primeira vez! <_<

[AlocK 0]

Seu problema é ter 365 imagens diferentes e identifica-las no css:

 

dentro seu li separe em duas divs e coloque a primeira sendo a data e a segunda o conteudo]

 

+/- assim:

<...>
<li>
<div style="float:left;background-image:url(redball.png);padding:15px 0 15px 0;">
Aug
<br/>
15
</div>
<div>
lorem ipsum
</div>
</li>
</...>

 

não vou te dar o código pronto... mas acho que deu pra entender certo?

[mhqmelo 0]

Obrigado! Era isso mesmo.

 

Eu sei que nao se deve deixar nenhum texto fora da <p> ou qualquer q seje. É de alguma forma errado usar o <br /> para pular a linha?

 

[O Tópico já pode ser mudado como resolvido]

[William Bruno 1501]

acredito que semânticamente sim, seria errado usar o <br /> para quebrar nesse caso.

 

você poderia usar um elemento a mais, como um span, dar um display: block; nele. Ai você conseguiria o efeito de quebrar a linha.