Layout em CSS

[Amc Cotoz 0]

Boa noite galera, preciso de vossa ajuda. Gostaria de saber se me podem indicar a melhor maneira de fazer este layout http://imageshack.us/photo/my-images/37/jdjighea.png/ usando <div> mas sem abusar dessa mesma TAG. Ou seja, nao queria nada de "DIV MANIA", poderiam dar exemplos por favor? obrigado

[Public2004 79]

Olá Amc Cotoz e seja bem vinda ao fórum!

 

Quanto a sua dúvida, acho que já começou bem quando estruturou/planejou seu documento.

No mais é conhecer e saber utilizar corretamente os elementos html (nível de bloco e inline).

Por exemplo: No seu topo tem um menu, pode ser feito com lista desordenada (ul), imagino também que o mesmo elemento pode ser aplicado ao "slider".

A área "login" em se tratando de um formulário, pode ser utilizado o próprio elemento de bloco "fieldset".

Notícias, destaques e patrocinadores..., depende de como serão apresentados.

 

Att.

[Amc Cotoz 0]

Certo obrigado mas a minha questão é se eu tenho que usar uma div para cada coisa ou seja uma div pro menu outra para cada notícia outra pro login.. Entendeu?

[allex_carvalho 124]

Para menu você não precisa usar div, porque a ul já faz essa função. Para a logo você não precisa criar uma div para receber ela, na img você poderá usar uma class. E assim por diante. Agora, onde são os blocos, tipo, noticias, publicidades, ai já é bom usar as divs.

[Amc Cotoz 0]

Obrigado pelas dicas.

 

Entretanto já começei a fazer algo, http://icantcontrolmyego.com/DUEL/ podem me dizer o que acham do código e o que melhorar por favor? Obrigado.

[Diéssica 140]

Na minha opinião, a diagramação ficou até boa. Tenho só algumas coisas pra acrescentar que podem te ajudar futuramente.

 

1 - "Abrevie" as propriedades CSS. Exemplo:

background-image: url('imagens/background.png');
background-repeat: repeat-x;

background: url('imagens/background.png') repeat-x;

Se quiser ler mais sobre: :seta: http://www.maujor.com/tutorial/abreviacss.php

 

2 - Não trabalhe com o CSS interno na página. Recomendo que o CSS seja externo, linkando-o assim na tag head. Ajuda não só na organização como no carregamento.

<link rel="stylesheet" href="css/default.css" type="text/css" />

Mais sobre CSS externo e seus tipos: :seta: http://www.maujor.com/tutorial/alternatecss.php

 

3 - Utilize float para posicionar os elementos na página (colunas).

#main {
width: 650px;
height: 1138px;
background-color: #FFFFFF;
margin-top: 75px;
}
#main2 {
width: 326px;
height: 933px;
background-color: #FFFFFF;
margin: 0px;
margin-left: 650px;
margin-top: -935px;
}

Me desculpa se eu estiver errada, mas #main ficaria float:left e #main2 ficaria float:right. Não esquece que tu deve pôr as larguras corretas ;)

:seta: http://www.w3schools.com/cssref/pr_class_float.asp

 

4 - Menos importante e mais agradável: deixe o menu normal: Home | News | Divisions e adicione no menu ul:

text-transform:uppercase;

Todos os textos do elemento com letra maíuscula. :seta: http://www.w3schools.com/cssref/pr_text_text-transform.asp

 

E achei isso coisa de gente preguiçosa: http://icantcontrolmyego.com/DUEL/imagens/login.png, não era melhor ter dividido pro box poder expandir conforme o conteúdo colocado nele?

 

Tenta usar MENOS imagens e MAIS texto também. Um exemplo é o copyright (do rodapé): http://icantcontrolmyego.com/DUEL/imagens/rodape.png.

 

:bye: