Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Skyblade

[Resolvido] Centralizar elementos de uma div em layout fluido

Por , em Desenvolvimento frontend

Recommended Posts

Skyblade    0

Skyblade
Postado

Olá pessoal, estou com uma dúvida que não acho solução de jeito nenhum.

Estou fazendo o seguinte site: www.brasilcomunicacaoeprojetos.com.br/raphael/teste

Ele foi feito como layout fluido.

 

Minha dúvida é o seguinte: como faço para centralizar os elementos da div conteudo (a que fica no meio) independente da resolução?

Notem que se estiver em 1024 x768 as divs internas do meio ficam centralizadas pq eu coloquei margin com tamanho fixo em pixels (veja código abaixo)mas quando tento botar margin: 0 auto nao acontece nada! acredito eu pq está se relacionando com os 100% de largura da div do meio e por esse motivo não funciona.

 

Enfim, por favor me dêem uma luz do que devo faze, preciso resolver logo isso!

 

@charset "utf-8";
/* CSS Document */

/*ESTRUTURA BASE*/

*{
	margin: 0;
	padding: 0;
}

#cabecalho{
	float: left;
	width: 100%;
	min-width: 970px;
	background: #000;	
}

#cabecalho h1{
	float: left;
	padding: 5px;
	font: 16px "Arial Black", Gadget, sans-serif;
	color: #FC0;
}

#menu{
	float: right;
	height: 40px;
	background: #000;	
}

#menu ul{
	padding: 5px;
	font: 16px "Arial Black", Gadget, sans-serif;
	color: #FFF;
	list-style: none;
}

#menu ul li{
	display: inline;
	padding: 5px;
}

#menu ul li a:link{
	color: #FFF;
	text-decoration: none;	
}

#menu ul li a:visited{
	color: #FFF;
	text-decoration: none;	
}

#menu ul li a:hover{
	color: #FF0;
	text-decoration: underline;
}
	
#conteudo{
	float: left;
	width: 100%;
	min-width: 970px;
	min-height: 713px;/*PARA FICAR BOA A VISUALIZAÇÃO NA RESOLUÇÃO 1280X1024*/
	background: url(img/bg-fundo.jpg) center no-repeat;
}

#conteudo h1{
	float: left;
	margin: 20px 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:46px;
	color: #FFF;	
}

#rodape{
	float: left;
	width: 100%;
	min-width: 970px;
	background: #000;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #0C0;
	text-align: center;
}
	
#rodape_esq{
	float: left;
	width: 33%;
	padding: 15px 0px;
}
	
#rodape_centro{
	float: left;
	width: 33%;
	padding: 31px 0px;
}

#rodape_dir{
	float: left;
	width: 33%;
	padding: 7px 0px;
}

#rodape img{
	vertical-align: middle;
	border: 0px;
}

#rodape p{
	float: right;
}

#rodape a:link{
	text-decoration: none;
}

#rodape a:visited {
	text-decoration:none
}

#rodape a:active {
	text-decoration:none
}

#rodape a:hover {
	text-decoration:none
}

img.rodape{
	padding: 5px;
}

/*ESTRUTURA HOME*/

#banner{
	float:left;
	width: 870px;
	margin: 20px 40px;
}

#atuacao{
	float:left;
	width: 900px;
	margin: 20px 40px;
	background-color:#FFFFFF;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#atuacao_esq{
	float:left;
	width: 33%;
}

#atuacao_centro{
	float:left;
	width: 33%;
	border-left: thin dashed;
	border-right: thin dashed;
}

#atuacao_dir{
	float:left;
	width: 33%;
}

#atuacao h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#atuacao p{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #000;
	padding: 20px;
	text-align: justify;
}

#atuacao img{
	float: right;
	padding: 5px;
}

/*ESTRUTURA BRASILEIROS*/

#brasileiros{
	float: left;
	width: 900px;
	margin: 20px 40px;
	background-color:#FFFFFF;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#brasileiros_esq{
	float: left;
	width: 350px;
	margin: 20px 40px;
	background-color: #CFF;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#brasileiros_dir{
	float: right;
	width: 350px;
	margin: 20px 65px;
	background-color: #CF9;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#brasileiros_esq img{
	float: left;
	vertical-align: middle;
	padding: 5px;
}

#brasileiros_dir img{
	float: right;
	vertical-align: middle;
	padding: 5px;
}

#brasileiros h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#brasileiros p{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #000;
	padding: 20px;
	text-align: left;
}

#brasileiros_esq h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#brasileiros_esq p{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #000;
	padding: 20px;
	text-align: left;
}

#brasileiros_dir h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#brasileiros_dir p{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #000;
	padding: 20px;
	text-align: left;
}

/*ESTRUTURA FAZEMOS*/

#artificio{
	float:left;
	width: 900px;
	margin: 20px 40px;
	background-color: #FF0;
	font-family: "Trebuchet MS", arial, verdana;
	font-size:14px;
	color: #000;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#artificio img{
	float: left;
	vertical-align: middle;
	padding: 25px;
}

#artificio h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #000;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#artificio p{
	text-align: left;
}

#maxime{
	float:left;
	width: 900px;
	margin: 20px 40px;
	background-color: #900;
	font-family: "Trebuchet MS", arial, verdana;
	font-size:14px;
	color: #FFF;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#maxime h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #FFF;
    padding: 25px 20px 0px 20px;
	text-align: left;
}

#maxime p{
	text-align: left;
}
#maxime img{
	float: left;
	vertical-align: middle;
	padding: 40px 25px;
}

#esportes{
	float:left;
	width: 900px;
	margin: 20px 40px;
	background-color:#FFFFFF;
	font-family: "Trebuchet MS", arial, verdana;
	font-size:14px;
	color: #000;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#esportes h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: left;
}

#esportes p{
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #000;
	text-align: left;
}

#esportes img{
	float: left;
	vertical-align: middle;
	padding: 25px 35px;
}

/*ESTRUTURA CONTATO*/

#contato{
	float: left;
	width: 500px;
	margin: 20px 40px;
	background-color:#FFFFFF;
	/*TRANSPARENCIA DA DIV*/
	opacity:0.92;
	-moz-opacity: 0.92;
	filter:alpha(opacity=92);
}

#contato h2{
	font-family: "Trebuchet MS", arial, verdana;
    font-size:22px;
	color: #090;
    padding: 20px 20px 0px 20px;
	text-align: center;
}

#contato img{
	float: left;
	vertical-align: middle;
	padding: 5px;
}

#box-form{
	float: right;
	margin: 20px 40px;
}

#contato p{
	/*position: absolute;
	top: 20%;
	padding: 20px;*/
}

.contato-estilo{
	font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
	color: #600;
    padding: 5px 0px;
}

.botao-limpar{
	background: url(img/img-limpar.png) no-repeat;
	border: 0px;
	cursor: pointer;
	width: 89px;
	height: 20px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Você não pode utilizar float se quer manter os elementos centralizados...

 

float: left flutua à esquerda

float: right flutua à direita

 

E é justo o que acontece quando se maximiza a janela do navegador em seu site...

 

Retire todos os floats dos elementos que você deseja centralizados...

 

Como você definiu larguras fixas em px, para centralizar basta colocar:

 

margin: 0 auto

nesse elementos para que eles centralizem automaticamente na tela (o primeiro não precisa ser 0, pode ser qualquer outro valor, mas o segundo DEVE ser auto]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito