Gurzi Posted August 7, 2006 at 01:16 AM Report Share #42714 Posted 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> Link to comment Share on other sites More sharing options...
Guest id194 Posted August 7, 2006 at 01:37 AM Report Share #42715 Posted 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... Link to comment Share on other sites More sharing options...
Gurzi Posted August 7, 2006 at 02:02 AM Author Report Share #42717 Posted 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 😕 Link to comment Share on other sites More sharing options...
helt Posted August 7, 2006 at 03:31 AM Report Share #42718 Posted 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. ––––•(-• [ ђєlt ] •-)•–––– Link to comment Share on other sites More sharing options...
Gurzi Posted August 7, 2006 at 12:43 PM Author Report Share #42782 Posted 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 ? Link to comment Share on other sites More sharing options...
UnKnowN Posted August 7, 2006 at 12:58 PM Report Share #42786 Posted 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 } Link to comment Share on other sites More sharing options...
Gurzi Posted August 7, 2006 at 01:14 PM Author Report Share #42788 Posted 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 😕 Link to comment Share on other sites More sharing options...
perdido_e_sozinho Posted August 7, 2006 at 02:01 PM Report Share #42800 Posted 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>) Link to comment Share on other sites More sharing options...
UnKnowN Posted August 7, 2006 at 02:25 PM Report Share #42808 Posted 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 Link to comment Share on other sites More sharing options...
helt Posted August 7, 2006 at 02:43 PM Report Share #42811 Posted 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. ––––•(-• [ ђєlt ] •-)•–––– Link to comment Share on other sites More sharing options...
UnKnowN Posted August 7, 2006 at 02:47 PM Report Share #42815 Posted 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" Link to comment Share on other sites More sharing options...
helt Posted August 7, 2006 at 11:23 PM Report Share #42948 Posted 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;"> ––––•(-• [ ђєlt ] •-)•–––– Link to comment Share on other sites More sharing options...
UnKnowN Posted August 8, 2006 at 09:28 AM Report Share #42994 Posted 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 😛 Link to comment Share on other sites More sharing options...
helt Posted August 8, 2006 at 11:06 AM Report Share #43009 Posted August 8, 2006 at 11:06 AM claro que é no css... text-align é uma proriedade css ––––•(-• [ ђєlt ] •-)•–––– Link to comment Share on other sites More sharing options...
UnKnowN Posted August 8, 2006 at 01:16 PM Report Share #43035 Posted 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;"> Link to comment Share on other sites More sharing options...
joaorosa Posted December 23, 2006 at 10:41 PM Report Share #72184 Posted 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 Link to comment Share on other sites More sharing options...
marinheiro Posted December 23, 2006 at 11:18 PM Report Share #72188 Posted December 23, 2006 at 11:18 PM suponho que a ideia seja fazer um site tableless... há 10 tipos de pessoas: as que sabem binário e as que não sabem... todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final.. Link to comment Share on other sites More sharing options...
joaorosa Posted December 29, 2006 at 06:22 PM Report Share #73282 Posted 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 Link to comment Share on other sites More sharing options...
jreis Posted December 29, 2006 at 06:41 PM Report Share #73290 Posted 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! 😁 "Pensa positivo: tudo pode piorar" Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now