Jump to content
SLIFE

Centralizar Div

Recommended Posts

SLIFE

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


Sandro Coelho

Share this post


Link to post
Share on other sites
brunoais

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


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
taviroquai

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>

Share this post


Link to post
Share on other sites
SLIFE

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.


Sandro Coelho

Share this post


Link to post
Share on other sites
SLIFE

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.


Sandro Coelho

Share this post


Link to post
Share on other sites
taviroquai

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...

Share this post


Link to post
Share on other sites
danielcorreia

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? :)

Share this post


Link to post
Share on other sites
IvanGS

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.