• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Gurzi

Construção de Layout

19 mensagens neste tópico

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 :

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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o exemplo que te mandei pelo msn tinha isso bem feito, porquê que não estás a conseguir agora? e tinha muito menos css do que o que estas a usar... mas também não percebi exactamente a tua duvida neste topico...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois, desde que foste embora que tenho tentado perceber outros exemplos.. o teu consegui fazer muito bem..

mas..

a minha dúvida é.. a div do centro nao toca na div de cima porque ? queria que ficasse junta la em cima , se reparares do lado direito ves que a border não toca no topo e eu queria isso :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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 :

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 ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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" :confused:)

{

background: #111111;

color: #ffffff;

text-decoration: none;

font: verdana 12pt

}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

Não faz sentido fazeres 7 divs

Usa por exemplo uma lista (<ul><li></li></ul>)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

Não faz sentido fazeres 7 divs

Usa por exemplo uma lista (<ul><li></li></ul>)

Sim também dá, já usei, mas deu-me problemas em relação ao posicionamente central :|

De qq das maneiras é uma cena a experimentar

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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 :D

Enfim CSS Rullz :P

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 :confused:

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 :D

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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;">

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
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

Pois mas aí já não estaria a aplicar propriedades no CSS Style :D

Mas é uma maneira de resolver, boa dica :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

claro que é no css... text-align é uma proriedade css

LOL eskece, confundi com:

<div class="class1" style="background:#fff;">

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

estava agora a ler este tópico, e porque que não fazes o layout com uma tabela, com tags de colgroup?

Ficas com tudo no sítio! Depois metes os divs lá dentro e estilizas como quiseres!

Mas é só uma ideia de um rookie!!!

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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!  :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora