span com quebra de linha

[No Rain 0]

Oi pessoal.

 

Estou criando um novo layout para meu site de festas e estou com um problema que não consigo resolver.

 

Tem um espaço no site onde são inseridas as ultimas festas atualizadas. Nesse espaço tem uma foto e logo abaixo a descrição da festa. Esse espaço é repetido mais 3 vezes na mesma linha. Esse formato pode ser visto no www.temfestas.com.br

 

Inicialmente eu criei esse espaço inserindo uma div com a largura necessária, uma imagem e um parágrafo para cada info da festa (data, nome, local, etc) com um link que engloba todo esse código. Esse código até que funcionou mas eu não fiquei satisfeito ao ver como o site ficava ao deixa-lo sem o css. Os parágrafos ficam com a margem grande entre eles.

<div class="festacapa" style="margin:0"><em>Minha Festa</em><br />
	<div class="moldura"></div>
	<a href="#"> <img src="imagensss/foto3.jpg" class="fotocapa" /> 
	<p class="festadata">23/03/80</p>
	<p class="festanome">Show Grupo Tradição</p>
	<p class="festalocal">Local</p>
	<p class="festalocal">A.D.P.M</p>
	<p class="festacidade">Ourinhos/SP</p>
	</a> </div>

e o código css da div principal.

.festacapa {
	position: relative;
	width: 154px;
	height: 292px;
	background-image: url(imagensss/fotos_separ_cont.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	border: 0;
	float: left;
	display:inline;
	margin: 0px 0px 0px 23px;
	text-align: right;
		}

Então eu quería criar esse espaço de um modo que pudesse ficar melhor formatado ao tirar o css. Eu quero que o texto sem o css apareça na mesma linha da foto.

 

Esse formato eu pude conferir no site ALIVE na foto e informações da ultima festa publicada, ao lado direito do site. Percebi que ele cria spans para cada info e cada span aparece em uma linha. Mas quando eu coloco spans para as infos, elas aparecem tudo na mesma linha.

 

<div class="festacapa"><em>Minha Festa</em><br />
	<a href="http://www.temfestas.com.br"><img src="imagensss/foto1.jpg" class="fotocapa" />
	<span class="festadata">23/03/80</span>
	<span class="festanome">Show Grupo Tradição</span>
	<span class="festalocal">Local</span>
	<span class="festalocal">A.D.P.M</span>
	<span class="festacidade">Ourinhos/SP</span>

Alguém sabe como eu posso fazer cada span aparecer em uma linha???

 

No link abaixo tem um link para a página. a primeira capa está com os spans e as outras 3 são feitas com os paragrafos.

 

pagina aqui

[William Bruno 1501]

Já tentou colocar um width, suficientemente pequeno capaz de fazer isso na div pai desses spans?

.festacapa {
	width: 100px;
}

Está me parecendo uma lista isso ai... uns "LI" não seriam mais naturais?

[No Rain 0]

oi tui,

 

então, não sería certo eu colocar um tamanho pequeno para isso porque no final esse conteúdo será dinamico. Ou seja, o tamanho do nome de uma festa não será igual ao tamanho do nome de outra festa.

 

Já sobre fazer isso em lista, também não sería bom porque cada info da festa não é um item. todas essas infos são um item só. uma festa só. Até que sería uma saída mas eu fiquei em dúvida mesmo como o outro site conseguiu fazer cada span em uma linha. Olhei no css dele e não achei nada uqe indicasse isso.

 

 

:(

[Giovani 104]

Você deve fazer um <li> para "foto e logo abaixo a descrição da festa". Fica bem mais fácil.

Sobre um span em cada linha, é simples, display: block nele.