centrar todo o conteudo do site

[fil79 5]

boas

estou a fazer um site que quero que fique todo centrado independentemente da resolução..para tal usei o seguinte código:

<style type="text/css">

#centrar {

position:absolute;

top: 50%;

left: 50%;

width: 750px;

height: 640px; margin-top: -290px;

margin-left: -400px;

background-color: #FFFFFF;

}

</style>

e no body

<div id="centrar">

//conteudo do site

</div>

acontece que dentro desta div gostaria de colocar outras divs com os menus, cabeçalhos, galerias etc e gostaria que esses conteudos ficasse também colocados em relação á div centrar..como posso fazer isso..espero que me tenham percebido..desde já agradeço

[marinheiro 0]

altera o css para:

#centrar {

position: relative;
width: 750px;
height: 640px;
margin: 50% 50% 50% 50%;
background-color: #FFFFFF;
} 

[fil79 5]

o código acima já centrava o site...mas agora quero usar uma div com uma galeria de fotos em flash que quero que fique 200px left e 400 de top mas relativamente á dive centrar e não em relação á tela:

EX:

<div id="Layer1">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="400">

    <param name="movie" value="galeria1.swf" />

    <param name="quality" value="high" />

    <embed src="galeria1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400"></embed>

  </object>

quero que esta div fique na posição relativa á div principal(centrar)

[marinheiro 0]

mas como coloquei é mais simples de fazeres alterações de tamanho, basta alterares os valores de height e width

para isso, se a centrar não tiver o "position:absolute", basta a layer1 ter "position:relative", "top:400px" e "left:200px"...

[fil79 5]

desculpa a minha insistência mas sendo assim como ficaria o código?

se usar este:

body {

background-image: url(fundo_final2.jpg);

background-repeat:repeat;

margin: 3px;

padding: 3px;

}

#centrar {

position: relative;

width: 750px;

height: 640px;

margin: 50% 50% 50% 50%;

background-color: #FFFFFF;

}

#Layer1 {

position:relative;

left:100px;

top:100px;

}

se fizer assim aparece scroll(horizontal e vertical) e o site fica enorme...além do mais o layer 1 não fica dentro da div centrar...muito obrigado pela paciência:)

[marinheiro 0]

onde está "margin: 50% 50% 50% 50%;" é "margin:auto;" e fica centrado na horizontal... estou a ver como é na vertical...

[fil79 5]

assim já aparece centrado na horizontal...continua a faltar a na vertical e ainda não consigo têr o div da galeria onde pretendo...agradeço muito ajuda

[jreis 0]

Centrar na vertical se não me engano só com CSS é impossível.

Usando javascript já é outra coisa, basicamente é sacares a altura do viewport (não me lembro da propriedade assim de repente, e é capaz de no IE ser diferente do resto (para não variar)), sacar a altura da cena que queres centrar, dividir isso por 2, e aplicar esse valor como margin-top no elemento em causa. Digo eu, assim de repente.

[fil79 5]

ok...obrigado pela ajuda...e como posso fazer com que a div da galeria fique sempre na posição relativa á div centrar?

[marinheiro 0]

se estiverem as duas com "position:relative" e a da galeria dentro da centrar, a posição da interior é referenciada pela posição da exterior...

[fil79 5]

não estou a conseguir lá chegar....

[jreis 0]

Tendo um contento (div, ou qualquer coisa) que tenha position: relative;, qualquer elemento dentro desse contentor, quando tiver position: absolute;, em vez de ser posicionado em relação á página, é posicionado em relação ao dito contentor.

Ou seja, se tiveres top: 0px; left: 0px;, o elemento não irá aparecer no canto superior esquerdo da página, mas sim no canto superior esquerdo do elemento contentor.

Portanto tens a tua div centrada, colocas position:relative;, depois colocas position:absolute; na galeria, e os valores top e left (ou o que te der mais jeito) correctos para o teu caso.

E deve funcar bem. Esperemos nós.

[fil79 5]

todo o conteudo aparece centrado certo excepto a galeria que a parece muito para baixo da div principal:

<title>A Courela</title>

<style type="text/css">

<!--body {

background-image: url(fundo_final2.jpg);

background-repeat:repeat;

margin: 0px;

padding: 0px;

}

#centrar

{

position: relative;

width: 750px;

height: 640px;

margin: auto;

background-color: #FFFFFF;

}

#Layer1 {

   position:absolute;

   left:100px;

   top:100px;

   

}

</style>

</head>

<div id="centrar">

<p>    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="200" title="courela">   

<param name="movie" value="header1.swf" />   

<param name="quality" value="high" />

<embed src="header1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="20t0"></embed>   

</object> 

<table width="150" border="0">    <tr>     

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="156" height="289" align="left">   

<param name="movie" value="menu.swf" />       

<param name="quality" value="high" />   

<embed src="menu.swf" width="156" height="289" align="left" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>     

</object>   

</tr>

</table>

<div id="Layer1">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="400">    <param name="movie" value="galeria1.swf" /> 

<param name="quality" value="high" /> 

<embed src="galeria1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400"></embed>

</object>

</div>

  </div>

</body>

</html>

[marinheiro 0]

mas tu queres meter ficheiros em flash em cima de ficheiros em flash?!?!?

é que a div centrar tem 640px de altura e, desses 640px, tens 200 para o primeiro flash e 289 para o 2º, ou seja, ocupas logo 489px com 2 ficheiros em flash... a layer1 está posicionada a 100px do topo... acho (não garanto porque, por acaso, nunca experimentei) que não podes colocar um flash em cima de outro... talvez seja por isso que a galeria se desloque para o fim da div centrar...

alterando o teu código para div's em substituição dos ficheiros em flash, a layer1 fica posicionada exactamente no sitio correspondente...

uma outra coisa: tens 20t0 em vez de 200 no height do primeiro flash...