[Resolvido] Problema no alinhamento de duas DIVs

Melina Girardi · Março 28, 2012

Bom dia!

Não sei o que estou fazendo de errado no meu código, pois a div #redessociais está totalmente desalinhada com a div #conteudo.

além deste problema, preciso alinhar as duas de tal forma que fiquem alinhadas verticalmente com o topo, como devo proceder?

Segue os códigos:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>GS Assessoria Desenvolvimento de Software</title>

</head>

<body>

</div>

<ul>

<li><a href=".../index.html">Início</a></li>

<li><a href=".../institucional.html">Empresa</a></li>

<li><a href=".../produtos.html">Produtos / Serviços</a></li>

<li><a href=".../empregos.html">Trabalhe Conosco</a></li>

<li><a href=".../faleconosco.html">Contato</a></li>

<li><a href=".../ondeestamos.html">Localização</a></li>

<li><a href=".../downloads.html">Downloads</a></li>

</ul>

</div>

<h2>TESTANDO CONTEUDO</h2>

</div>

<h1>TESTANDO RS</h1>

</div>

</div>

</body>

</html>

CSS

@charset "utf-8";

/* Documento CSS GS Assessoria */

/* Desenvolvido por Melina - @meehpg */

body{

background:url(../Bckg.png);

background-repeat:repeat-x;

background-color:#0066FF;

font-family:Georgia, "Times New Roman", Times, serif;

margin-left: 10%;

margin-right: 10%;

}

h1 {

text-align:left;

font-size:24px;

margin-left: 10px;

color:#003;

}

h2 {

text-align:left;

font-size:18px;

margin-left: 10px;

color:#076FA0;

}

h3 {

text-align:center;

font-size:18px;

color:#076FA0;

}

h4 {

text-align:right;

font-size:16px;

margin-right: 10px;

color:#F24800;

}

#topo {

background-image:url(../PaginaGeralTopo.png);

text-align:center;

margin-left: auto;

margin-right:auto;

display:block;

width:1000px;

height:221px;

}

#menu ul{

width: 80%;

list-style:none;

margin:0px;

padding-top:4px;

text-decoration:none;

}

#menu ul li {display:inline;}

#menu ul li a{

padding:2px 15px;

text-decoration:none;

background-color:#FBFBFB;

color:#333;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-radius: 5px;

}

#menu ul li a:hover {

text-decoration: none;

background-color:#003;

color:#FFF;

border-left:1px solid #FFF;

border-right:1px solid #FFF;

}

#conteudo {

margin-top:10px;

width:750px;

height:400px;

background-color:#FFF;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-radius:5px;

}

#redessociais {

float:right;

margin-top: 10px;

width: 200px;

height:400px;

background-color:#C39;

border-left:1px solid #000;

border-right:1px solid #000;

border-radius:10px;

}

#rodape {

width:1000px;

height:100px;

display:block;

margin-top:15px;

background-color:#FFF;

border:1px solid #A3A3A3;

border-radius:10px;

clear:both;

}

Segue duas imagens de como está:

Como podem ver, a "linha", onde está o conteúdo e o topo estão desalinhados, e deveriam estar alinhados verticalmente.

Se houver alguma redundância ou algum problema no meu código, por favor me informem.. pois voltei há pouco tempo, digo, faz umas 2 semanas a programar novamente.. rs

Muito obrigado !

:lol:

NetBoy16 · Março 28, 2012

que isso linda, te ajudo sim, vamos lá:

primeiro, tem como você deixar a div conteudo com o mesmo tamanho da div topo? que dai oque você vai fazer, depois que voce diexar as duas com 1000px de width(por exemplo)voce coloca todas as divs do layout dentro de uma outra div, exemplo:

<div id="tudo">
  <div id="topo">topo aki</div>
  <div id="conteudo">conteudoaki</div>
  <div id="menulateral">menu lateral aki</div>
  <div id="rodape">rodape aki</div>
</div>

segundo, eu vi que alem do conteudo tem uma div rosa que ta fora do lugar, essa seria a redesociais ? caso sim, além de deixar float: right que ja tem, deixe o width de forma que somando com o width do conteudo nao ultrapasse o width da div #tudo, e no conteudo de float: left

Conseguiu entender? :grin:

Melina Girardi · Março 28, 2012

Tive uma idéia agora, e resolvi experimentar.. fiz desta forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>GS Assessoria Desenvolvimento de Software</title>

</head>

<body>

</div>

<ul>

<li><a href=".../index.html">Início</a></li>

<li><a href=".../institucional.html">Empresa</a></li>

<li><a href=".../produtos.html">Produtos / Serviços</a></li>

<li><a href=".../empregos.html">Trabalhe Conosco</a></li>

<li><a href=".../faleconosco.html">Contato</a></li>

<li><a href=".../ondeestamos.html">Localização</a></li>

<li><a href=".../downloads.html">Downloads</a></li>

</ul>

</div>

<h2>TESTANDO CONTEUDO</h2>

</div>

<h1>TESTANDO RS</h1>

</div>

</div>

</body>

</html>

@charset "utf-8";

/* Documento CSS GS Assessoria */

/* Desenvolvido por Melina - @meehpg */

body{

background:url(../Bckg.png);

background-repeat:repeat-x;

background-color:#0066FF;

font-family:Georgia, "Times New Roman", Times, serif;

margin-left: 10%;

margin-right: 10%;

}

h1 {

text-align:left;

font-size:24px;

margin-left: 10px;

color:#003;

}

h2 {

text-align:left;

font-size:18px;

margin-left: 10px;

color:#076FA0;

}

h3 {

text-align:center;

font-size:18px;

color:#076FA0;

}

h4 {

text-align:right;

font-size:16px;

margin-right: 10px;

color:#F24800;

}

#topo {

background-image:url(../PaginaGeralTopo.png);

text-align:center;

margin-left: auto;

margin-right:auto;

display:block;

width:1000px;

height:221px;

}

#menu ul{

width: 80%;

list-style:none;

margin:0px;

padding-top:4px;

text-decoration:none;

}

#menu ul li {display:inline;}

#menu ul li a{

padding:2px 15px;

text-decoration:none;

background-color:#FBFBFB;

color:#333;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-radius: 5px;

}

#menu ul li a:hover {

text-decoration: none;

background-color:#003;

color:#FFF;

border-left:1px solid #FFF;

border-right:1px solid #FFF;

}

#conteudo {

margin-top:10px;

margin-left:30px;

float:left;

width:750px;

height:400px;

background-color:#FFF;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-bottom:1px solid #A3A3A3;

border-radius:10px;

}

#redessociais {

float:right;

margin-right:30px;

margin-top:10px;

margin-bottom:10px;

width:240px;

height:400px;

background-color:#FFF;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-bottom:1px solid #A3A3A3;

border-radius:10px;

}

#rodape {

width:1000px;

height:100px;

margin-left:30px;

margin-top:20px;

background-color:#FFF;

border:1px solid #A3A3A3;

border-radius:10px;

clear:both;

}

e deu tudo certo!

Só queria saber se tem alguma redundância no código, ou se está correto fazer desta forma?

Obrigado! :thumbsup:

Resolvi modificar o rodapé, e ao invés de deixar 1000px, alterei para 600px; quero posicioná-lo ao centro, porém não estou conseguindo. o que devo fazer ?

tentei por mais margin-left, porém não deu certo.

Os códigos são os mesmos de antes, porém a estrutura css do rodapé é alterada:

Segue abaixo:

#rodape {
	width:600px;
	height:80px;
	text-align:center;
	margin-left:30px;
	display:block;
	background:none;
	border:1px solid #FFF;
	border-radius:10px;
	clear:both;
	}

Vou postar uma imagem de como está ficando:

NetBoy16 · Março 28, 2012

só me diga uma coisa, eu nao cheguei a ver direito teu css, a unica cosia que você mudou foi soh o css do rodape ?

quanto a centralizar é aquilo que eu disse antes, nao importa se o widthg é 1000 ou 600, você tem que definir uma div pra englobar tudo tendo uma largura definida, por exemplo, 1000px, dai quanto tudo estiver dentro você aplica um margin: auto; nessa div e no que você quer centralizar, tente ai :thumbsup:

Melina Girardi · Março 28, 2012

Virou uma bagunça, o topo, o menu e o rodapé agora não estão centralizados...

é uma questão de paciência.. bora lá descobrir o que tem desta vez!:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>GS Assessoria Desenvolvimento de Software</title>

</head>

<body>

</div>

<ul>

<li><a href=".../index.html">Início</a></li>

<li><a href=".../institucional.html">Empresa</a></li>

<li><a href=".../produtos.html">Produtos / Serviços</a></li>

<li><a href=".../empregos.html">Trabalhe Conosco</a></li>

<li><a href=".../faleconosco.html">Contato</a></li>

<li><a href=".../ondeestamos.html">Localização</a></li>

<li><a href=".../downloads.html">Downloads</a></li>

</ul>

</div>

<h2>TESTANDO CONTEUDO</h2>

</div>

<h1>TESTANDO RS</h1>

</div>

<p>GS Assessoria Desenvolvimento de Software</p>

</div>

</body>

</html>

CSS:

@charset "utf-8";

/* Documento CSS GS Assessoria */

/* Desenvolvido por Melina - @meehpg */

body{

background:url(../Bckg.png);

background-repeat:repeat-x;

background-color:#0066FF;

font-family:Georgia, "Times New Roman", Times, serif;

margin-left: 10%;

margin-right: 10%;

}

h1 {

text-align:left;

font-size:24px;

margin-left: 10px;

color:#003;

}

h2 {

text-align:left;

font-size:18px;

margin-left: 10px;

color:#076FA0;

}

h3 {

text-align:center;

font-size:18px;

color:#076FA0;

}

h4 {

text-align:right;

font-size:16px;

margin-right: 10px;

color:#F24800;

}

#tudo {

width: 1000px;}

#topo {

background-image:url(../PaginaGeralTopo.png);

text-align:center;

margin-left: auto;

margin-right:auto;

display:block;

width:1000px;

height:221px;

}

#menu ul{

width: 100%;

list-style:none;

margin:0px;

padding-top:4px;

text-decoration:none;

}

#menu ul li {display:inline;}

#menu ul li a{

padding:2px 15px;

text-decoration:none;

background-color:#FBFBFB;

color:#333;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-radius: 5px;

}

#menu ul li a:hover {

text-decoration: none;

background-color:#003;

color:#FFF;

border-left:1px solid #FFF;

border-right:1px solid #FFF;

}

#conteudo {

margin-top:10px;

float:left;

width:750px;

height:400px;

background-color:#FFF;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-bottom:1px solid #A3A3A3;

border-radius:10px;

}

#redessociais {

float:right;

margin-top:10px;

margin-bottom:10px;

width:240px;

height:400px;

background-color:#FFF;

border-left:1px solid #A3A3A3;

border-right:1px solid #A3A3A3;

border-bottom:1px solid #A3A3A3;

border-radius:10px;

}

#rodape {

width:600px;

height:80px;

text-align:center;

background:none;

border:1px solid #FFF;

border-radius:10px;

clear:both;

}

tentei por text-align: center no menu e tal mas não deu certo, nem display.

o ruim é que as vezes o margin:auto leva lá pra esquerda todo o campo [seja #tudo, #rodape, etc]

tentei por antes mas voltou lá pro canto ;

NetBoy16 · Março 28, 2012

ta, primeiro, tem umas divs tua ali com align="center", remova isso, você vai centralizar com margin: auto, abaixo do topo você vai ter conteudo e redessociais lado a lado? caso sim entao nao precisa de margin: auto, soh dos floats corretamente, outra coisa, você n usou margin: auto na div tudo, faca essas modificacoes e entao volte a postar :)

Melina Girardi · Março 28, 2012

Modifiquei esta parte, o menu me deu um pouco mais de trabalho, não queria alinhar!

mas resolvi com um text-align:center;

tá tudo certo agora, muito obrigado pela ajuda, e se puder pode marcar o tpc como resolvido!

:grin:

Valeu mesmo!!! :clap:

Entrar

Arquivado

[Resolvido] Problema no alinhamento de duas DIVs

Recommended Posts

Melina Girardi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Melina Girardi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Melina Girardi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Melina Girardi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante