Padding, Centralizar...

rcdesign · Junho 14, 2005

Como a grande maioria dos desenvolvedores ainda estou apenas iniciando com CSS e é claro cheio de dúvidas e problemas...

Estou fazendo meu primeiro site tableless, ainda bastante simples, é claro, mas preciso resolver alguns probleminhas que não estou encontrando solução..

1. Sei que o IE e o Firefox interpretam de formas diferentes o CSS e em relação ao padding a coisa é mais óbvia ainda. Um interpreta o padding interno à DIV outro externo.. pelo menos foi essa a conclusão que eu cheguei.. A questão é.. preciso deixar o texto dentro da div com uma margem interna nas laterais.. como fazer para que ambos os navegadores interpretem de forma igual?

2. Preciso centralizar todo o site na janela do navegador... no IE está aparecendo do jeito que eu quero, mas no Firefox está tudo centralizado à esquerda....

**EDITADO**

resolvi o 'problema' 2 alterando o CSS conforme abaixo... mas ainda estou sem conseguir resolver a questão 1...

**EDITADO 2**

resolvido mas nem tanto... essa alteração do CSS funcionou, mas quando altero a resolução do vídeo dá pau no layout :wacko: com DIV's ficando com tamanhos diferentes.....

Meu CSS

body 	{	font-size: small;	font-family: "Arial";	text-align: center;	line-height: 100%;	background-color: #000000;	margin: 0	}	a 	{	color: black;	text-decoration: none	}a:hover 	{	color: #003366;	text-decoration: none	}	#site	{width: 90%;margin:0 auto;  	text-align:left; /* "remédio" para o hack do IE */		}#topo	{	background: url(img/topfilete.jpg);	background-repeat:repeat-x;	position:relative;	text-align: center;	height: 65px;	width: 100%;	}#menu 	{	color: black;	font-size: 9px;	line-height: 16px;	background-color: #cccccc;	text-align: center;	letter-spacing: 2px;	position:relative;	margin:0 1 1 0;	width: 100%;	}#imagem 	{	background-color: #cccccc;	text-align: left;	height: 163px;	width: 100%;	}#conteudo	{	background-color: #dfdfdf;	text-align: justify;	padding:10;	width: 100%;	}#rodape1 	{	background: url(img/down_blend.gif);	background-repeat:repeat-x;		height: 15px;	width: 100%;	}#rodape2	{	background: url(img/down_bg.gif);	background-repeat:repeat-x;		height: 30px;	width: 100%;	}

Meu HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>.:: Clínica Losso ::.</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="estilo2.css" rel="stylesheet" type="text/css"></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <div id="topo">  	<img src="img/top.jpg" height="65" width="760" /></div>  <div id="menu">  	<a href="#">HOME</a> | <a href="#">INSTITUCIONAL</a>  | <a href="#">CURRÍCULOS</a> | <a href="#">CIRURGIA PLÁSTICA </a> |<a href="#"> ARTIGOS E NOTÍCIAS</a> |<a href="#"> LINKS  </a>| <a href="#">CONTATO</a></div>  <div id="imagem">  	<img src="img/main.jpg" alt="Logotipo" height="163" width="760" /></div>  <div id="conteudo">  	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  	<p>Duis autem vel eum iriure dolor in hendrerit in vulLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>  	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. putate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>  <div id="rodape1"></div>  <div id="rodape2"></div></body></html>[HTML]

_ nEoN _ · Junho 14, 2005

achei engraçada essa parte...

tudo centralizado à esquerda....

acontece, mais vamus lá. Primeiro vou explicar e ao mesmo tempo dar uma dica, você que esta estudando CSS / XHTML deve ter se deparado com algum artigo sobre Box Model (se não leu nada sobre vai no tópico pendurado com links e procure saber a respeito), na verdade os navegadores interpretam esse box model de forma diferente entre "", o que acontece é que eles interpretam certo, da mesma forma, porem com alguns ruidos.Agora explicando o seu problema, quando voce quer deixar uma margem entre 2 conteudos, sendo que, em um exemplo simples tenho a seguinte estrutura..

<div id="fora"><div id="dentro"></div></div>

OK, pense da seguinte fora, tudo que esta dentro, caso voce queira essa margem, deve obrigatoriamente ter a margem definida, sempre quando utilizar dois elementos um dentro do outro, sempre coloque margin no objeto de dentro pois qse todos interpretam dessa forma, nunca utiliza o padding no objeto de fora, isso deve resolver teu problema numero 1.Seu problema de numero 2 é o seguinte. Lembra quando voce fazia seus sites com tabelas, dai você queria centralizar o site todo ? você utilizava uma tabela com 100% de largura e 100% de alltura e pronto... tava tudo certo... agora no Xhtml fica um pouco diferente, ao inves de usar a tabela, crie uma DIV que contenha o site todo dentro dela e determine a ela uma posicao absoluta dentro do navegador... segue um codigo abaixo que centraliza o site em qualquer resolucao...

#container {position: absolute;width: 700px; /* Largura do Site */left: 50%; /* Joga a DIV para a metade do tamanho da area visivel */margin-left: -350px; /* Metade da largura do site */}

para aplicar...

<div id="container">...SITE...</div>

Issu deve resolver teu problema 2...Qualquer duvida estamos ae...neoN

rcdesign · Junho 14, 2005

http://forum.imasters.com.br/public/style_emoticons/default/blush.gif hehehe realmente "centralizado à esquerda" é bravo....

bom.... como você pode ter observado pelas ediçõs do meu post eu estou criando e estudando ao mesmo tempo então eu realmente resolvi a questão de centralizar o site não exatamente da forma que você comentou nEoN, mas está arrumado...

a questão da margem deu pra sacar melhor e também resolvi agora.. como um problema nunca vem sozinho... vamos para as próximas dúvidas....

no meu html dentro da DIV conteúdo preciso ter duas colunas... então meu código CSS agora está assim:

body 	{	font-size: small;	font-family: "Arial";	text-align: center;	line-height: 100%;	background-color: #000000;	margin: 0 auto;		}	a 	{	color: black;	text-decoration: none	}a:hover 	{	color: #003366;	text-decoration: none	}	#site	{width: 95%;margin:0 auto; 	 text-align:left; /* "remédio" para o hack do IE */		}	#topo	{	background: url(img/topfilete.jpg);	background-repeat:repeat-x;	text-align: left;	height: 65px;	width: 100%;	}#menu 	{	color: black;	font-size: 9px;	line-height: 16px;	background-color: #cccccc;	text-align: center;	letter-spacing: 2px;	margin:0 0 1 0;	width: 100%;	}#imagem 	{	background-color: #cccccc;	text-align: left;	height: 163px;	width: 100%;	}#conteudo	{	background-color: #dfdfdf;	text-align: justify;	width: 100%;	height:50%	}#rodape1 	{	background: url(img/down_blend.gif);	background-repeat:repeat-x;		height: 15px;	width: 100%;	}#rodape2	{	background: url(img/down_bg.gif);	background-repeat:repeat-x;		height: 30px;	width: 100%;	}	.contesq	{	text-align: justify;	margin: 15 10 15 10;	width: 65%;	float: left	}	.contdir	{	text-align: justify;	margin: 15 10 15 10;	width: 35%;	float: left;	}

e meu HTML assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>.:: Clínica Losso ::.</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="estilo2.css" rel="stylesheet" type="text/css"></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div id="site">  <div id="topo"> 	 <img src="img/top.jpg" /></div>  <div id="menu"> 	 <a href="#">HOME</a> | <a href="#">INSTITUCIONAL</a>  | <a href="#">CURRÍCULOS</a> | <a href="#">CIRURGIA PLÁSTICA </a> |<a href="#"> ARTIGOS E NOTÍCIAS</a> |<a href="#"> LINKS  </a>| <a href="#">CONTATO</a></div>  <div id="imagem"><img src="img/main.jpg" width="612" height="163"> </div>  <div id="conteudo"> 	 <div class="contesq" 	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 	 <p>Duis autem vel eum iriure dolor in hendrerit in vulLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> 	 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. putate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div> 	 <div class="contdir">teste</div></div>  <div id="rodape1"> </div>  <div id="rodape2"> </div></div></body></html>

bom.. é claro que está dando errado.... a DIV class contdir está aparecendo em baixo da DIV class contesq....

outra coisa.... eu quero colocar o meu topo com uma include PHP..acontece que quando faço a include no lugar da imagem aparece um 'espaço' entre as DIVS topo e conteúdo......??????

_ nEoN _ · Junho 14, 2005

.contesq{text-align: justify;margin: 15 10 15 10;width: 65%;float: left}.contdir{text-align: justify;margin: 15 0 15 0;width: 30%;float: left;background: #f30;}

atualize seu codigo... problema nas margens, quando voce define um tamanho das colunas onde a soma vai dar 100% as margens laterais devem ser iguais a 0, se não o conteudo estoura o limite da div pai...

;)

rcdesign · Junho 15, 2005

Puxa nEoN isso é até uma coisa meio óbvia, mas para quem está começando com tableless - como eu - acaba passando despercebido... fiquei um tempão ontem tentando entender o porquê disso estar dando errado e nem me passou pela cabeça que eram as margens....

Valeu!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

rcdesign · Junho 15, 2005

outra coisa.... eu quero colocar o meu topo com uma include PHP..acontece que quando faço a include no lugar da imagem aparece um 'espaço' entre as DIV'S topo e conteúdo......porque isso acontece?? como resolver????

_ nEoN _ · Junho 15, 2005

outra coisa.... eu quero colocar o meu topo com uma include PHP..acontece que quando faço a include no lugar da imagem aparece um 'espaço' entre as DIV'S topo e conteúdo......porque isso acontece?? como resolver????

<{POST_SNAPBACK}>

poste o codigo do seu include...

rcdesign · Junho 16, 2005

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.:: Clínica Losso ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilo2.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="site">
	<div id="topo">
		<? include "topo.inc" ?></div>
	<div id="menu">
		<a href="#">HOME</a> | <a href="#">INSTITUCIONAL</a>  | <a href="#">CURRÍCULOS</a> | <a href="#">CIRURGIA PLÁSTICA </a> |<a href="#"> ARTIGOS E NOTÍCIAS</a> |<a href="#"> LINKS  </a>| <a href="#">CONTATO</a></div>
	<div id="imagem"><img src="img/main.jpg" width="612" height="163"> </div>
	<div id="conteudo">
		<div class="contesq">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
		<p>Duis autem vel eum iriure dolor in hendrerit in vulLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
		<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. putate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>
		<div class="contdir">teste</div>
	</div>
	<div id="rodape1"> </div>
	<div id="rodape2"> </div>
</div>
</body>
</html>

Arquivo include topo.inc

<img src="img/top.jpg" width="537" height="65"></body>

Já tentei algumas coisas diferentes disso, inclusive fazendo a include direto da página topo.php

PHP

[*]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[*]<html>

[*]<head>

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

[*]<title></title>

[*]<style type="text/css">

[*]<!--

[*]body {

[*] margin-left: 0px;

[*] margin-top: 0px;

[*] margin-right: 0px;

[*] margin-bottom: 0px;

[*]}

[*]-->

[*]</style></head>

[*]

[*]<body>

[*]<img src="img/top.jpg" width="537" height="65"></body>

[*]</html>

[*]

mas o resultado é sempre o mesmo...

com a imagem no html a DIV topo e a DIV menu ficam certas, juntas..

com qualquer um dos arquivos include aparece uma 'linha'.. um 'espaço' entre as duas DIV´s...

_ nEoN _ · Junho 16, 2005

o include nao precisa disso cara..

# <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"># <html># <head># <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"># <title></title># <style type="text/css"># <!--# body {#     margin-left: 0px;#     margin-top: 0px;#     margin-right: 0px;#     margin-bottom: 0px;# }# --># </style></head>## <body>

como ela é uma pagina de inclusão coloque apenas o codigo..

<img src="img/top.jpg" width="537" height="65">

tente isso, deve ser esse seu problema.... lembrando que tag de imagem se fecha no final e é obragatoriamente necessario a declaração do ALT da imagem. ;)

rcdesign · Junho 16, 2005

Eu sei que não precisa do código completo nEoN, por isso mesmo é que eu mandei também o código da outra include (topo.inc) que só tem a tag da imagem mesmo... só que o "tonto" aqui não reparou que não tirei o fechamento </body> depois da imagem... que animal...só uma perguntinha... porquê você diz que é "obrigatório" o ALT da imagem?com ou sem ele não muda absolutamente nada ...!!!??!!??

rcdesign · Junho 16, 2005

... a não ser quando o mouse/cursor estiver em cima da imagem que vai aparecer a declaração do ALT...

_ nEoN _ · Junho 16, 2005

ALT serve para se a imagem nao for carregada ter um texto dentro para orientar o visitando... faz um site com imagens kebradas e sem o ALT... depois faz um com ALT, você vai ver o que acontece...

rcdesign · Junho 16, 2005

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Genautech · Junho 17, 2005

o include nao precisa disso cara..
# <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"># <html># <head># <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"># <title></title># <style type="text/css"># # </style></head>## <body>
como ela é uma pagina de inclusão coloque apenas o codigo..
<img src="img/top.jpg" width="537" height="65">
tente isso, deve ser esse seu problema.... lembrando que tag de imagem se fecha no final e é obragatoriamente necessario a declaração do ALT da imagem. ;)

<{POST_SNAPBACK}>

Hehe,

Só não esqueça de criar uma classe IMG para mostrar a imagem... não é legal apresentar o tamanho dentro do código, quando ele pode ser padronizado dentro do css.

_ nEoN _ · Junho 17, 2005

o include nao precisa disso cara..
# <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"># <html># <head># <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"># <title></title># <style type="text/css"># # </style></head>## <body>
como ela é uma pagina de inclusão coloque apenas o codigo..
<img src="img/top.jpg" width="537" height="65">
tente isso, deve ser esse seu problema.... lembrando que tag de imagem se fecha no final e é obragatoriamente necessario a declaração do ALT da imagem. ;)

<{POST_SNAPBACK}>
Hehe,

Só não esqueça de criar uma classe IMG para mostrar a imagem... não é legal apresentar o tamanho dentro do código, quando ele pode ser padronizado dentro do css.

<{POST_SNAPBACK}>

não é necessário determinar uma classe, o browser automaticamente mostra a imagem em 100% o seu tamanho.

rcdesign · Junho 17, 2005

:wacko: hehe.. fiquei confuso.. mas está funcionando fazendo a página de include apenas com a tag da imagem..

Arquivado

Padding, Centralizar...

Recommended Posts

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Genautech 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

_ nEoN _ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rcdesign 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante