Erro em espaçamento de div´s

[cvinnicios 0]

Defini o meu código num arquivo .css assim:

body{	font-family: Arial, Helvetica, sans-serif;	font-size: 10px;				/*text-align: center;*/}#total{	position:absolute;	width: 710px;	margin: 0 auto;	padding-bottom: 5px;	padding-left: 5px;	padding-right: 0px;	padding-top: 5px;	border-style: solid;	border-width: 1px;	border-color: #FFCC99;	/*text-align: left;*/}#cabecalho{	height: 60px;	padding-bottom: 0px;}#logo, #clientes, #parceiros, #contabilidade, #acesso, #atualizacao{	float: left;}#clientes a, #parceiros a, #contabilidade a, #acesso a, #atualizacao a, #clientes a:visited, #parceiros a:visited, #contabilidade a:visited, #acesso a:visited, #atualizacao a:visited, #clientes a:active, #parceiros a:active, #contabilidade a:active, #acesso a:active, #atualizacao a:active{	background-image:url(img/botao.gif);	background-repeat: no-repeat;	font-size: 11px;	padding-top: 6px;/*<------------------------------------*/	display: block;	text-decoration: none;	color:#000000;	border-width: 0px;	width: 100px;	height: 60px;}#clientes a:hover, #parceiros a:hover, #contabilidade a:hover, #acesso a:hover, #atualizacao a:hover{	background-image:url(img/botao_sobre.gif);	background-repeat: no-repeat;	font-size: 11px;	margin-bottom: 0px;	display: block;	text-decoration: none;	color:#000000;	border-width: 0px;	width: 100px;	height: 60px;	cursor: help;}#clientes a span, #parceiros a span, #contabilidade a span, #acesso a span, #atualizacao a span{	display: none;}#clientes a:hover span, #parceiros a:hover span, #contabilidade a:hover span, #acesso a:hover span, #atualizacao a:hover span{	display: block;	position:absolute;	border: 1px #000099 groove;	background-color:#00CCFF;	text-align: left;	padding: 2px 2px 2px 2px;	filter: alpha(opacity=65);}#anuncio{	clear: both;	padding-top: 0px;	margin-top: 0px;	height: 169px;}#conteudo{	padding-top: 0px;	padding-bottom: 0px;	margin-top: 0px;	margin-bottom: 0px;}/*menu do site*/#menu a{	background-image:url(img/menu_bot.png);	width: 140px;	height: 35px;	text-decoration: none;	font-size: 11px;	color:#000000;	display:block;}#menu a:hover{	background-image:url(img/menu_bot_over.png);	background-repeat: repeat-x;	height: 35px;	text-decoration: none;	font-size: 11px;	color:#000000;}

mas dá vários problemas.

 

1º problema:

A página não centraliza. A propriedade "margin: 0 auto;" não resove e se eu defino no body o text-align como center aparece só a metade da página na tela.

 

2º problema:

defini uma com o nome de total em que todo o site fica e defini a lagura em 710 px, 700 px de largura da página e 5 px de cada lado e a borda em 1px, e defini o padding-left em 5px, mas sempre a borda direita fica maior. Já defini ela com 712px por causa das bordas e não muda nada.

 

3º problema:

Eu queria q no meu site uma figura de 700px x 200px ficasse colada no menu da página que está acima dela, mas quando eu defino nas divs no menu superior um padding-top de 6px para afastar o icone do menu da borda, o site todinho cria um espaçamento também. Já usei clear: both, mas não funcionou

 

4º problema:

os icones ficam com uma linha roxa que eu não consigo tirar.

 

5º problema:

no div do menu lateral #menu fica com um espaçamento indesejado quando eu defino a propriedade display: block, mas se eu tirar, não aparece a figura de fundo.

 

Como resolver esses problemas por favor?

ps: coloquei a página nesse endereço: cvinnicios.brinkster.net

[netShot 1]

vamos por partes, vou postar aqui uma parte do CSS corrigido e comentado, se você não entender pode perguntar.

 

/* "Zera" propriedades gerais */* {	margin:	0;	/* Elimina margens do documento */	padding: 0;	/* Elimina espacamento do documento */	list-style: none;	/* Sem lista nos <ul> */	text-decoration: none;	/* links sem "decoracao" */	font-style: normal;	/* estilo de fonte normal */}body{	font: 10px Arial, Helvetica, sans-serif;	/* Propriedade font de forma abrevida <tamanho> e <family> */}img {	border: none;	/* Retira as bordas da imagem (a linha roxa) ^^ */}#total{	width: 700px;	/* Tamanho da div central (700) + padding ( 5 + 5 ) = um total de 710px */	margin: 5px auto;	/* Margin (Top de 5px e centraliza a div ) */	padding: 5px;	/* Espaçamento interno da div (única declaração para: cima direita baixo esquerda) */	border: 1px solid #ffcc99;	/* Borda -> 1px + estilo + cor em hexadecimal */	text-align: left;	/* Alinhamento padrao dentro da div */}#logo, #clientes, #parceiros, #contabilidade, #acesso, #atualizacao{	float: left;	text-align: center;	/* Centraliza as imagens e o texto */}

bom acho que isso já resolve todos (ou quase) todos os problemas, sinta-se a vontade em perguntar

 

e quem quiser corrigir algo ^^ sinta-se livre também :)

 

afinal também estou aqui para aperfeiçoar e aprender.

 

abraços

[cvinnicios 0]

cara, mto obrigado. Valeu as dicas.

[André do Vale 76]

Ótima explicação ein netShot, ta de parabéns! ;)