Construção de Layout

Gurzi · August 7, 2006 at 01:16 AM

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>

August 7, 2006 at 01:37 AM

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...

Gurzi · August 7, 2006 at 02:02 AM

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 😕

helt · August 7, 2006 at 03:31 AM

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.

Gurzi · August 7, 2006 at 12:43 PM

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 ?

UnKnowN · August 7, 2006 at 12:58 PM

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

}

Gurzi · August 7, 2006 at 01:14 PM

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 😕

perdido_e_sozinho · August 7, 2006 at 02:01 PM

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>)

UnKnowN · August 7, 2006 at 02:25 PM

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

helt · August 7, 2006 at 02:43 PM

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.

UnKnowN · August 7, 2006 at 02:47 PM

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"

helt · August 7, 2006 at 11:23 PM

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;">

UnKnowN · August 8, 2006 at 09:28 AM

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 😄

Mas é uma maneira de resolver, boa dica 😛

helt · August 8, 2006 at 11:06 AM

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

UnKnowN · August 8, 2006 at 01:16 PM

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

LOL eskece, confundi com:

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

joaorosa · December 23, 2006 at 10:41 PM

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

marinheiro · December 23, 2006 at 11:18 PM

suponho que a ideia seja fazer um site tableless...

joaorosa · December 29, 2006 at 06:22 PM

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

jreis · December 29, 2006 at 06:41 PM

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! 😁

Sign In

Construção de Layout

Recommended Posts

Gurzi

Guest id194

Gurzi

helt

Gurzi

UnKnowN

Gurzi

perdido_e_sozinho

UnKnowN

helt

UnKnowN

helt

UnKnowN

helt

UnKnowN

joaorosa

marinheiro

joaorosa

jreis

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information