Alinhamento de camadas

Luiz Zaccaro · Janeiro 16, 2013

Amigos, boa tarde.

Estou com um problema no layout na homepage que estou desenvolvendo. Criei a homepage com DIvs (camadas). A div #corpo consegui alinhar ao centro da tela, porém as outras Divs que estão dentro da DIv # corpo não alinham com a Tela, na hora de visualizar no navegador ficam todas deslocadas para esquerda. Já tentei de tudo, mas não estou conseguindo o pulo do gato. SE alguém puder me ajudar e dar uma luz , fico grato.

Ahhh estou trabalhando com DW CS5.5

<!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=utf-8" />
<title>Alinhamento DIvs</title>
<style type="text/css" media="all"> <!-- Script CSS (folha de estilo) -->
#corpo {
                left:27px;
                top:19px;
                width:990px;
                height:800px;
                z-index:1;
                margin: 0 auto; /* comando para o corpo (camada principal) alinhar ao centro da tela*/
                background-color: #666;
}
#banner {
                position:absolute;
                left:110px;
                top:16px;
                width:990px;
                height:84px;s
                z-index:1;
                background-color: #FF6600;
}
#menu {
                position:absolute;
                left:108px;
                top:110px;
                width:992px;
                height:40px;
                z-index:2;
                background-color: #FFFFFF;
}
#texto {
                position:absolute;
                left:115px;
                top:161px;
                width:585px;
                height:589px;
                z-index:3;
                background-color: #0066FF;
}
#video1 {
                position:absolute;
                left:930px;
                top:162px;
                width:120px;
                height:88px;
                z-index:4;
                background-color: #99FF00;
}
#video2 {
                position:absolute;
                left:930px;
                top:255px;
                width:120px;
                height:88px;
                z-index:5;
                background-color: #99FF00;
}
#video3 {
                position:absolute;
                left:930px;
                top:347px;
                width:120px;
                height:88px;
                z-index:6;
                background-color: #99FF00;
}
#video4 {
                position:absolute;
                left:930px;
                top:440px;
                width:120px;
                height:88px;
                z-index:7;
                background-color: #99FF00;
}
#imagem {
                position:absolute;
                left:880px;
                top:535px;
                width:162px;
                height:248px;
                z-index:8;
                background-color: #FFFF00;
}
#rodapé {
                position:absolute;
                left:108px;
                top:789px;
                width:992px;
                height:25px;
                z-index:9;
                background-color: #FF0000;
}
</style>
</head>


<body bgcolor="#CCCCCC">
<div id="corpo"> <!--Inicia o layout(Camada principal) da homepage-->
    <div id="banner"></div>
      <div id="menu"></div>
        <div id="texto"></div>
          <div id="video1"></div>
            <div id="video2"></div>
              <div id="video3"></div>
                <div id="video4"></div>
                  <div id="imagem"></div>
                    <div id="rodapé"></div>
</div><!--Finaliza o layout(Camada principal) da homepage -->
</body>
</html>

Obrigado

Luiz ZACCARO

Caros,

Segue a forma que fica no navegador

http://img836.imageshack.us/img836/2632/alinhamentodiv.png

abraços

Luiz ZACCARO

Giovani · Janeiro 17, 2013

@Luiz Zaccaro, o problema é como você está fazendo :upset:

Seu código não tá bom, tem coisa demais, sobrando, acento onde não devia ... enfim ....

Veja só:

#corpo {
	left:27px;
	top:19px;
	width:990px;
	height:800px;
	z-index:1;
	margin: 0 auto; /* comando para o corpo (camada principal) alinhar ao centro da tela*/
	background-color: #666;
}

Por que um left, top e z-index? Eles não servem pra nada do jeito que estão.

Em todas as outras divs existe position, pesquise por float, ele vai te ajudar.

Utilizando a mesma marcação que você a estrutura ficaria assim:

<div id="corpo">

	<div id="banner"> ... </div>
	<!-- /#banner -->
	
	<div id="menu"> ... </div>
	<!-- /#menu -->
	
	<div id="texto"> ... </div>
	<!-- /#texto -->
	
	<div id="videos"> ... </div>
	<!-- /#videos -->
	
	<div id="rodape"> ... </div>
	<!-- /#rodape -->
	
</div>
<!-- /#corpo -->

Trabalhando com o float na #texto e #videos ficará bem tranquilo.

Qualquer dúvida volte a postar ;)

Luiz Zaccaro · Janeiro 17, 2013

Giovani,

Bom dia.

Obrigado pela dica. Vou testar a noite e volto a postar.

Você teria algum livro para indicar para trabalhar com CSS onde tenha boas dicas?

obrigado

Luiz ZACCARO

Giovani · Janeiro 17, 2013

Cara, os livros do Maujor são bons, podem te ajudar e é uma leitura recomendada.

Pesquisando na internet você também vai achar coisas bacanas.

André do Vale · Janeiro 17, 2013

Você teria algum livro para indicar para trabalhar com CSS onde tenha boas dicas?

Além dos livros do Maujor, citado acima, recomendo também os livros da Smashing Magazine, à venda aqui: http://www.grupoa.com.br/buscar/smashing

Luiz Zaccaro · Janeiro 17, 2013

André e Giovani

Obrigado pelas indicações

abraços

Luiz ZACCARO

Luiz Zaccaro · Janeiro 18, 2013

Amigos,

Segue conforme combinado... as dicas funcionaram

<!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=utf-8" />
<title>Divs_alinhadas</title>
<style type="text/css" media="all">


body{
margin: 0px;
}


#principal{
border: 1px solid #000;
width: 900px;
height: auto;
margin: 0 auto; 
padding: 2px;
}


#banner{
border: 1px solid #000;
width: auto;
height: 150px;
margin-bottom: 2px;
}


#menu {
border: 1px solid #000;
width: auto;
height: 40px;
margin-bottom: 2px;
}


#coluna_esquerda{
border: 1px solid #000;
width: 230px;
height: 186px;
float: left;  /* posicionamento a esquerda */
display:block;
}




#coluna_direita{
border: 1px solid #000;
width: 230px;
height: 186px;
float: right; /* posicionamento a direita */
margin-bottom: 2px;
display:block;
}




#conteudo{
border: 1px solid #000;
width: auto;
height: auto; /* a div conteudo ira aumentar ou diminuir conforme o conteudo inserido*/
margin-left: 234px; /* espaço entre a borda da coluna esq width:160px */
margin-right: 234px; /* espaço entre a borda da coluna dir width:160px */
margin-bottom: 2px;


}


#rodape{
border: 1px solid #000;
width: auto;
height: 20px;
clear:both;
/*formatação do texto*/
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: oblique;
line-height: normal;
font-weight: bolder;
font-variant: normal;
text-transform: capitalize;
background-color: #FFF;
}






</style>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>


<body>
<!-- Div Principal -->
<div id= "principal">
  
  <!-- Div Banner alocação do Logo.png -->
  <div id = "banner"><img src="../image/banner_.png" alt="" name="banner" width="900" height="150" id="banner2" /></div>


  <!-- MEnu -->
 <div id = "menu">
   <ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="index.html" class="MenuBarItemSubmenu" id="Agencia">Agencia</a>
       <ul>
         <li><a href="contato.html" id="Contato">Contato</a></li>
         <li><a href="#" id="Localização">Localização</a></li>
       </ul>
     </li>
     <li><a href="customer.html" id="Clientes">Clientes</a></li>
     <li><a href="#" id="Agenciamento">Agenciamento</a></li>
     <li><a href="#" class="MenuBarItemSubmenu" id="Casting">Casting</a>
       <ul>
         <li><a href="#">Meninos </a></li>
         <li><a href="#">Meninas</a></li>
       </ul>
     </li>
     <li><a href="#" id="Portifolio">Portifolio</a></li>
     <li><a href="#" id="Destaque">Destaque</a></li>
     <li><a href="#" id="Login">Login</a></li>
   </ul>
 </div>




 <div id = "coluna_esquerda">
   <iframe width="230" height="186" src="" frameborder="0" allowfullscreen="">
 </iframe>
</div>


 <div id = "coluna_direita"> 
   <iframe width="230" height="186" src="" frameborder="0" allowfullscreen="">
 </iframe>
</div>


<!-- Conteúdo da homepage --> 
 <div id = "conteudo"> CONTEUDO DA HOMEPAGE</div>


<!-- DIreitos reservados -->
 <div id = "rodape" align="center">Copyright 2013 | www.testediv.com | Todos os direitos reservados </div>
</div>


</body>
</html>

Obrigado

Luiz ZACCARO

Entrar

Arquivado

Alinhamento de camadas

Recommended Posts

Luiz Zaccaro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Zaccaro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Zaccaro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Zaccaro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante