Centralizar Div

SLIFE · June 3, 2011 at 09:14 PM

Boas pessoal

Estava a tentar começar perceber um pouco de css.

Resolvi procurar na net e saquei uns cursinhos interessantes.

Dei-te mãos á obra e decidi começar a por em pratica os exemplos do curso.

Mas agora surgiu-me duas questões:

Primeiro eles no curso dizem para colocar no css o seguinte:

margin:0 auto;

Dizem que com isto ele iria centrar a div no meio do browser

e que deveria colocar

body{margin:0px;}

Para a pagina ficar sem margens no browser e centrada.

O problema é que faço como eles tem no curso e lá parece funcionar, mas aqui quando coloco para ver no browser, ele aparece sempre encostado a esquerda.

Porque será que não esta a funcionar? Estou a usar o IE 8, e estou a fazer o Css no dreamweaver cs5.

Ele tambem me dá uma msg a dizer para activar o modo de vista de compatibilidade, no IE, porque aprece isso?

A segunda questão é, eles no curso utilizam o padding para fazer dexer divs, ou andar com elas para o lado.

Eu aqui experimento, e se faço um padding-top=75px; ele aumenta a div.

Se alguem me poder explicar o porque destas coisas agradecia, pois assim está complicado. Vejo de uma maneira e ao tentar fazer sai de outra, torna-se dificil aprender.

Cpts

SJC

brunoais · June 4, 2011 at 07:06 AM

Se calhar n funciona pq n é o IE9 (o único que aceito na minha vida dos IE).

Em relação a aparecer para usar o modo de compatibilidade, ou mostras uma quantidade suficiente de código para perceber pq disso ou então esquece. Não vamos ajudar-te

taviroquai · June 4, 2011 at 09:54 AM

Viva,

"Centrar a página" pode parecer simples mas é um pouco mais complicado...

O exemplo básico com css e xhtml consegue-se assim:

<html>
    <head>
        <style>
            body { text-align: center; }
            #pagina { margin: 0 auto; width: 800px; border: 1px solid black; } 
        </style>
    </head>
    <body>
        <div id="pagina">Página aqui</div>
    </body>
</html>

SLIFE · June 4, 2011 at 06:36 PM

Se calhar n funciona pq n é o IE9 (o único que aceito na minha vida dos IE).

Em relação a aparecer para usar o modo de compatibilidade, ou mostras uma quantidade suficiente de código para perceber pq disso ou então esquece. Não vamos ajudar-te

Boas

Então é assim, eu tenho uma pagina chamada index.php

na qual tenho o seguinte codigo:

include "topo.php";
include "rodape.php";
include "paginas.php";

Depois tenho a pagina topo, na qual tenho:

include "css.php";

E dentro do body tenho diversas divs.

<div id= "fundo_topo">
<div id ="topo">
    	
        <div id= "Imag_esq_topo">
        </div><!-- Fim Imag_esq_topo -->
        <div id= "Titulo_Pagina">
        </div><!-- Fim titulo Topo -->
        <div id="Publicidade_topo">
        <div id= "texto_publicidade"></div>
        </div><!-- Fim Publicidade Topo -->
        <div id= "Fundo_Menu">
        <div id="Menu_links"></div>
        </div><!-- Fim Menu -->
        
</div><!-- Fim Fundo Topo -->
</div><!-- Fim Fundo Topo -->

Tenho uma css criada chamada topo.css

Onde tenho o codigo de css para as div, está assim:

body{margin:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;}
#fundo_topo{
background:url(../Imagens/Fundo_topo.jpg); repeat-x;
height:254px;
}

#topo{
width:1097px;	
border:0px solid #F00;
height:200px;
margin:0 auto;
}

#Imag_esq_topo{
width:175px;
background:url(../Imagens/Imag_esq.png);
height:252px;
float:left;

}

#Titulo_Pagina{
background:url(../Imagens/Titulo.png) no-repeat;
width:449px;
height:99px;
float:left;
margin-top: 35px;

}

#Publicidade_topo{
margin-top:15px;
margin-left:30px;
width:421px;
height:152px;
background:#CCC;
float:left;

}
#texto_publicidade{
width:421px;
height:152px;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:25px;
text-align:center;
margin-top:25px;
}

O que tenho feito e só isto.

Descubri que se na barra de endereço estiver o nome da pagina, entao ele aparece centralizado (Embora com um espaço em branco por cima)

mas se entrar pela index, ele abre a pagina, mas não centraliza as divs.

SLIFE · June 4, 2011 at 07:16 PM

Verifiquei que se colocar no body{text-align:center;}

ele centraliza-me o site.

Não sei é o porque!

Mas que centraliza, la isso centraliza.

taviroquai · June 4, 2011 at 07:37 PM

Parece que te falta aí um wrapper... uma div que irá conter todas as outras... mas parece que terás que alterar muita coisa 🙂

O wrapper será a div que ficará centrada:

<div id="wrapper">
<div id= "fundo_topo">
        <div id ="topo">
        
        <div id= "Imag_esq_topo">
        </div><!-- Fim Imag_esq_topo -->
        <div id= "Titulo_Pagina">
        </div><!-- Fim titulo Topo -->
        <div id="Publicidade_topo">
        <div id= "texto_publicidade"></div>
        </div><!-- Fim Publicidade Topo -->
        <div id= "Fundo_Menu">
        <div id="Menu_links"></div>
        </div><!-- Fim Menu -->
        
        </div><!-- Fim Fundo Topo -->
</div><!-- Fim Fundo Topo -->
<!-- outras divs... -->
</div><!-- Fim do wrapper -->

O CSS será aquele que indiquei no post anterior...

Se as outras divs ficarem todas centradas... terá que alterar o atributo text-align dessas divs...

Antes de começares a alterar estes ficheiros faz uma cópia e altera na cópia... é capaz de dar trabalho...

danielcorreia · July 6, 2011 at 11:25 PM

Boas!

Centrar uma página é simples, basta usar no CSS:

body { width: 960px; margin: 0 auto; }

Tão simples quanto isto. Usar "text-align" não faz sentido nenhum, querem alinhar texto?!

Ele tambem me dá uma msg a dizer para activar o modo de vista de compatibilidade, no IE, porque aprece isso?

A segunda questão é, eles no curso utilizam o padding para fazer dexer divs, ou andar com elas para o lado.

Eu aqui experimento, e se faço um padding-top=75px; ele aumenta a div.

O modo de compatibilidade aparece porque provavelmente o teu HTML não é válido. Se activares o modo de compatibilidade do IE8, basicamente estás a dizer ao motor do IE para fazer o render como o IE7.

Se aumentares o padding a uma div ela aumenta. Tenta fazer isso com a margin.

Por exemplo queres uma div com largura total de 400 mas com um padding de 20, então usas

div { width: 380px; padding: 10px; }

ou

div { width: 380px; padding-left: 20px; }

se o padding for só do lado esquerdo. Get it? 🙂

IvanGS · July 8, 2011 at 09:38 AM

crias uma div geral, e trabalhas dentro desse div.

as div's que estão dentro da geral metes width: 800px; height: 600px; margin-left: auto; margin-right: auto;.

isto alinha-te a div na horizontal, tens é que meter um tamanho fixo...

Sign In

Centralizar Div

Recommended Posts

SLIFE

brunoais

taviroquai

SLIFE

SLIFE

taviroquai

danielcorreia

IvanGS

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information