locked
Como criar layout em CSS RRS feed

  • Pergunta

  • Olá pessoal, comecei desenvolver um web site e resolvi organizar o layout com divs e css... tenho 5 divs: header, leftpanel, rightpanel, content e footer... porém não consigo que as divs leftpanel, content e rightpanel fiquem lado a lado... elas aparecem uma embaixo da outra...

    Como fazer isso?

    domingo, 13 de junho de 2010 00:10

Respostas

  • Hi,

    Amigo, eu usaria um table mas se voce inceste em divs experimente esse codigo.

    para IE:

    <div style="background-color: black; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: yellow; height: 100px; width: 100px;"></div>

    <div style="background-color: green; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: red; height: 100px; width: 100px;float: left;" ></div>

    para chrome :

    <div style="background-color: black; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: yellow; height: 100px; width: 100px; position: relative; left: 100px;" ></div>

    <div style="background-color: green; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: red; height: 100px; width: 100px; float: left;" ></div>

    o style float: left; vai posicionar o primeiro div no canto esquerdo e para posicionar o segundo ao lado no chrome eu uso o position: relative e o left: 100px que e o tamanho do primeiro div, no IE nao precisa do position e do left.

    os de baixo ficam um ao lado do outro normalmente e se eu quiser acrescentar mais dois div abaixo desses formando duas colunas e tres linhas eu colocaria o quinto div com position: relative e left: 100px pra quebrar a linha e posicionar ele abaixo dos demais isso para o chrome, para o IE e so tirar o position e o left.

    use essei site pra testar. http://htmledit.squarefree.com/

    Att,


    Adriel Codeco Silva Microsoft Partner http://adrielcodeco.wordpress.com www.uppercase.com.br adrielcodeco@hotmail.com
    terça-feira, 15 de junho de 2010 22:43
    Moderador
  • <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
      <title>Untitled Page</title>
      <style type="text/css">
        #container, #header, #content, #leftPanel, #rightPanel, #footer
        {
          border: solid 1px #000000;  
        }
        #leftPanel, #rightPanel
        {
          width: 100px;
          float: left;
        }
        
        #footer
        {
          clear: both;  
        }
      </style>
    </head>
    <body>
    <div id="container">
      <div id="header"></div>
      <div id="content">
        <div id="leftPanel"></div>
        <div id="rightPanel"></div>
      </div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    
    sexta-feira, 16 de julho de 2010 11:34
  • Segue HTML com Cabeçalho, 3 Coluna, Rodapé e Centralizado na tela.

    O criei uma base do zero. Pode usar que funciona! rsrsrsrs...

    Abs

     

    <!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>
      <title>.:: Teste ::.</title>
      <style type="text/css">
    		body 
    		{
    			margin:0;
    			padding:0;
    			background-color: #e9e9e9;
    		}
    
    		#conteiner
    		{
    			position: relative;
    			width: 1002px;
    			min-height: 100%;
    			margin: 0 auto;
    			border: 1px solid #cccccc;
    			background-color: #ffffff;
    		}
    		
    		.header
    		{
    			position: relative;
    			width: 1002px;
    			height: 100px;
    			border-bottom: 1px solid #cccccc;
    		}
    		
    		.conteiner
    		{
    			position: relative;
    			min-height: 300px;
    			height: 100%;
    			padding-bottom: 10px;
    		}
    		
    		.panelLeft
    		{
    			float: left;
    			width: 120px;
    			background-color: #e9e9e9;
    			padding: 10px;
    		}
    		
    		.text
    		{
    			float: left;
    			width: 700px;
    			min-height: 350px;
    			height: 100%;
    			border-left: 1px solid #cccccc;
    			border-right: 1px solid #cccccc;
    			padding: 10px;
    		}
    		
    		.panelRight
    		{
    			float: left;
    			width: 120px;
    			background-color: #e9e9e9;
    			padding: 10px;			
    		}
    		
    		.clear
    		{
    			clear: both;
    		}
    		
    		.footer
    		{
    			position: relative;
    			width: 1002px;
    			height: 50px;
    			border-top: 1px solid #cccccc;
    		}
      </style>
    </head>
    <body>
      <div id="conteiner">
        <div class="header">
          Cabeçalho
        </div>
    
        <div class="conteiner">
          <div class="panelLeft">Painel Esquerdo</div>
    			<div class="text">Texto.</div>
    			<div class="panelRight">Painel Direito</div>
        </div>
    		
    		<div class="clear"></div>
    
        <div class="footer"><!-- INÍCIO DA DIV RODAPÉ -->
        	Rodapé
        </div>
    	</div>
    </body>
    </html>
    
    
    

    sexta-feira, 3 de setembro de 2010 18:59

Todas as Respostas

  • Hi,

    Amigo, eu usaria um table mas se voce inceste em divs experimente esse codigo.

    para IE:

    <div style="background-color: black; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: yellow; height: 100px; width: 100px;"></div>

    <div style="background-color: green; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: red; height: 100px; width: 100px;float: left;" ></div>

    para chrome :

    <div style="background-color: black; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: yellow; height: 100px; width: 100px; position: relative; left: 100px;" ></div>

    <div style="background-color: green; height: 100px; width: 100px; float: left;" ></div>

    <div style="background-color: red; height: 100px; width: 100px; float: left;" ></div>

    o style float: left; vai posicionar o primeiro div no canto esquerdo e para posicionar o segundo ao lado no chrome eu uso o position: relative e o left: 100px que e o tamanho do primeiro div, no IE nao precisa do position e do left.

    os de baixo ficam um ao lado do outro normalmente e se eu quiser acrescentar mais dois div abaixo desses formando duas colunas e tres linhas eu colocaria o quinto div com position: relative e left: 100px pra quebrar a linha e posicionar ele abaixo dos demais isso para o chrome, para o IE e so tirar o position e o left.

    use essei site pra testar. http://htmledit.squarefree.com/

    Att,


    Adriel Codeco Silva Microsoft Partner http://adrielcodeco.wordpress.com www.uppercase.com.br adrielcodeco@hotmail.com
    terça-feira, 15 de junho de 2010 22:43
    Moderador
  • Olá Guilherme,

     

    como está o seu CSS?

    Tem como postar pra mim dar uma olhada? as vezes usando float: left; no css já resolve...

    posta o código que eu vejo mais detalhes...

     

    Abs...

    segunda-feira, 28 de junho de 2010 16:11
  • ja tive esse problema e acho que eh melhor fazer com table mesmo. ate pq depois fica certo em um navegador mas em outro naum funciona.
    quarta-feira, 30 de junho de 2010 02:45
  • Bom,

    Na minha opnião é melhor trabalhar com Div's.

     

    Desde os 15 anos de idade que trabalho com desenvolvimento de sites, e há 1 ano e meio estou trabalhando com .NET para WEB.

    Trabalhar com DIV é melhor do que Table, pois o site fica mais leve e rápido, e também é de acordo com os padrões da W3C.

    Uso de tabelas? bom, eu já usei muito, desenvolvi muitos trabalhos com tabelas.

    É mais fácil? Realmente era mais fácil, pois com a ajuda do Photoshop vc fatiava o layout e ele montava o HTML com TABLES...

    Por que então usar Divs? Site leve, rápido, facilidade na manutenção. Sendo que a facilidade na manutenção é o que mais conta, o código HTML fica muito mais limpo do que com Tables, o trabalho no começo é um pouco complicado, mas depois que pega o conhecimento necessário, é muito mais prazeroso trabalhar com Divs... rsrsrs.

     

    Fico a disposição para tirar mais dúvidas...

     

    Abs...

    quarta-feira, 30 de junho de 2010 12:10
  • <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
      <title>Untitled Page</title>
      <style type="text/css">
        #container, #header, #content, #leftPanel, #rightPanel, #footer
        {
          border: solid 1px #000000;  
        }
        #leftPanel, #rightPanel
        {
          width: 100px;
          float: left;
        }
        
        #footer
        {
          clear: both;  
        }
      </style>
    </head>
    <body>
    <div id="container">
      <div id="header"></div>
      <div id="content">
        <div id="leftPanel"></div>
        <div id="rightPanel"></div>
      </div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    
    sexta-feira, 16 de julho de 2010 11:34
  • Segue HTML com Cabeçalho, 3 Coluna, Rodapé e Centralizado na tela.

    O criei uma base do zero. Pode usar que funciona! rsrsrsrs...

    Abs

     

    <!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>
      <title>.:: Teste ::.</title>
      <style type="text/css">
    		body 
    		{
    			margin:0;
    			padding:0;
    			background-color: #e9e9e9;
    		}
    
    		#conteiner
    		{
    			position: relative;
    			width: 1002px;
    			min-height: 100%;
    			margin: 0 auto;
    			border: 1px solid #cccccc;
    			background-color: #ffffff;
    		}
    		
    		.header
    		{
    			position: relative;
    			width: 1002px;
    			height: 100px;
    			border-bottom: 1px solid #cccccc;
    		}
    		
    		.conteiner
    		{
    			position: relative;
    			min-height: 300px;
    			height: 100%;
    			padding-bottom: 10px;
    		}
    		
    		.panelLeft
    		{
    			float: left;
    			width: 120px;
    			background-color: #e9e9e9;
    			padding: 10px;
    		}
    		
    		.text
    		{
    			float: left;
    			width: 700px;
    			min-height: 350px;
    			height: 100%;
    			border-left: 1px solid #cccccc;
    			border-right: 1px solid #cccccc;
    			padding: 10px;
    		}
    		
    		.panelRight
    		{
    			float: left;
    			width: 120px;
    			background-color: #e9e9e9;
    			padding: 10px;			
    		}
    		
    		.clear
    		{
    			clear: both;
    		}
    		
    		.footer
    		{
    			position: relative;
    			width: 1002px;
    			height: 50px;
    			border-top: 1px solid #cccccc;
    		}
      </style>
    </head>
    <body>
      <div id="conteiner">
        <div class="header">
          Cabeçalho
        </div>
    
        <div class="conteiner">
          <div class="panelLeft">Painel Esquerdo</div>
    			<div class="text">Texto.</div>
    			<div class="panelRight">Painel Direito</div>
        </div>
    		
    		<div class="clear"></div>
    
        <div class="footer"><!-- INÍCIO DA DIV RODAPÉ -->
        	Rodapé
        </div>
    	</div>
    </body>
    </html>
    
    
    

    sexta-feira, 3 de setembro de 2010 18:59
  • quinta-feira, 9 de setembro de 2010 20:32