Jump to content

Construção de Layout


Gurzi
 Share

Recommended Posts

Malta , não sei se é normal demorar mais do que 5 horas a aprender CSS mas isto está mau.. estou aqui com umas dúvidas maradas..

Vejam Isto :

http://img356.imageshack.us/img356/7383/errocssqo2.jpg

consigo por certo, ou seja a div do centro a tocar lá em cima se fiz margin-top: -101px; o que acho que não é a melhor forma..

Acho que estou um pouco baralhado como começar ou seja, neste caso tenho 3 divs se começo pela de cima, pela esquerda, pela direita..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#banner {
	background:white;
	height:40px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	margin-left:10px;
	top:20px;
	width:900px;
	z-index:1;
	}
#leftcontent{
background:white;

margin-left:10px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
width:190px;
height:100px;
z-index:3;
}
#center{
background:white;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
width:700px;
height:300px;
margin-top:-101px;

margin-left:201px;
margin-right:201px;
z-index:3;
}


}
</style>
</head>
<div id="banner">
</div>
<div id="leftcontent">
</div>
<div id="center">
</div>
</body>
</html>
Link to comment
Share on other sites

Não devias defenir top e z-index enquanto não defenires position.

O teu caso não precisa de muita coisa, tens apenas 2 colunas paralelas. Vou-te dar uns conselhos, pode ser que ajude:

  Evita sempre que possível os valores fixos de largura, opta por valores percentuais.

O modo mais fácil de conseguires colocar 2 divs lado a lado, é usares o float. Usa float left para as divs #leftcontent e #center. O valor width é importante quando estás a usar o float, pois o float tende a fazer quebra de linha quando é "apertado". Para evitar isso certifica-te que os valores de width nessas duas divs não ultrapassam os 100%, ou que juntos não tenham a maior largura do layout, no caso de estares a trabalhar com pixéis. Isto deve fazer o que queres, que é ter essas 2 div's lado a lado. Após isso,as div's com float deverão se sobrepôr à div #banner. Para evitares isso atribui um valor de largura maior para #banner (100% por exemplo). Se continuar por trás das outras duas, talvez seja boa ideia também usares o float:left, ou então em vez disso, talvez um display: block.

––––•(-• [ ђєlt ] •-)•––––

Link to comment
Share on other sites

Obrigado pelas dicas.

Outra coisa, nesse caso eu tinha 3 divs mas devo fazer uma div geral que vai ser tipo o layout completo por exemplo

#total { height:800px;

            width:600px;

    }

ou não ?

estava a tentar seguir uns tutoriais a ver se sozinho conseguia fazer, o que preciso realmente é disto :

http://img309.imageshack.us/img309/5972/esteoi4.jpg

so que n entendo bem ou seja

La em cima no topo preciso de 2 divs certo ?

depois do lado esquerdo preciso de 1 que é a div geral e depois 7 menus la dentro ou seja 8 divs ?

depois mais 2 divs centrais ?

Link to comment
Share on other sites

depois do lado esquerdo preciso de 1 que é a div geral e depois 7 menus la dentro ou seja 8 divs ?

Repara, podes usar 1 style para os "a href's", ou seja, tu vais usar butoes para cada caminho, por exemplo, Home, Contactos, Links, etc, cada um vai ter 1 caminho (1 a href) por isso podes, em vez de cirares mais 7 div's além da 1ª, fazer o tal style para os "a's", ficariam por exemplo assim:

div#um-> a 1ª div (a principal, o menu portanto)

div#um a

{

background: #ffffff;

color: #111111;

text-decoration: none;

font: verdana 12pt

}

e depois podes fazer 1 para quando passas com o "dedo" por cima de cada um:

div#um a:hover (sim com "h" 😕 )

{

background: #111111;

color: #ffffff;

text-decoration: none;

font: verdana 12pt

}

Link to comment
Share on other sites

O css consegue-te formatar prácticamente qq elemento que tenhas na página, e tal como queres. <ul><li> por exemplo, são interpretadas de um modo padrão por cada browser, mas tu tens o css e podes dizer ao browser que não é assim que queres, porque as tuas preferências sobrepôem-se aos padrões do browser. <ul><li> são formatados pelo browser pelos parâmetros list-style e padding, e acho que só... podes brincar com esses dois valores até conseguires o que queres. Quanto ao posicionamento, se não o conseguires fazer pelo <ul> mete uma div à volta com a propriedade text-align:center.

––––•(-• [ ђєlt ] •-)•––––

Link to comment
Share on other sites

O css consegue-te formatar prácticamente qq elemento que tenhas na página, e tal como queres. <ul><li> por exemplo, são interpretadas de um modo padrão por cada browser, mas tu tens o css e podes dizer ao browser que não é assim que queres, porque as tuas preferências sobrepôem-se aos padrões do browser. <ul><li> são formatados pelo browser pelos parâmetros list-style e padding, e acho que só... podes brincar com esses dois valores até conseguires o que queres. Quanto ao posicionamento, se não o conseguires fazer pelo <ul> mete uma div à volta com a propriedade text-align:center.

lol isso foi oq ue fiz, mas embora as marcações "bolinhas" da lista saiam com a propriedade "list-style-type: none" elas continuam a estar la, mas invisivelmete, ou seja com o align center aquilo vai estar sempre alinhado mais à direita...

Nada que nao se resolva com um position: absolute e depois damos as coordenadas que queremos 😄

Enfim CSS Rullz 😛

sim mas faria a #div1

depois se o menu menu tivesse 7 opcções teria que fazer 7 divs certo ?

estou um pouco baralhado, comecei a aprender ontem 😕

Tens razão pah! lol

Tipo nao tinha reparado mas se queres para cada botao 1 cor diferente entao teras de usar mesmo div's diferentes, em que entre elas só mudarás a cor 😄

Se tivessem todas a mesma cor poderias usar 1 estilo para todos os "a href's"

Link to comment
Share on other sites

Epa, usar position absolute para o <ul> ainda vá que não vá, mas para os <li>'s terias dar dar um valor diferente a cada para não ficarem uns em cima dos outros.

Quando falas em alinhar à direita não sei se tás a falar do texto ou do próprio elemento, se for o texto isso resolve-se com um text-align:center, se for o elemento, podes usar a mesma propriedade num elemento anterior, ou ajustar a posição com as propriedades margin ou padding.

Para o caso da formatação dos menus, usa uma classe igual para todos, para assim defenires as propriedades que eles têm em comum. E depois para a côr defines inline. Por ex: <div class="class1" style="background:#fff;">

––––•(-• [ ђєlt ] •-)•––––

Link to comment
Share on other sites

eu faço alguns websites.

faço com tabelas com o border = 0, logo fica tudo organizado lá dentro sem se ver as tabelas...

depois encaixo div's, trabalho as css... penso que é mais fácil e "seguro", visto que com o colgroup as tabeas ficam fixas, logo ficam iguais no ie, ff opera, safari...

mas é só uma ideia...

não sei se ajuda muito!!!

cps

Link to comment
Share on other sites

Tabelas é uma coisa que não se deveria usar em layouts, por várias razões:

- uma tabela é feita para mostrar dados tabulares, não para criar um layout (pormenor de semântica, talvez o menos interessantes e "teórico");

- quando é preciso manuntenção, pode ser muito complicado alterar tabelas;

- geralmente layouts com tabelas utilizam mark-up inválido em termos de XHMTL;

- o código tem tendência a fica muito denso, com uma baixa relação código/conteúdo, ou seja em muitos casos vai haver páginas em que o que pesa mais não é o texto e/ou outros conteúdos que possa ter, mas sim o próprio código para definir o layout (neste caso as tabelas). Seria um pouco como ir ao talho, levar 300g de bifes num saco que pesa 700g, e pagar como sendo 1Kg de bifes (ok, isto é uma comparação estúpida, mas da pra perceber a ideia);

- se quiseres adaptar o layout para PDAs/telemoveis/impressoras/etc, é muito mais fácil/rápido/simples usando layouts definidos por CSS

- outras razões que não referi, mas que com certeza existem

Por outro lado, pode ser uma dor de cabeça enorme por tudo a funcionar sem tabelas, nos browsers mais populares, e em relação a isso, as tabelas são muito mais fáceis e rápidas de executar, isso é verdade!  😁

"Pensa positivo: tudo pode piorar"

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.