Layout de Colunistas

não entendi bem...

qual a dúvida?

tem algum link para ver o problema?

Sem link. Estou desenvolvendo localmente ainda.

Eu quero simplesmente fazer com que meu código HTML e CSS demonstrem igual a imagem. Pois essa imagem que estou demonstrando a vocês está sendo feita usando tabelas e gostaria de utilizar Tableless.

O código em tabelas seria basicamente isso aqui (vou fazer na mão agora aqui, só pra ter idéia):

<table>
<tr>
 <td><img src="fotoDoColunista.jpg"></td>
 <td>Arte da Sedução<br/>(Otávio Sampaio)<br/>A Arte da Desqualificação</td>
</tr>
<tr>
 <td><img src="fotoDoColunista.jpg"></td>
 <td>Arte da Sedução<br/>(Otávio Sampaio)<br/>A Arte da Desqualificação</td>
</tr>
<tr>
 <td><img src="fotoDoColunista.jpg"></td>
 <td>Arte da Sedução<br/>(Otávio Sampaio)<br/>A Arte da Desqualificação</td>
</tr>
</table>

Mas que absurdo de marcação e excesso de CSS você usou!

o html necessário para o efeito final desejado:

<ul id="l-colunistas">
 <li>
 <img src="fotoColunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
 <li>
 <img src="fotoColunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
 <li>
 <img src="fotoColunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
	</ul><!-- /colunistas -->

Desculpa ai a minha ignorância no uso de CSS, afinal estou aprendendo e por isso estou tirando minhas dúvidas aqui.

Quanto ao seu código, ficou faltando postar o CSS, não?

Obrigado pela ajuda!

eu estava deixando o CSS a teu cargo.. mas lá vai:

* {

	margin: 0;
	padding: 0;
	list-style: none;
}
#l-colunistas {
	background: #000;
	width: 270px;
	color: #fff;
}

#l-colunistas li {

	height: 135px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
}

#l-colunistas img {

	float: left;
	margin-right: 5px;
}

#l-colunistas strong,
#l-colunistas span,
#l-colunistas a {

	display: block;

}

#l-colunistas strong,
#l-colunistas a {

	color: #e28000;
}

#l-colunistas strong {

	font-size: 16px;
	padding-top: 25px;
}

#l-colunistas span {

	font-style: italic;
}

Fiz uns ajustes no CSS e no HTML aqui, mas sempre no primeiro <LI> ele está se comportando de forma incorreta, fazendo o texto ficar mais alto que os outros em relação a foto.

 

O primeiro <li> não está sendo "empurrado" pela <div> #mod_colunas_titulo

HTML:

<!-- MÓDULO COLUNAS -->

 <div id="mod_colunas">
 <div id="mod_colunas_titulo"></div>
 <ul id="l-colunistas">
 <li>
 <img src="colunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
 <li>
 <img src="colunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
 <li>
 <img src="colunista.jpg" alt="" />
 <strong>Arte da Sedução</strong>
 <span>(Otávio Sampaio)</span>
 <a href="#">A Arte da Desqualificação</a>
 </li>
 </ul>
 </div>
 <!-- FIM COLUNAS -->

CSS:

/*********************************
COLUNAS
*********************************/

#mod_colunas{
	float:left;
	width:260px;
	height:auto;
	background-color:#000;
	border-top:3px #111 solid;
}

#mod_colunas_titulo{
	float:left;
	width:260px;
	background-image:url(../imagens/titulo_colunas.gif);
	background-repeat:no-repeat;
	width:inherit;
	height:16px;
	background-color:#000;
	margin:2px 0;
}

#l-colunistas {
 width: 260px;
 color: #fff;
 height:auto;
}

#l-colunistas li {

 min-height: 135px;
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 margin:5px 0;
 text-align:center;
}

#l-colunistas img {

 float: left;
 width:75px;
 height:100px;
 padding:12px 0 0 0;
 margin: 3px 5px;
}

#l-colunistas strong,
#l-colunistas span,
#l-colunistas a {

 display: block;

}

#l-colunistas strong,
#l-colunistas a {

 color: #F90;
}

#l-colunistas strong {

 font-size: 16px;
 padding-top: 20px;
}

#l-colunistas span {

 font-style: italic;
}

Acredito que seja por causa do float. Voce precisa de float nisso ?

é um título ? pq não usou 'tag de titulo' ?

h1, h2... h6

É um título, mas que é uma imagem. Você pode ver que lá na imagem no primeiro tópico tem escrito "Colunas", aquilo é uma imagem.

Exatamente essa que quero botar ali acima dos colunistas.

Por isso que no CSS eu estou chamando:

background-image:url(../imagens/titulo_colunas.gif);

Tentei retirar o float do #titulo, mas não adiantou nada. Continuou torto do mesmo jeito.

Trabalha com background-position:

background:url(../imagens/titulo_colunas.gif) no-repeat top left;
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif