Ir para conteúdo
Fórum CódigoFonte.net

Plastico Bolha

Membros
  • Total de itens

    3
  • Registro em

  • Última visita

  1. Oi pessoal, eu tenho uma dúvida sobre a página abaixo, e é sobre o "float: left;". O meu float left tem o poder de empurra o meu bloco chamado content. Exemplo: se eu colocar right no meu float, então e eu consigo empurrar o bloco content para a direita junto com o meu float. Isso acontece porque o bloco onde esta o meu float esta pegando tudo fazendo com que o meu float tenha uma maior precedencia ? Ou é outra coisa ? CSS: html { height: 100%; text-align: center; } body { background-color: #dcdcdc; margin: 0px auto 20px auto; font-family: verdana, arial; font-size: 12px; color: #999999; height: 100%; text-align: center; } /* #aaa{ width: 10px; margin: 0px auto 0px auto; } */ .bdiv { background-image: url(./images/bgy.jpg); background-repeat: repeat-y; width: 800px; margin: 10px auto 50px auto; } .bdiv img {margin: 0px; display: block; } div { margin: 0px; } .content { margin: 0px 0px 0px 180px; text-align: left; width: 535px; } .links { /* AQUI ESTA OS LINKS NO CSS */ width: 160px; float: left; margin: 0px 0px 0px 14px; text-align: left; } /* a { color: #aaaaaa; letter-spacing: 1.8px; text-decoration: none; padding: 0px 2px 0px 2px; } */ /* a:hover { border-bottom: 1px dotted #aaaaaa; background-color: #ffffff; color: #7a6083; } */ /* .links a { display: block; margin: 0px 10px 2px 10px; border-bottom: 1px solid #eeeeee; padding: 2px; font-size: 11px; background-color: #efeeee; } */ /* .links a:hover { background-color: #c8b7ce; color: #eeeeee; border-bottom: 1px dotted #eeeeee; } */ /* .links a:first-letter { color: #cccccc; margin: 0px 1px 0px 2px; } */ /* .ftdiv { height: 40px; background-image: url(./images/footer.jpg); background-repeat: no-repeat; width: 800px; text-align: left; } */ /* .ftdiv p { margin: 0px 70px 0px 185px; padding: 0px 0px 0px 0px; color: #777777; font-size: 10px; text-align: center; } */ /* .ftdiv a { background-color: transparent; letter-spacing: 1.5px; } */ /* .ftdiv a:hover { background-color: #ffffff; } */ /* .content p { margin: 12px 2px 12px 10px; } */ /* h1 { color: #888888; font-weight: 100; font-size: 14px; background-image: url(./images/h1.jpg); background-repeat: no-repeat; height: 40px; width: 543px; padding: 11px 0px 0px 5px; margin: 10px 0px -5px 0px; text-align: center; letter-spacing: 3px; font-family: verdana, arial; } */ /* h2 { text-align: right; color: #666666; font-weight: 100; font-size: 10px; letter-spacing: 1.5px; margin: 0px 35px 20px 0px; } */ /* .content img { margin: 3px; } */ /* h4 { text-align: center; text-transform: uppercase; border-bottom: 1px solid #999999; letter-spacing: 1.5px; margin: 10px 10px 10px 10px; font-size: 12px; font-weight: 100; color: #7a6083; } */ /* .links div { background-color: #eeeeee; margin: 0px 10px 0px 10px; font-size: 9px; padding: 2px; border-bottom: 0px solid #999999; } */ /* .links div a { margin:2px 0px 2px 0px; } */ /* .links p { margin: 2px; } */ HTML: <html> <head> <!--Inicia o titulo do site--> <title>TITULO DA PAGINA</title> <!--Termina o titulo do site--> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="hack3rhat3r" /> </head> <body> <div class= "bdiv"> <div><img src= "./images/banner_01.jpg" height= "29" alt= ""/> <img src= "./images/banner_02.jpg" height= "29" alt= "" /> <img src= "./images/banner_03.jpg" height= "33" alt= "" /> <img src= "./images/banner_04.jpg" height= "30" alt= "" /> <img src= "./images/banner_05.jpg" height= "32" alt= "" /> <img src= "./images/banner_06.jpg" height= "43" alt= "" /></div> <div class= "links"> /* LINKS COMEÇAM AQUI */ <div class= "content"> /* CONTENT COMEÇA AQUI !! */ <h1>About The Design</h1> <p><img src= "./images/avi.jpg" style= "float: left;" alt= "" />balbalbalblablalblalblab</p> <p>I <a href= "#">enjoyed</a> balbalbalblablalblalblab</p> <h2>balbalbalblablalblalblab</h2> <h1>balbalbalblablalblalblab</h1> <p>balbalbalblablalblalblab.</p> <p>balbalbalblablalblalblab.</p> <p>balbalbalblablalblalblab</p> <h2>balbalbalblablalblalblab</h2> </div> /* CONTENT TERMINA AQUI !! */ <h4>Update</h4> <div><p>balbalbalblablalblalblab </p> <a href= "#">xbalbalbalblablalblalblab..</a> </div> <h4>balbalbalblablalblalblab</h4> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <h4>balbalbalblablalblalblab</h4> <a href= "#">~balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> </div>/* LINKS TERMINAM AQUI */ </div> </body> </html> Obrigado pela paciência sou iniciante \@/
  2. Descobri ! O erro estava neste trecho: <div class= "bdiv"> <!-- 1ª div começa aqui --> <div> <!-- 2ª div começa aqui --> <img src= "./images/banner_01.jpg" height= "29" alt= ""/> <img src= "./images/banner_02.jpg" height= "29" alt= "" /> <img src= "./images/banner_03.jpg" height= "33" alt= "" /> <img src= "./images/banner_04.jpg" height= "30" alt= "" /> <img src= "./images/banner_05.jpg" height= "32" alt= "" /> <img src= "./images/banner_06.jpg" height= "43" alt= "" /> </div> <!-- 2ª div termina aqui --> <!-- <div> O 1ª div deveria terminar aqui, mas eu não fechei ele, então ele "vasou" pra página toda --> <!-- O erro estava nesta linha --> Quando eu coloquei o div que faltava, somente a imagem foi centralizada.
  3. Oi pessoal, eu não consigo compreender uma coisa. Tenho um trecho de código CSS assim: .bdiv { /* background-image: url(./images/bgy.jpg);*/ /*background-repeat: repeat-y; */ width: 800px; margin: 10px auto 50px auto; } Esse código acima deixa "TODA" a página no meio. No entando o .bdiv esta somente nesse trecho do meu html: <div class= "bdiv"> <div><img src= "./images/banner_01.jpg" height= "29" alt= ""/> <img src= "./images/banner_02.jpg" height= "29" alt= "" /> <img src= "./images/banner_03.jpg" height= "33" alt= "" /> <img src= "./images/banner_04.jpg" height= "30" alt= "" /> <img src= "./images/banner_05.jpg" height= "32" alt= "" /> <img src= "./images/banner_06.jpg" height= "43" alt= "" /> </div> Eu não entendo porque TODA a página fica centralizada e não somente a imagem banner 1,2,3,4,5,6 O código inteiro esta abaixo: CSS: /*html { height: 100%; text-align: right; } */ /* body { background-color: #dcdcdc; margin: 0px auto 20px auto; font-family: verdana, arial; font-size: 12px; color: #999999; height: 100%; text-align: left; } */ .bdiv { /* background-image: url(./images/bgy.jpg);*/ /*background-repeat: repeat-y; */ width: 800px; margin: 10px auto 50px auto; } .bdiv img {margin: 0px; display: block; } /* div { margin: 0px; } */ /* .content { margin: 0px 80px 0px 184px; text-align: left; width: 535px; } */ /* .links { width: 160px; float: left; margin: 0px 0px 0px 14px; text-align: left; } */ /* a { color: #aaaaaa; letter-spacing: 1.8px; text-decoration: none; padding: 0px 2px 0px 2px; } */ /* a:hover { border-bottom: 1px dotted #aaaaaa; background-color: #ffffff; color: #7a6083; } */ /* .links a { display: block; margin: 0px 10px 2px 10px; border-bottom: 1px solid #eeeeee; padding: 2px; font-size: 11px; background-color: #efeeee; } */ /* .links a:hover { background-color: #c8b7ce; color: #eeeeee; border-bottom: 1px dotted #eeeeee; } */ /* .links a:first-letter { color: #cccccc; margin: 0px 1px 0px 2px; } */ /* .ftdiv { height: 40px; background-image: url(./images/footer.jpg); background-repeat: no-repeat; width: 800px; text-align: left; } */ /* .ftdiv p { margin: 0px 70px 0px 185px; padding: 0px 0px 0px 0px; color: #777777; font-size: 10px; text-align: center; } */ /* .ftdiv a { background-color: transparent; letter-spacing: 1.5px; } */ /* .ftdiv a:hover { background-color: #ffffff; } */ /* .content p { margin: 12px 2px 12px 10px; } */ /* h1 { color: #888888; font-weight: 100; font-size: 14px; background-image: url(./images/h1.jpg); background-repeat: no-repeat; height: 40px; width: 543px; padding: 11px 0px 0px 5px; margin: 10px 0px -5px 0px; text-align: center; letter-spacing: 3px; font-family: verdana, arial; } */ /* h2 { text-align: right; color: #666666; font-weight: 100; font-size: 10px; letter-spacing: 1.5px; margin: 0px 35px 20px 0px; } */ /* .content img { margin: 3px; } */ /* h4 { text-align: center; text-transform: uppercase; border-bottom: 1px solid #999999; letter-spacing: 1.5px; margin: 10px 10px 10px 10px; font-size: 12px; font-weight: 100; color: #7a6083; } */ /* .links div { background-color: #eeeeee; margin: 0px 10px 0px 10px; font-size: 9px; padding: 2px; border-bottom: 0px solid #999999; } */ /* .links div a { margin:2px 0px 2px 0px; } */ /* .links p { margin: 2px; } */ html: <html> <head> <!--Inicia o titulo do site--> <title>TITULO DA PAGINA</title> <!--Termina o titulo do site--> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="hack3rhat3r" /> </head> <body> <div class= "bdiv"> <div><img src= "./images/banner_01.jpg" height= "29" alt= ""/> <img src= "./images/banner_02.jpg" height= "29" alt= "" /> <img src= "./images/banner_03.jpg" height= "33" alt= "" /> <img src= "./images/banner_04.jpg" height= "30" alt= "" /> <img src= "./images/banner_05.jpg" height= "32" alt= "" /> <img src= "./images/banner_06.jpg" height= "43" alt= "" /></div> <div class= "links"> <h4>Update</h4> <div><p>balbalbalblablalblalblab </p> <a href= "#">xbalbalbalblablalblalblab..</a> </div> <h4>balbalbalblablalblalblab</h4> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <h4>balbalbalblablalblalblab</h4> <a href= "#">~balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> <a href= "#">~ balbalbalblablalblalblab</a> </div> <div class= "content"> <h1>About The Design</h1> <p><img src= "./images/avi.jpg" style= "float: left;" alt= "" />balbalbalblablalblalblab</p> <p>I <a href= "#">enjoyed</a> balbalbalblablalblalblab</p> <h2>balbalbalblablalblalblab</h2> <h1>balbalbalblablalblalblab</h1> <p>balbalbalblablalblalblab.</p> <p>balbalbalblablalblalblab.</p> <p>balbalbalblablalblalblab</p> <h2>balbalbalblablalblalblab</h2> </div> </div> </body> </html> Obrigado pela paciência
×
×
  • Criar Novo...