Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tentando colocar uma div do lado direito. A do lado esquerdo ficou extamente como eu queria mas a do lado direito estou penando.
O pior é que no Dreamweaver, na área Split e Design vejo as divs, ou eja, tanto a div do lado esquerdo coma a do lado direito exatamente no local que eu quero. Mas dando um F12, a div do lado esquerdo aparece no brawser um pouco diferente, ou seja, deveria ficar na mesma posição da div do lado esquerdo porem do lado direito. A div do lado direito fica mais para o lado esquerdo, não encosta na barra da lateral da div principal. Eu nunca postei nada desse tipo e não sei se estou explicando corretamente. Vou colocar aqui a minha html teste e a css. Por favor ajude.
Quero coloca uma div do lado direito e outra do lado esquerdo. Depois uma no centro.
<!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">](http://www.w3.org/1999/xhtml)
<head>
<!-- Inicial da Declaração Titulo -->
<title>Blog Teixeira</title>
<!-- Fim da declaração do Título -->
<!--Início das metas - deixei o charset=iso-8859-1 que o Dreamweaver coloca-->
<meta http-equiv="content-type" content="text/html; charset=utf-8; charset=iso-8859-1" />
<meta http-equiv="content-language" content="pt-br" /> <!--Não existe no Dreamweaver "content-language" só "content-type" mantive--> <meta name="description" content="divulgar minhas pesquisas com objetivo de prestar informações, serviçõs" />
<meta name="author" content="Teixeira" /> <!--Não existe no Dreamweaver "author"-->
<!--Fim das Metas--><!--Inicio da declaração do arquivo css - geral.css -->
<link href="Style.css" rel="stylesheet" type="text/css" media="all"/>
<!--Fim da marcação do arquivos css - geral.css -->
</head>
<body>
<div id="tudo"> <!--Início da da div#tudo-->
<div id="topo"> <!--Início da div#topo-->
<h1>Blog <span>do Teixeira</span></h1>
<div id="sobre"><!--Início da div sobre-->
<p>Teixeira teve um bom aproveitamento em diversos cursos da área WebDesign e WebMaster. Atualmente aposentado
tem esse espaço para postar comentários, artigos, reportagens, pesquisas. Tudo que ache relevante
para o debate e a livre expressão de opiniões.</p>
</div><!--Fim da div sobre-->
<ul id="nav"><!--Início da div nav-->
<!--Inserir os links para as páginas do site-->
<li><a href="index.html">Inicial</a></li>
<li><a href="politca.html">Política</a></li>
<li><a href="hobby.html">hobby</a></li>
<li><a href="informatica.html">Informática</a></li>
<li><a href="religiao.html">Religião</a></li>
<li><a href="pesquisa.html">Pesquisas</a></li>
<li><a href="samba.html">Samba</a></li>
<li><a href="euindico.html">Eu indico</a></li>
<li><a href="contatos.html">Contatos</a></li>
</ul>
</div> <!--Final da div#topo-->
<div id="principal"><!--ininio div#principal-->
<div id="esquerda"><!--Início da div esquerda-->
<h3>Política</h3>
<h4>Decisão foi tomada pela ANATEL</h4>
<p>Após adiar quatro vezes a decisão sobre a obrigatoriedade do desbloqueio de celulares no País, a Agência Nacional de Telecomunicações (Anatel) determinou em reunião na tarde desta quinta-feira que as operadoras terão que desbloquear os aparelhos imediatamente e sem qualquer multa.
De acordo com informações da agência reguladora, a decisão passa a valer assim que for publicada no Diário Oficial da União. A expectativa é de que a orientação do conselho da Anatel seja encaminhado ainda nesta semana para que seja publicada dentro de dez dias.</p>
</div><!--Fim da div esquerda-->
<div id="direita">
<h3>Hobby</h3>
<h4>Radioamador</h4>
<p>Radioamador não serve para aparecer ele aparece para servir</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div> <!--Fim div principal-->
<div id="rodape"> <!--Início da div#rodape -->
<p>Copyright © 2010 - Teixeira - Rio de Janeiro/RJ</p>
</div> <!--Fim da div#rodape-->
</div> <!--Fim da div#tudo-->
</body>
</html>A Style.css
/ CSS Document /
/CSS foi desenvolvida com base em estudo do livro Criando Site com HTML - Maujor, porém eu cometi erros/
body {
background : #ccc; /Fundo cinza em volta do loyout/
color : #333; /Texto de cor preta por padrão /
margin : 0;
padding : 0;
font : 12px/1.4 'Trebuchet MS';
text-align : center;
font-size : inherit;
font-style : inherit;
vertical-align : baseline;
}
#tudo {
width : 980px;
margin : 0 auto;
text-align : left;
background : #fff;
}
#topo {
position : relative;
width : 980px; /*largura do topo*/
height : 100px; /*altura do topo*/
background : #666666 url(file:///C|/inetpub/wwwroot/Copia%20meu%20site%20Local%20Hospedagem/images/Image/logo.jpg) no-repeat; /*Imagem no fundo do top*/
}#topo h1 {
position : absolute;
left : 50px;
top : 15px;
font-size : 28px;
margin : 0; /* Evita uma margem que cria espaçamanto do topo */
}#topo h1 span {
color : #fff;
}ul#nav {
position : absolute;
left : 0;
top : 100px;
margin : 0;
padding : 0;
width : 980px;
height : 25px;
background : #666666;
font-weight : bold;
}ul#nav li {
margin-right : 2px;
display : inline;
list-style-type : none;
background : #666666;
}ul#nav li a {
float : left;
color : #fff;
font-size : 11px;
font-weight : bold;
text-decoration : none;
text-transform : uppercase;
padding : 3px 15px 7px 15px;
margin-right : 25px;
background : #666666;
}ul#nav li a:hover {
background : #999999 repeat-x 0% 0%;
}
#rodape {
height : 20px;
clear : both;
background : #999999;
}#rodape p {
margin-left : 50px;
font-size : 11px;
line-height : 2;
color : #ffffff;
}#rodape p span {
color : #f60;
font-weight : bold;
}h2 {
font-size : 18px;
color : #0056a6;
margin : 30px 5px 10px 18px;
}#principal p {
margin-top : 10px;
}#principal a, #principal a:visited {
color : #f63;
margin-right : 10px;
}#principal a:hover {
color : #f90;
text-decoration : none;
}
#sobre {
font-size : 14px;
color : #fff;
display : inline;
float : right;
height : 60px;
width : 468px;
margin-right : 15px;
margin-bottom : 24px;
top : 40px;
}#sobre a {
color : #b4b4b4;
}
#principal {
background : #fff;
margin : 0 40px;
clear : both;
width : 900px;
}
#direita{
float: right;
margin: 1px 10px 10px 10px;
border-right: thin #999999;
position: absolute;
top: 148px;
vertical-align: baseline;
text-align: left;
border-top-width: thin;
border-bottom-width: thin;
border-top-color: #999999;
border-bottom-color: #999999;
border-left: thin dotted #999999;
height: auto;
width: 250px;
padding: 14px 0px 0px;
left: 720px;
right: 0px;
bottom: 0px;
}
#centro {
float:none;
}
#esquerda {
float: left;
margin: 0px;
padding-top: 14px;
border-right: thin dotted #999999;
position: absolute;
top: 148px;
display: block;
vertical-align: baseline;
text-align: left;
border-top-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
text-transform:none;
height: auto;
width: 253px;
}#direita, #centro, #esquerda, h3 {
font: normal 14px/normal "Trebuchet MS";
color: #000000;
}h3 {
font: normal 18px/0px "Trebuchet MS";
color: #FF9900;
text-align: left;
top: auto;
}h4 {
font: normal 14px/0px "Trebuchet MS";
color: #FF9900;
text-align: left;
top: auto;
}Carregando comentários...