Jump to content
Sign in to follow this  
fil79

centrar todo o conteudo do site

Recommended Posts

fil79

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


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
marinheiro

altera o css para:

#centrar {

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
fil79

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)


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
marinheiro

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

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
fil79

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


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
fil79

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


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
jreis

Centrar na vertical se não me engano 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.


"Pensa positivo: tudo pode piorar"

Share this post


Link to post
Share on other sites
fil79

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


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

Share this post


Link to post
Share on other sites
jreis

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.


"Pensa positivo: tudo pode piorar"

Share this post


Link to post
Share on other sites
fil79

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>


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
marinheiro

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


há 10 tipos de pessoas: as que sabem binário e as que não sabem...[br][br]todas as nossas vidas não passam de release candidates... com o aperfeiçoamento, um dia chegaremos à versão final..

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
Sign in to follow this  

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