Tableless

[Wanderson Regis Silva 0]

Preciso fazer uma página e a intenção é nãi usar tabelas, mas não estou conseguindo fazer com divs o que fazia com tabelas.

 

Tenho uma div principal que fica em volta de todas as outras, queria usar ela pra definir o fundo de outras que ficassem dentro dela, mas sem colorir o fundo da página inteira, mas se eu usar FLOAT em qualquer outra div é como se ela não fizesse parte do conteúdo desta principal.

 

Outro problema que tá acontecento é que só consigo colocar duas divs uma do lado da outra se especificar o tamanho das duas (ou pelo menos da segunda), mas preciso é da primeira com tamano fixo e da segunda com tamanho variável, se não fixar valores a segunda (da direita) fica embaixo da primeira e não do lado. Como eu faço pra ter um layout para várias resoluções em tableless?

 

O CSS tá mais ou menos assim:

.div-topic {
	background: #E4E4E4;
	border: 1px solid #999999;
	padding: 3px;
	text-align: left;
}
.div-topico-date {
	text-align: right;
	margin: 1px;
	clear: both;
}
.div-topico-author {
	width: 136px;
	float: left;
	margin: 0 0 0 1px;
}
.div-topico-message {
	width: 850px;
	float: right;
}
body {
	font-family: Arial, Verdana;
	font-size: 11px;
}

[William Bruno 1501]

Vamos por partes como diria o Jack.

Oque você disse está errado, se você definir a cor do "div-topic"(falando nisso, não está 'redundante' os nomes das tuas classes? porque colocar esse 'div-' em todas?), todas as DIVs que estiverem dentro dela e não tiverem cores de bg declaradas "parecerão" ter a cor da DIV Pai.(o padrão é transparente, pois isso enchergamos a cor da div de tras)

Oque está acontecendo no teu caso, é que a DIV pai está sendo ESVAZIADA por causa dos floats.

<div class="div-topic">
	<div class="div-topico-date">02/04/2008</div>
	<div class="div-topico-author">tiu uiLL</div>
	<div class="div-topico-message">Blá blá blá</div>
</div>

é mais ou menos isso que você está fazendo?

O float, retira o elemento do fluxo do documento, e coloca o elemento seguinte no lugar deste. O problema é não enteder oque se está fazendo, e acabar indo pro lado mais complicado.

No caso, isso resolve, se você puder declarar um height FIXO para a DIV conteiner.

.div-topico-message {
	float: left;
}

você não exagerou no uso de DIVs? com alguns parágrafos seriam mais fáceis de lidar..

[Uriel Juliatti 0]

Vamos por partes como diria o Jack.

Oque você disse está errado, se você definir a cor do "div-topic"(falando nisso, não está 'redundante' os nomes das tuas classes? porque colocar esse 'div-' em todas?), todas as DIVs que estiverem dentro dela e não tiverem cores de bg declaradas "parecerão" ter a cor da DIV Pai.(o padrão é transparente, pois isso enchergamos a cor da div de tras)

Oque está acontecendo no teu caso, é que a DIV pai está sendo ESVAZIADA por causa dos floats.

<div class="div-topic">
	<div class="div-topico-date">02/04/2008</div>
	<div class="div-topico-author">tiu uiLL</div>
	<div class="div-topico-message">Blá blá blá</div>
</div>

é mais ou menos isso que você está fazendo?

O float, retira o elemento do fluxo do documento, e coloca o elemento seguinte no lugar deste. O problema é não enteder oque se está fazendo, e acabar indo pro lado mais complicado.

No caso, isso resolve, se você puder declarar um height FIXO para a DIV conteiner.

.div-topico-message {
	float: left;
}

você não exagerou no uso de DIVs? com alguns parágrafos seriam mais fáceis de lidar..

Exato tiu uill. Essa é uma boa dica, porque geralmente iniciante não usa muito parágrafos ou títulos, aí cria um monte de div pra cada coisa ao inves de padronizar todas com parágrafos.

 

Uma boa dica mesmo para não deixar o código com excessos.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Giovani 104]

Ótimo link para estudar: http://forum.imasters.com.br/index.php...st&p=536888

[Wanderson Regis Silva 0]

+----------------------------+
|							|
+-----+----------------------+
|	 |					  |
|	 |					  |
|	 |					  |
|	 |					  |
+-----+----------------------+

É mais ou menos assim que quero que fique!

Em cima de tudo a data e poucas outras coisas, às esquerda dados do autor da mensagem, e à direita a mensagem. O probleme é que não tenho como saber o tamanho da mensagem, pode ter uma ou duzentas linhas, então não dá pra definir tamanho fixo.

 

Tô fazendo mais ou menos da forma que você falou:

<div class="div-topic">
	<div class="div-topico-date">02/04/2008</div>
	<div class="div-topico-author">Wanderson</div>
	<div class="div-topico-message">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</div>
</div>

E acho que não foi uma simples redundância colocar 'div-' no começode todas, pois tenho outras definições CSS e isso facilita a licalização e o destino de uma classe.

[Giovani 104]

Existe algo chamado semântica. Pesquise aqui no fórum ou no google mesmo.

Caso tenha interesse pesquise sobre divmania também, aco que seria legal para você.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Wanderson Regis Silva 0]

Com isso eu quero fazer um tema pra um sistema de fórum que eu estou fazendo (tipo phpbb) e quero liberar daqui há um ou dois meses mais ou menos, será o tema padrão e queria fazê-lo com tableless, mas tô com esse tipo de problema, aqui mesmo vocês podem ver em qualquer mensagem como eu quero dispor os dados (e o ideal é que seja sem dimensões pré-definidas. Tô perguntando aqui e já tô até prevendo problemas maiores na hora de criar por exemplo o modelo de lista de tópicos, com umas seis colunas de dados. Será que não dá pra ajudar não, é que eu programo em PHP e não tenho tanta prática assim com criação de layouts. Tô tentando fazer bem simples mas tô com dificuldades.

 

Valeu a ajuda até agora.

[Wanderson Regis Silva 0]

Li agora alguns dos links, parece então que vou ter que usar tabelas pra algumas coisas né? Como a lista de tópicos.

[brcontainer 16]

mas para fazer esse desenho:

+----------------------------+
|							|
+-----+----------------------+
|	 |					  |
|	 |					  |
|	 |					  |
|	 |					  |
+-----+----------------------+

use DIVs+CSS

 

e tabelas você saberá como e onde usa-las lendo isso:

http://forum.imasters.com.br/index.php?showtopic=248704

[Wanderson Regis Silva 0]

Beleza então, vou dar uma lida e depois retorno se pintar alguma dúvida.

[Wanderson Regis Silva 0]

O link http://imasters.com.br/artigo/3638?cn=3638&cc=280 me ajudou, principalmente o exemplo http://www.brunodulcetti.com/artigos/layou...unasLiquido.htm, mas eu não tô conseguindo fazer fazer ficar 100%, ao invés de ficar assim:

+-----+----------------------+
|	 |					  |
|	 |					  |
|	 |					  |
|	 |					  |
+-----+----------------------+

fica assim:

+-----+----------------------+
|	 |					  |
|-----+					  |
|							|
|							|
+-----+----------------------+

Dêem uma olhada em como deixei (modei de classes para ids, foi atôa!):

O CSS:

body {
	font-family: Arial, Verdana;
	font-size: 11px;
}
#topic-message {
	background-color: #ffeeff;
	padding: 8px;
}
#topic-content {
	background-color: #ffccff;
	margin-left: 140;
	padding: 10px;
}
#topic-author {
	background-color: #ddaaff;
	width: 140;
	float: left;
	padding: 10px;
}

O HTML (resumedo, é claro!):

<div id="topic-message">
	<div id="topic-author"><p>Wanderson R<br />Minas Gerais - BR</p></div>
	<div id="topic-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus. Vestibulum vel justo...</p></div>
</div>

[Wanderson Regis Silva 0]

Como eu vou fazer pra deixar a primeira coluna da mesma altura que aprimeira? Eu achei até estranha o formato que apareceu pra mim, não lembro de ter visto antes, eu testei no IE6 e FF2 e deu a mesma coisa nos dois.

[Wanderson Regis Silva 0]

Um avanço, ficou do jeito que eu queria,só que só no IE6, no FF2 fica uma div embaixo da outra ao invés de na frente, comoeu arrumo isso?

body {
	margin: 10px;
	font-family: Arial, Verdana;
	font-size: 12px;
}
#topic-body {
	border: solid 1px #B8B8B8;
}
#left-col {
	float: left;
	width: 150px;
	border-right: solid 1px #BBBBBB;
	padding: 4px;
}
#right-col {
	float: left;
	padding: 4px;
}
#clearing {
	clear: both;
	width: 100%;
	height: 0;
}

<div id="topic-body">
	<div id="left-col"><p>Link 1</p><p>Link 2</p><p>Link 3</p></div>
	<div id="right-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
	<div id="clearing"></div>
</div>

[William Bruno 1501]

Ai no caso, não flutue a segunda div

#right-col {
	  /* float: left; */ /*trecho comentado, para mostrar que "tirei" esse float */
	  padding: 4px;
}

Ou declare um width definido para ela.

[Wanderson Regis Silva 0]

Se eu nãoflutuar ela, quando o texto ficar maior vai quebrar e ficar embaixo da div da esquerda que justamante o efeito que tô tentando me livrar, e eu queria justamente que essa div da direita possa se auto dimensionar de acordo com a resolução de quem está vendo a página. Deve haver alguma outra solução.

[Wanderson Regis Silva 0]

Resolvido:

#right-col {
	/*float: left;*/
	margin-left: 150px;
	padding: 10px;
}

Mas no FF o conteúdo fica colado à margem, como resolver isso?

E quando uso uma resolução muito grande, as margens ficam erradas nos dois.

 

Por mais que eu tente fazer parecido não ficar como este.

[William Bruno 1501]

Cara, não entendi.. , ficou igual aqui tanto FF como IE7.

Como assim, "colado na margen"?

 

Se você quiser um espaçamento maior, entre o texto do "right-col", e o "left-col", apenas aumente a margem do "right-col".

#right-col {
	/*float: left;*/
	margin-left: 160px; /*esse é o espaçamento entre o lado esquerdo do container e o #right-col */
	padding: 10px;
}

Por falar nisso, se fala muito em evitar nomes como "esquerda" ou "left", "vermelho" ou "red", para nomes de classes ou IDs, o melhor seria nomeá-lo, com a sua função na página.

[Wanderson Regis Silva 0]

Tipo, o conteúdo não respeita o padding, fica colado na coluna anterior.

 

Mas valeu assim mesmo, consegui ajustar através de margin-left, padding e left.