Jump to content

layout 3 colunas


neverdie814
 Share

Recommended Posts

Bom dia a todos,

Estou a precisar urgentemente da vossa preciosa ajuda, é o seguinte:

Queria colocar 3 DIVs (3 colunas) estas tinham que ter uma altura mínima igual a janela do Browser, as duas colunas da direita e da esquerda deviam ter uma largura fixe que no caso é de 145px e por fim a largura das  3 colunas devia ocupar a janela do Browser.

Se alguém tiver por ai um layout que correspondesse a esta descrição agradecia.

Marco

Link to comment
Share on other sites

Podes usar o seguinte esquema para começar

pagina

    topo

    menu

    conteudo

        col01

        col02

        col03

    rodape

Depois no css usas as propriedades para fazer o float, tipo assim:

div#col01, div#col02, div#col03 {float:left;}

Depois defines em cada div a largura da pagina que queres

Podes começar por ai

Adicionei a div pagina que te permite manipular melhor a tua pagina.

Link to comment
Share on other sites

1º coisa, se queres que as 3 colunas tenham 145px cada uma, nunca te vao ocupar a largura da pagina toda!

Por tabelas:

<table style="width: 100%; height:100%;">
<tr>
	<td width="145px"> </td>
	<td width="145px"> </td>
	<td width="145px"> </td>
</tr>
</table>

Por divs e spans:

<div id="contemtudo" style="width:100%; height:100%; text-align:center">
<span style="width:145px"> </span>
<span style="width:145px"> </span>
<span style="width:145px"> </span>
</div>

Penso que é isto... não testei!

Link to comment
Share on other sites

Quando digo que span não cria caixa refiro-me ao box model

Mas se alguém tiver algo contra, por favor, não me deixem ficar em erro.

E depois, yoda, deves concordar comigo que não se deve usar span para criar uma coluna num layout, ou não ?

Quando algém não simpatiza conosco, arranja sempre um ponto ou uma virgula para discordar.

Link to comment
Share on other sites

Não vejo porque não se pode usar o box model com spans, são elementos como as divs. Teoricamente, faz sentido usar as divs para dividir conteúdo, mas na prática tal é possível também com spans, e não se incorre em nenhuma violação de regras nem há problemas com o rendering os browsers. É única e exclusivamente uma questão teórica, de organização.

Mas se quiseres ir por "boas práticas", é comum usar-se um CSS Reset nos sites de modo a standardizar certas definições-padrão dos browsers para que incorram menos problemas e seja mais simples formatar um documento, e esses CSS Reset por norma limpar o box-model padrão dos browsers também, tornando as divs e spans iguais na prática.

Link to comment
Share on other sites

Desculpa, mas estás errado

Usar span para isso, viola a semântica

Repara, tu não deves usar h1 para paragrafos assim como não deves usar span para fazer divisões em layout.

Experimenta fazer assim

<p>

    paragrafo 1

</p>

<p>

    Paragrafo 2

</p>

Agora experimenta

<p>

    texto p

</p>

<span>

texto span

</span>

Se não usares * {

margin:0;

padding:0;

}

Esperimenta e percebe o que eu queria dizer

Link to comment
Share on other sites

Repara, tu não deves usar h1 para paragrafos assim como não deves usar span para fazer divisões em layout.

Porque insistes quando me parece que fui claro o suficiente na minha resposta? Não dever é diferente de não poder. Aquilo que deste a entender acima foi que os spans não dão para simular o box-model, o que é erróneo. Esta tua última resposta confirma aquilo que disse.

Link to comment
Share on other sites

Claro

Eu não devo matar ninguém, mas eu posso

Eu não devo tomar drogas, mas eu posso

Eu não devo muito coisa, mas eu posso muita coisa

Eu disse, que não é correcto usar span para criar as divisões do layout

Mas posso.

Quando não se gosta de uma pessoa, tudo serve de arma de ataque.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.