Centralizar a logo, o menu, o conteudo e o rodapé

Air-Gear · 28 de janeiro de 2013

Olá pessoal!

Ando meio enferrujado com HTML e CSS. Eu preciso fazer um site e preciso que a logo, o menu, o conteudo e o rodapé ficam todos centralizados. Do jeito que estou fazendo não tá muito bom. Confere o HTML e CSS:

Código HTML


<html>

<head>
<meta charset="utf-8">
<title>Site de Hospedagem</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>

<div class="menu_principal">
<p><a href="#">HOME</a>|<a href="#">HOSPEDAGEM</a>|<a href="#">REVENDA</a>|<a href="#">AFILIADOS</a>|<a href="#">CADASTRO</a>|<a href="#">EMPRESAS</a>|<a href="#">PARCERIA</a>|<a href="#">CENTRAL DO USUÁRIO</a>|<a href="#">CENTRAL DO ADMINISTRADOR</a></p>
</div>
<div class="pagina"></div>

<div id="rodape">
<a>Copyright © 2012 Fenelos -  Hospedagem de Sites   Telefone (31) 0000-0000   Onde estamos - Facebook, Twitter e Google+</a></div>
</body>

</html>

Código CSS

/*
===========================================================
// Zera as configurações padrões dos elementos html.
===========================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
color: #000;
}

:focus {
outline: 0px;
}

/* --------------------------------------------------------------------------------------------- */
/* Configuração básica padrão para os elementos HTML entre os navegadores web. */
/* --------------------------------------------------------------------------------------------- */
h1 {
font-size: 18px;
}

h2 {
font-size: 16px;
}

h3 {
font-size: 14px;
}

h1, h2, h3 {
margin: 16px 0;
}

h1, h2, h3, h4, h5, h6, strong {
font-weight: bold;
}

abbr, acronym {
border-bottom: 1px dotted #000;
cursor: help;
}

em {
font-style: italic;
}

blockquote, ul, ol, dl {
margin: 16px;
}

ol, ul, dl {
margin-left: 32px;
}

ol li {
list-style: decimal outside;
}

ul li {
list-style: disc outside;
}

dl dd {
margin-left: 16px;
}

th, td {
border: 1px solid #000;
padding: 8px;
}

th {
font-weight: bold;
text-align: center;
}

caption {
margin-bottom: 8px;
text-align:center;
}

p, fieldset, table {
margin-bottom: 16px;
}

body{
background: repeat scroll 0 0 #000000;
/*background: #FFFFFF;*/
background-image:url(images/logo2.jpg);
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0 0 0 0;
}
/*
===========================================================
// Fim das configurações padrões dos elementos html.
===========================================================
*/

* {margin:0; padding:0; list-style: none;}

div.cabecalho{
background-image:url(images/cabecalho.png);
background-repeat: repeat-x;
height:100px;
padding-top: 35px;
border: 0;
text-align:center;
}

div.cabecalho a{
color:#000000;
font-family:tahoma,arial,verdana;
font-size:12px;
padding:2px 13px 4px 10px;
text-decoration:none;
}

div.cabecalho a:hover{
color:#000000;
text-decoration:underline;
}

div.menu_principal{
width:1000px;
height:700px;
margin-top:200px;
background-image:url(images/cabecalho.png);
background-repeat: repeat-x;
height:100px;
padding-top: 40px;
border: 0;
text-align:center;
margin-left:132px;
}

div.menu_principal a{
color:#000000;
font-family:tahoma,arial,verdana;
font-size:12px;
padding:2px 13px 4px 10px;
text-decoration:none;
}

div.menu_principal a:hover{
color:#000000;
text-decoration:underline;
}

#rodape{
background-image:url(images/cabecalho.png);
background-repeat: repeat-x;
height:100px;
padding-top: 35px;
border: 0;

bottom: 0;
height: 35px;

text-align:center;
}

div.pagina{
width:1000px;
height:700px;
background-color:#CFF;
background-position:top;
margin:0 auto;
margin-top: -40px;
}

#logo{
background:url(images/fefe2.jpg) no-repeat;
width: 60px;
display: block;
height: 125px;
position: relative;
z-index: 100;
margin-top: -150px;
}

div.pagina a{
background: green;
width: 200px;
border: 1px solid black;
}

#quadro{
background: green;
margin 0;

}

div.box {
width: 200px;
border: 1px solid black;
background: green;
float:left;
margin: 10px;
}

Alguém pode me ajudar?

duzagatto · 28 de janeiro de 2013

Talvez eu não seja o mais indicado para te dar dicas até porque eu so iniciante, mas é só uma sugestão:

Tenta ultilizar margin de direita e esquerda para alinhar as divs no centro.

DiF · 28 de janeiro de 2013

Olá Air-Gear,

O melhor que tem a fazer é jogar todo o "site" para dentro de um container e limita-la e depois centraliza-la.

Utilizando seu código fiz uma modificação:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site de Hospedagem</title>
<link rel="stylesheet" type="text/css" href="estilo2.css" />
</head>
<body>
	<div id="master">
		<nav id="menu">
			<ul>
				<li><a href="#">HOME</a><span>|</span></li>
				<li><a href="#">HOSPEDAGEM</a><span>|</span></li>
				<li><a href="#">REVENDA</a><span>|</span></li>
				<li><a href="#">AFILIADOS</a><span>|</span></li>
				<li><a href="#">CADASTRO</a><span>|</span></li>
				<li><a href="#">EMPRESAS</a><span>|</span></li>
				<li><a href="#">PARCERIA</a><span>|</span></li>
				<li><a href="#">CENTRAL DO USUÁRIO</a><span>|</span></li>
				<li><a href="#">CENTRAL DO ADMINISTRADOR</a></li>
			</ul>
		</nav>

		<section id="conteudo"></section>

		<footer>
			<a>Copyright © 2012 Fenelos - Hospedagem de Sites Telefone (31)
			0000-0000 Onde estamos - Facebook, Twitter e Google+</a>
		</footer>
	</div>

</body>
</html>

CSS:

@CHARSET "UTF-8";

/*
===========================================================
// Zera as configurações padrões dos elementos html.
===========================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
color: #000;
}

:focus {
outline: 0px;
}

/* --------------------------------------------------------------------------------------------- */
/* Configuração básica padrão para os elementos HTML entre os navegadores web. */
/* --------------------------------------------------------------------------------------------- */
h1 {
font-size: 18px;
}

h2 {
font-size: 16px;
}

h3 {
font-size: 14px;
}

h1, h2, h3 {
margin: 16px 0;
}

h1, h2, h3, h4, h5, h6, strong {
font-weight: bold;
}

abbr, acronym {
border-bottom: 1px dotted #000;
cursor: help;
}

em {
font-style: italic;
}

blockquote, ul, ol, dl {
margin: 16px;
}

ol, ul, dl {
margin-left: 32px;
}

ol li {
list-style: decimal outside;
}

ul li {
list-style: disc outside;
}

dl dd {
margin-left: 16px;
}

th, td {
border: 1px solid #000;
padding: 8px;
}

th {
font-weight: bold;
text-align: center;
}

caption {
margin-bottom: 8px;
text-align:center;
}

p, fieldset, table {
margin-bottom: 16px;
}

body{
background: repeat scroll 0 0 #f00;
/*background: #FFFFFF;*/
background-image:url(images/logo2.jpg);
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0 0 0 0;
}

#master{ width: 1000px; margin: 200px auto; background: blue;}

/* MENU*/

#menu{ width: 1000px; height: 100px; font-size: 12px;}
#menu ul{ list-style: none;}
#menu li{ float: left; display: block;}
#menu li span{padding-left: 10px; padding-right: 10px;}
#menu li a{text-decoration: none;}
#menu li a:hover{text-decoration: underline;}

/* Conteudo*/

#conteudo{ background: #fff; height: 700px; width: 100%;}

footer{ background: yellow; height: 35px; bottom: 0px; text-align: center; line-height: 35px;}

As principais mudanças efetuadas é o uso das tags do HTML 5 onde o nav combinado com listas não ordenadas para o menu... section para o conteúdo.. e a tag footer para rodapé.

Sobre a centralização, Note que a estrutura básica está dentro do container "master" onde ele foi limitado a 1000px e centralizado com margin: 200px auto.

os 200px é para margem superior( mantive o seu original)

veja que logo abaixo do menu, o section também ficou centralizado... e abaixo do section o footer tambem ficou centralizado.. devido o uso do container.

Se der uma pequena estudada para relembrar.. vale a pena perder um pouquinho de tempo.

Obs: tinha imagens no seu css, como eu não tinha, substitui por cores.. so para representar.. note que o menu eu deixei com o fundo azul, o conteudo com fundo branco e o rodape com o fundo amarelo ... e o fundo da pagina toda o body deixei em vermelho.. só para destacar e fazer você entender como foi estruturado.

Agora cabe a você adaptar as imagens como bacground.. e o resto que quiser mudar

Att,

Dif