Ir para conteúdo

Arquivado

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

bobe_87

Como alinhar uma pagina de site inteira

Por , em Desenvolvimento frontend

Recommended Posts

bobe_87    0

bobe_87
Postado

amigos essa é a css que criei eno final da pagina o codigo html de minha pagina ocorre que que minha pagina completa quando exibida no navegador ela aparece a esquerda do navegador eu queria que ela aparecesse no centro alguem tem algunha ideia como eu faço isso ... por favor me ajudem .. obrigado

 

estilo.css

 

#topo {

margin:5px;

height:107px;

background:

}

#esquerda_menu {

margin:5px;

position:absolute;

top:128px;

left:11px;

width:150px;

background-color: #000000;

height: 18px;

clip: rect(auto auto auto 1);

}

#esquerda_menu_Principal {

margin:5px;

position:absolute;

top:149px;

left:11px;

width:150px;

height: 18px;

background-color: #000000;

}

#esquerda_menu_Tutorial {

margin:5px;

position:absolute;

top:171px;

left:11px;

width:150px;

background-color: #000000;

height: 17px;

}

#esquerda_menu_games {

margin:5px;

position:absolute;

top:192px;

left:11px;

width:150px;

height: 18px;

background-color: #000000;

}

#esquerda_menu_loja {

margin:5px;

position:absolute;

top:214px;

left:11px;

width:150px;

height: 18px;

background-color: #000000;

}

#esquerda_menu_Contatos {

margin:5px;

position:absolute;

top:237px;

left:11px;

width:150px;

height: 18px;

background-color: #000000;

color: #FFFFFF;

}

#meio {

margin-left:170px;

margin-right:220px;

background:color:

}

#direita {

position:absolute;

top:132px;

right:10px;

width:184px;

background:silver;

left:565px;

}

 

codigo da pagina

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>mhard</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="estilo.css"type="text/css">

<style type="text/css">

<!--

.style5 {font-size: 16px; font-family: Algerian; color: #CCCCCC; }

.style6 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

}

.style7 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

}

.style8 {font-size: 10px}

.style9 {

color: #CCCCCC;

font-size: 16px;

font-weight: bold;

}

.style10 {

color: #CCCCCC;

font-size: 10px;

}

.style14 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;}

.style15 {font-size: 12px}

.style16 {color: #FFFFFF}

.style18 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #CCCCCC; }

-->

</style>

</head>

<body bgcolor="#000000">

<div align="center"><span class="style18"></span>

</div>

<div align="left"></div>

<div id="topo" lang="pt"><img src="imagens/menu3.jpg" width="379" height="107"><img src="imagens/menu4.jpg" width="355" height="107"></div>

<div id="esquerda_menu" lang="pt" align="left">

<div align="center" class="style5 style16">Menu</div>

</div>

<div id="esquerda_menu_Principal">

<div align="center" class="style5 style6">Principal</div>

</div>

<div id="esquerda_menu_Tutorial">

<div align="center" class="style5 style6"><a href="Tutoriais/Tutoriais">Tutorial</a></div>

</div>

<div id="esquerda_menu_games">

<div align="center" class="style5 style6">Games</div>

</div>

<div id="esquerda_menu_Contatos">

<div align="center" class="style5 style6">contatos</div>

</div>

<div id="esquerda_menu_loja">

<div align="center" class="style5 style6">Loja Virtual</div>

</div>

<div id="meio">

<div align="center">

<p class="style9">Materia Especial</p>

<p><img src="imagens/winotimizado.jpg" width="230" height="197"></p>

<p class="style6 style10 style15">Otimizando Windows Vista </p>

<ul>

<li class="style7">

<p class="style10"><span class="style14">Apesar do Windows Vista trazer muitas novidades mas deixa a desejar em relação ao desempenho para computadores um pouco mais modestos a seguir estarei ensinando vocês a deixarem ele um pouc</span>o mais leve.<a href="Tutoriais/otimizando_o_Vista.htm">Leia mais...</a></p>

</li>

</ul>

<p align="left" class="style6 style8"> </p>

</div>

</div>

<div id="direita">

<div align="center">conteudo da coluna direita</div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz Henrique    1

Luiz Henrique
Postado

Não li seu code inteiro mas, para facilitar use uma div que todo conteudo do site esteja dentro dela ex: vou pegar parte de seu html.

 

CSS

#geral { width:600px; margin-left:-300px; left:50%; position:absolute;}
HTML

<body bgcolor="#000000">   <div id="geral">   	  <div align="center"><span class="style18"></span>	  </div>	  <div align="left"></div>	   <div id="topo" lang="pt"><img src="imagens/menu3.jpg" width="379" height="107"><img 	  ...	   ..	   ...	  <div align="center">conteudo da coluna direita</div>	    </div></body>
Colocando uma div geral fica mais fácil de trabalhar com alinhamento, desta forma seu site ficara sempre no centro horizontal

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

bobe_87, bem vindo ao fórum iMasters!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Esse assunto sobre centralizar página tem de monte aqui no fórum...basta pesquisar, mas como é seu primeiro post vou dar uma chance...hehehe brincadeira, vamos lá!!!!

 

Assim como o Graffittero disse, crie uma div geral com as propriedades que você achar melhor:

 

#geral{background:......;border:......;width:......;margin: 0 auto;}
Essa última linha a do margin, é que vai centralizar sua página! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

e sempre ponha no seu codigo css:

* {margin:0;padding:0;list-style:none;text-decoration:none;vertical-align:middle;}

Isso zera algumas porpriedades-padrão dos elementos e evita diversos problemas futuros http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web Developer    0

Web Developer
Postado

Amigo, você pode também colocar assim dentro da tag body:

 

<table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0">	<tr><td align="center" valign="middle">		<!------ conteúdo centralizado ------>		Coloque aqui todo seu conteúdo!		<!------ fim conteúdo centralizado ------>	</td></tr></table>

A tabela fará o mesmo efeito que a tag <div> citada pelo nosso amigo Luiz Henrique.

 

Neste caso você pode usar <div> tranquilamente, o problema de div é quando aplicamos styles que o tornam flutuante, dependendo da construção de sua página pode ficar desalinhado em relação à outros ítens fora da div, tem como colocar a <div> fixa, mas aí vem o firefox dentro do linux para atrapalhar tudo, ele não funciona igual no windows, mesmo sendo o mesmo navegador. Mas nesse caso, como tudo estará dentro da div e não tem styles aplicados, não sairá nada errado, mas mesmo assim, prefiro usar uma tabela e deixar esta tag para outras finalidades, isso vai do gosto de cada um mesmo.

 

Se você quiser centralizar apenas horizontalmente, mude o valing do <td> para "top", ou mais simples ainda, esqueça a tabela e use:

 

<center>	Coloque aqui todo seu conteúdo!</center>

Agora, uma coisa é certa, trabalhar com css é a melhor coisa, pois pode aplicá-la em qualquer página:

 

* {margin:0;padding:0;list-style:none;text-decoration:none;vertical-align:middle;}<!-- by #INSIDE# -->

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Tabelas não foram criadas para desenvolver layout´s de site.

Aqui é o fórum de Webstandards, caso queriam discutir sobre tabelas e tags depreciadas, postem no fórum de Dreamweaver, ok?!?

 

Qualquer dúvida, por favor, entrem em contato.

 

Att,

Giovani

 

 

Amigo, você pode também colocar assim dentro da tag body:

 

<table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0">	<tr><td align="center" valign="middle">		<!------ conteúdo centralizado ------>		Coloque aqui todo seu conteúdo!		<!------ fim conteúdo centralizado ------>	</td></tr></table>
A tabela fará o mesmo efeito que a tag <div> citada pelo nosso amigo Luiz Henrique.

 

Neste caso você pode usar <div> tranquilamente, o problema de div é quando aplicamos styles que o tornam flutuante, dependendo da construção de sua página pode ficar desalinhado em relação à outros ítens fora da div, tem como colocar a <div> fixa, mas aí vem o firefox dentro do linux para atrapalhar tudo, ele não funciona igual no windows, mesmo sendo o mesmo navegador. Mas nesse caso, como tudo estará dentro da div e não tem styles aplicados, não sairá nada errado, mas mesmo assim, prefiro usar uma tabela e deixar esta tag para outras finalidades, isso vai do gosto de cada um mesmo.

 

Se você quiser centralizar apenas horizontalmente, mude o valing do <td> para "top", ou mais simples ainda, esqueça a tabela e use:

 

<center>	Coloque aqui todo seu conteúdo!</center>
Agora, uma coisa é certa, trabalhar com css é a melhor coisa, pois pode aplicá-la em qualquer página:

 

* {margin:0;padding:0;list-style:none;text-decoration:none;vertical-align:middle;}<!-- by #INSIDE# -->
Abraço!

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