[Resolvido] Como manter a proporção em um site

pslucasps · Junho 18, 2009

Uma das principais perguntas de quem esta começando a desenvolver para a web é como manter a porporção em sites para poderem serem vistos nas mais diversas resoluções possiveis.

Bom como estou no começo não sei se há um modo ao certo para isso e por esse motivo faço a pergunta: Existe alguma maneira de desenvolver um site que não perca sua "proporcionalidades" em diferentes resoluções de diferentes monitores?

No meu caso comecei a desenvolver um layout fixo com menu a esquerda e conteudo a direita e ambos centralizados, ou seje um layout padrão. Optei por utilizar 750px para o cosntrução do layout, porém logo depois me deparo com um problema: A resolução. Na resulução de 1024 X 780 não encontrei problemas e o site ficou como eu quiz, ou seja centralizado e com um bom espaço entre as bordas do monitor e o site. Mudei então a resolução de meu computador para 800 X 600 e a area ocupada pelo menu e pelo conteudo do site passou a ocupar praticamente o total da tela. Passo então para a resolução de 1280 X 1024 e o site que antes podia ser bem visto passa a ser muito "fino". Conclusão a largura do site mudava a cada tipo de resolução.

Sendo assim visitei o site do maujor para fazer o teste ja que ele é considerado um bom progrmador nessa area e se o site dele também sobresse essas distorções eu teria certeza que não ha nada a fazer em relação a isso. Porem reparei que em qualquer uma das 3 resoluções a largunra do site não mudava e encaixavasse perfeitamente na tela tendo inclusive as imagens do mesmo encaixando-se.

Bom o que eu quero saber é como posso fazer isso com meu site. Tentei analisar o código CSS do maujor e não consegue reparar nada quem pudesse ser responsavel por esse "encaixe" e por isso venho perguntar, como fazer o site se "encaixar" da forma que eu quero. O certo então seria utilizar "%" ao invés de "px" em todos valores de tamanhos incluindo bordas? Ou no meu caso a largura mudava pois meu layout é fixo e não fluido como o do site do maujor? Existe alguma maneira de manter as proporções?

Agradeceria se alguem puder me explicar isso, pois penso que estes são conceitos que dificilmente você le em apostilas ou acha um artigo especifico e na minha opinião isso deve se tratar dos "macetes" e conceitos de desenvolvimento web. Por isso se alguem puder explicar ficaria grato.

Thiago Retondar · Junho 18, 2009

Poste o link do seu site. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

O site do Maujor é feito em porcentagem. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

pslucasps · Junho 18, 2009

@Thiago Retondar: Grato pela resposta. No momento estou sem local para hospedar meu site, exceto se hospedar em um servidor free. Vou criar uma conta e posto o link aqui.

pslucasps · Julho 2, 2009

Olá, desculpe pela demora pra postar mas só agora hospedei o site em um servidor e voltei a reformular o mesmo. Bom como estou com problemas e duvidas sobre box model e resolução de tela resolvi começar o site novamente utilizando dessa vez unidades de porcentagem para widths e heights e a unidade "em" para bordas, paddings e margins. Bom abaixo vai o link do site e o código fonte do mesmo para poupar-lhes trabalho.

Site Aqui

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<!--Inicio CSS link-->
	<link href='ProtegeStyle.css' rel='stylesheet' type='text/css' media='all' />
	<!--Fim CSS link-->
	
	<title>Protege Redes & Telas</title>
</head>

<body id='inicio'>
	
	<div id='geral'>

		<div id='header'>
			<div id='header1'>
				<p class='center'><img src='imagens/logo.png' alt='Logo Protege'></p>gdfgdfg
			</div>
			<div id='header2'>2
			</div>
		</div>
		
		<div id='midlle'>
			<ul id='menu'>
			</ul>
			<div id='conteudo'>
			</div>
		</div>
		
		<div id='footer'>
		</div>
		
	</div>

</body>

</html>

ProtegeStyle.css

@charset "iso-8859-1";

*
{
margin:0 0 0 0;
padding:0 0 0 0;
font-family:Tahoma, Arial, Genica, Helvetica, sans-serif;
font-size: 100%;
}

* html #tudo /*Hack para IE, rodapé no fundo da pagina*/
{
height:100%;
}

html, body
{
height:100%
}

body
{
background-color:#E7E7E2;
}

/*Inicio Geral*/
div#geral
{
width:77%;
min-height:100%;
background-color:blue;
border-color:red; /*#CDC9C9;*/
border-style:solid;
border-width:0 0.15em 0 0.15em;
margin:auto;
position:relative;
}
/*Fim Geral*/

/*Inicio Headers*/
div#header
{
background-color:red;
margin:0 0.7em 0 0.7em;
position:relative;
min-height:100px;
}

div#header1
{
width:56.0%;
min-height:90px;
padding:0.8em 0 0 0;
background-color:purple;
position:relative;
float:left;
}

div#header2
{
width:43.0%;
background-color:yellow;
position:relative;
float:right;
border-style:dashed;
border-width:0 0 0 0.1em;
}
/*Fim Headers*/

/*Inicio Conteudo*/
p.center
{
text-align:center;
}
/*Fim Conteudo*/

Só para esclarer a parte vermelha é o elemento header que é o pai dos elementos header1 (roxo) e header2 (amarelo). No header1 coloquei o logo e no header 2 pretendo colocar alguma frase. Posteriormente vou realizando a inserção dos demais conteiners conforme for construindo o site.

Bom aqui vão as perguntas:

1 - Em relação ao box model ele está correto ou preciso arrumar algo? Eu utilizei como já disse porcentagem e "em", porém não sei se essa combinação é correta. Meu objetivo é fazer com que o site sofra o minino de distorções possivels ao mudar a resolução ou rolar o scrool. Principalmente não quero deixar que surjam barras verticais de rolagem, ou seja fazer um layout nos moldes do site do maujor que sofre pouquissimas ou nenhuma ateração quando é mudada a resolução ou usado o scrool. Se puderem me auxiliar nisso eu agradeço.

2 - Bom, o que fiz foi determinar uma width para todo o site e centraliza-lo. Após isso quiz deixar uma margem entre o site e o header dele, para isso criei o header (vermelho, pai) e assim o header (vermelho) não permite que o header 1 ou header 2 "escorreguem" ao usar o scrool por exemplo. O que eu queria é que o header ficasse com a mesma altura que o maior dos dois headers, nesse caso com a mesma altura que o header1 (roxo) onde contem o logo. E queria também que o header2 (amarelo) ficasse no meio e a direita (o que ja esta) do header pai (vermelho). Se puderem me auxiliar a fazer esse dois eu agradeço.

3 - Por ultimo como eu usei porcentagem pra width e "em" para bordas, paddings e margins, o tamanho não fecha corretamente. Por exemplo no caso não sei quanto "1em" representa em porcentagem. No caso o header1 + o header2 + a borda do header2 deveriam ocupar a area de 100% do header pai. O porblema é que se eu definir por exemplo 56% para o header1 e 44% para o header dois, o header dois "escorrega" para baixo. E esse colocar 56% para o header1 e 43% para o header2 ficará um espaço entre os dois headers, o que não quero que aconteça.

Bom essas são minhas dúvidas. Sim são bem especificas e chatinhas resolver (pelo menos pra mim) mas é desta forma que estou aprendendo um pouco mais sobre css, se puderem me ajudar eu agradeço. Ah e porfavor peço que me falem caso não expliquei corretamente alguma coisa.

Atenciosamente;

Lucas.

Matias Rezende · Julho 2, 2009

Olha, não entendo muito de webstandards, mas vi uma coisa no seu layout... Se o usuário abrir o site com o navegador menor do que o maximizado, a imagem que tem no canto esquerdo vai passar por cima do resto do topo. Faça o teste. Vá diminuindo a largura da janela até perceber que isto ocorre.

Veja que o site que você usa como referência (maujor) tem algum tipo de min-width (não sei se existe), pois fazendo a mesma coisa com o dele você cria a barra de rolagem horizontal, que é melhor do que sua imagem destruindo seu layout

Espero ter ajudado

Carlos Eduardo

Thiago Retondar · Julho 2, 2009

Bem eu não entendi muito bem sua dúvida, mas vamos lá! :P

1 - Em relação ao box model ele está correto ou preciso arrumar algo? Eu utilizei como já disse porcentagem e "em", porém não sei se essa combinação é correta. Meu objetivo é fazer com que o site sofra o minino de distorções possivels ao mudar a resolução ou rolar o scrool. Principalmente não quero deixar que surjam barras verticais de rolagem, ou seja fazer um layout nos moldes do site do maujor que sofre pouquissimas ou nenhuma ateração quando é mudada a resolução ou usado o scrool. Se puderem me auxiliar nisso eu agradeço.

Bem... Bem... Eu não sei o resultado final que deseja, então eu não posso falar se está certo ou errado, mas ao meu ver está estranho, pois o "logo", que o roxo, está ultrapassando "topo", que é vermelho. Mas vamos analisar item-a-item.

div#header {
background-color:red;
margin:0 0.7em;
min-height:100px;
position:relative;
}

Para ficar tudo na mesma altura, poderia ter feito isso:

div#header {
background-color:red;
float:left;
height:auto;
margin:0 0.7em;
min-height:100px;
width:98%;
}

Não achei nenhum erro no #header1, apena um, que depois eu comento.

No parágrafo, dentrod e #header1, não precisa criar um class somente para alinhar. Poderia ter feito no CSS, por herança. Ficaria assim: #header #header1 p {}. Percebi que usou text-align para centralizar uma imagem. Mas a imagem não é um texto, então semanticamente é incorreto. Poderia ter definido uma largura à essa imagem e centraliza-la com margin: 0 auto.

No #header2, é a mesma especificação do #header1, somente um erro, que é o que eu vou falar agora:

Você utilizou position: relative em todos os elementos! O que pode te trazer muito erros postereiores. Também utilizou muito min-height|width, o que não funciona corretamente no Internet Explorer 6! Poderia ter usado, em muitos casos, height|width já que nunca vai mudar a altura|largura. ;)

2 - Bom, o que fiz foi determinar uma width para todo o site e centraliza-lo. Após isso quiz deixar uma margem entre o site e o header dele, para isso criei o header (vermelho, pai) e assim o header (vermelho) não permite que o header 1 ou header 2 "escorreguem" ao usar o scrool por exemplo. O que eu queria é que o header ficasse com a mesma altura que o maior dos dois headers, nesse caso com a mesma altura que o header1 (roxo) onde contem o logo. E queria também que o header2 (amarelo) ficasse no meio e a direita (o que ja esta) do header pai (vermelho). Se puderem me auxiliar a fazer esse dois eu agradeço.

Isso já foi respondido na pergunta anterior. :D De novo, o que pode estar te atrapalhando, é o uso excessivo de position: relative e seus subordinados. Há um tópico ativo aqui no fórum sobre position, de uma pesquisada. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

3 - Por ultimo como eu usei porcentagem pra width e "em" para bordas, paddings e margins, o tamanho não fecha corretamente. Por exemplo no caso não sei quanto "1em" representa em porcentagem. No caso o header1 + o header2 + a borda do header2 deveriam ocupar a area de 100% do header pai. O porblema é que se eu definir por exemplo 56% para o header1 e 44% para o header dois, o header dois "escorrega" para baixo. E esse colocar 56% para o header1 e 43% para o header2 ficará um espaço entre os dois headers, o que não quero que aconteça.

Nesse caso, em é uma unidade um pouco mais complexa de se trabalhar no início do estudos. Prefira utilizar pixels, px, caso contrário vai ter que ser no chutometro. ^_^

Se tiver algum dúvida, quando à minhas explicações, só falar. Talvez não fui tão claro...

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

Henrique Barcelos · Julho 2, 2009

Minha resolução é 1440x900 e o site ocupa boa área da tela...

O que eu costumo fazer com layouts liquidos e ter uma largura minima, definida com min-width e deixar as larguras em 100%...

Mas cuidado com isso... IE apresenta bugs... Por exemplo, nele, 33%+33%+34% = 101% (coisas que nem a microsoft entende...)

pslucasps · Julho 2, 2009

Primeiramente quero agradecer a todos pela paciencia e ajuda a mim dada.

@matias_rezende: Eu não tinha pensado nessa questão e agradeço por lembrar, tentarei utilizar a dica que você deu. Grato mais uma vez.

@Thiago Retondar: Sim apliquei tudo que você falou e ocorreu tudo perfeitamente. Penso que minha maior dificuldade em CSS é o box model. Ainda estou muito confuso com box model, usar position e tipos de unidades. Para esse site conseguirei desenvolver graças a sua ajuda mais sei que ainda não tenho conhecimento suficiente para conseguir desenvolver outros sites sozinhos entendendo perfeitamente todos atributos utilizados. Por isso estou dando uma lida nesse tópico e irei procurar aquele que você indicou. Meu principal objetivo é poder fazer um site que não sofra distorções mudando resolução ou rolando o scrool. Por isso vou ler mais antes de começar a desenvolver o site pois desse jeito não estou aprendendo e sim copiando as coisas que os outros me ensinam. Em suma muito obrigado por sua ajuda desde o inicio do tópico. Muito obrigado.

@Rick.hjpbarcelos: Obrigado vou tentar isso também ;D

Thiago Retondar · Julho 2, 2009

Bem, eu aprendo as coisas assim. Leio bastante teoria e depois pratico. Foi isso que eu fiz com XHTML e CSS, com ajuda disso:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Ótima Apostila de HTML 4.01 e XHTML 1.0.

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

pslucasps · Julho 4, 2009

Estou lendo as aposstilias e resolvi ir começando o site do zero porém usando pixels mesmo pelo mesmo por enquanto no começo de meu aprendizdo. Abaixao segue o link do mesmo, se puderem dar uma olhada e me dizer se estou mais ou menos no caminho ou o layout ainda está muito sem semantica. Agradeço a colaboração de quem quiser ajudar.

Link Aqui

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<?php 
		switch (@$_GET['pag'])
		{
		case 'home':
			$title='Home';
			$meta='Redes, Proteção, Sacadas, Telas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		case 'sacadas':
			$title='» Redes » Sacadas e Janelas';
			$meta='Redes, Proteção, Sacadas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		case 'quadras':
			$title='» Redes » Quadras Esportivas';
			$meta='Redes, Proteção, Quadras Esportivas, Quadras, Balneario Camboriu, Itajai, Santa Catarina, Protege';
			break;
		case 'construcao':
			$title='» Redes » Construção Cívil';
			$meta='Redes, Proteção, Construção, Cívil, Balneario Camboriu, Itajai, Santa Catarina, Protege';
			break;
		case 'piscinas':
			$title='» Redes » Piscinas';
			$meta='Redes, Proteção, Piscinas, Balneario Camboriu, Itajai, Santa Catarina, Protege';
			break;
		case 'mosqueteiras':
			$title='» Telas » Mosqueteiras';
			$meta='Proteção, Telas, Balneario Camboriu, Itajai, Santa Catarina, Mosqueteiras, Protege';
			break;
			case 'revisao':
			$title='» Revisão e Manutenção';
			$meta='Redes, Proteção, Revisões, Manutenções, Recolocações, Balneario Camboriu, Itajai, Santa Catarina, Protege';
			break;
		case 'fotos':
			$title='» Fotos';
			$meta='Redes, Telas, Proteção, Sacadas, Fotos, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		case 'orcamento':
			$title='» Contato » Orçamento Gratuito';
			$meta='Redes, Proteção, Sacadas, Orçamento, Telas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		case 'contato':
			$title='» Contato » Fale Conosco';
			$meta='Redes, Proteção, Sacadas, Contato, Telas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		case 'adm':
			$title='» Área Admnistrativa';
			$meta='Redes, Proteção, Sacadas, Telas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;			
		default:
			$title='';
			$meta='Redes, Proteção, Sacadas, Telas, Balneario Camboriu, Itajai, Santa Catarina, Janelas, Protege';
			break;
		}
	?>
	
	<title>Protege Redes & Telas</title>
	
	<!--Inicio Meta Tags e FavIcon-->
	<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
	<meta http-equiv='content-language' content='pt-br' />
	<meta name='description' content='Protege Redes & Telas de Proteção para sacadas e janelas, piscinas, quadras esportivas, telas mosqueteiras e outros. Revião de produos ja instalados. Balneário Camboriú-SC e região. Realize seu orçamento gratuito. 47 3361-9380 | 47 9942-3073 | 47 8454-3825.' />
	<meta name='keywords' content="<?php echo $meta; ?>" />
	<meta name='robots' content="<?php if (@$_GET['pag']=='adm') echo 'noindex,nofollow'; else echo 'index,follow'; ?>" />
	<meta name='author' content='Lucas Pereira da Silva' />
	<meta name='generator' content='NotePad++' />
	<!--<meta http-equiv='refresh' content='3;URL=http://www.site.com/index.php' />-->
	<link rel='shotcurt icon' href='favicon.ico' type='image/x-icon' />
	<!--Fim Meta Tags e FavIcon-->
	
	<!--Inicio CSS link-->
	<link href='ProtegeStyle.css' rel='stylesheet' type='text/css' media='all' />
	<link href='ProtegeStylePrint.css' rel='stylesheet' type='text/css' media='print' />
	<!--Fim CSS link-->

</head>

<body id="<?php if (@$_GET['pag']=='') { echo 'inicio'; }  else { echo $_GET['pag']; } ?>">
	
	<div id='geral'>
		<div id='header1'>
		</div><!--header-->
	
		<ul id='header2'>
			<li><a href='#'>Quem Somos e Onde Atuamos?</a></li>
			<li><a href='#'>Poliamida ou Polietileno? Qual Escolher?</a></li>
			<li><a href='#'>Rede certificada pela ISO-9002.</a></li>
			<li><a href='#'>04 Anos de Garantia.</a></li>
		</ul><!--header-->

		<div id='subheader'>
			<?php
			@$title2=$_GET['tit'];
				if (($title!='Home') && ($title2!=''))
				{
					echo '» Home '.$title.' » '.$title2; 
				}
				elseif ($title!='Home')
				{
					echo '» Home '.$title;
				}
				else
				{
					echo '» Home';
				}
			?>		
		</div><!--subheader-->
		
	<div id='tudo'>
		
		<ul id='menu'>
			<li class='strong'><a class='home' href='?pag=home'>Home</a></li>
			<li class='principal'>» Redes</li>
			<li><a class='sacadas' href='?pag=sacadas'>Sacadas e Janelas</a></li>
			<li><a class='quadras' href='?pag=quadras'>Quadras Esportivas</a></li>
			<li><a class='construcao' href='?pag=construcao'>Construção Cívil</a></li>
			<li><a class='piscinas' href='?pag=piscinas'>Piscinas</a></li>
			<li class='principal'>» Telas</li>
			<li><a class='mosqueteiras' href='?pag=mosqueteiras'>Mosqueteiras</a></li>
			<li class='strong'><a class='revisao' href='?pag=revisao'>Revisão e Manutenção</a></li>
			<li class='strong'><a class='fotos' href='?pag=fotos'>Fotos</a></li>
			<li class='principal' >» Contato</li>
			<li><a class='orcamento' href='?pag=orcamento'>Peça seu Orçamento</a></li>
			<li><a class='contato' href='?pag=contato'>Fale Conosco</a></li>
		</ul><!--menu-->
		
		<div id='conteudo'>
		<?php
			@$pag=$_GET['pag'];
			@$ref=$_GET['ref'];
			if ($pag=='')
			{
				include ('home.php');
			}
			elseif (($pag!='') && (file_exists($pag.'.php')) && ($pag!='adm'))
			{
				require ($pag.'.php');		
			}
			elseif (($pag!='') && ($pag=='adm') && (file_exists($pag.$ref.'.php')))
			{
				require ($pag.$ref.'.php');
			}
			else
			{
				echo "<img width='12%' id='erro' title='Erro' src='imagens/erro.png' alt='Erro!' />";
				echo "<p id='textoerro'>A página \"${pag}.php\" não foi encontrada. Pode haver um erro interno, por favor volte mais tarde.</p>";
			}
		?>
		</div><!--conteudo-->
		
		<div id='clear'>
		</div><!--clear-->	
	
	</div><!--tudo-->
		
		<div id='footer'>
			<p>
			Protege Redes & Telas 2009© - Todos direitos reservados protegeredesetelas.com.br | <a href='?pag=adm&ref=login&tit=Login'>Administração do Site</a>
			</p>
			<p>
			Balneário Camboriú e Região - SC | (47) 3361-9383 | (47) 8454-3825 | (47) 9942-3073 | <a href='?pag=programador&tit=Programador'>Desenvolvido por: Lucas Pereira</a>
			</p>
		</div><!--footer-->
		
	</div><!--geral-->

</body>
</html>

home.php

<h3>Home</h3>
	<p class='p1'>
	In nibhodio, porttitor vel, mattis vel, porttitor eget, orci. Duis consectetuer tempus enim. 
	Sed ut felis et tortor feugiat malesuada. Nam vulputate, tellus eu nonummy dapibus, pede risus 
	luctus dolor, ut nonummy urna felis a lacus. 
	</p>
	<p>
	<a href='#'>Nam in</a> dolor tincidunt ante vehicula dignissim. Nulla 
	id libero ut dui placerat semper. Nulla sit amet nibh at velit facilisis gravida. Phasellus in diam. 
	Pellentesque volutpat scelerisque dolor. Donec venenatis nulla suscipit nisl dignissim tristique. 
	Ut ut lorem sit amet purus ullamcorper mattis. Phasellus ornare ligula non orci. Pellentesque luctus 
	tristique orci. Proin a est. Nulla porta lacus ut leo. Nulla faucibus pede sit amet dui. Nullam aliquet 
	lorem at nunc. Nullam eu tellus.
	</p>
		<p>
	<a href='#'>Nam in</a> dolor tincidunt ante vehicula dignissim. Nulla 
	id libero ut dui placerat semper. Nulla sit amet nibh at velit facilisis gravida. Phasellus in diam. 
	Pellentesque volutpat scelerisque dolor. Donec venenatis nulla suscipit nisl dignissim tristique. 
	Ut ut lorem sit amet purus ullamcorper mattis. Phasellus ornare ligula non orci. Pellentesque luctus 
	tristique orci. Proin a est. Nulla porta lacus ut leo. Nulla faucibus pede sit amet dui. Nullam aliquet 
	lorem at nunc. Nullam eu tellus.
	</p>

ProtegeStyle.css

@charset "iso-8859-1";

*
{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}

* html #geral /*Hack para IE 6.0, rodapé no fundo da pagina*/
{
height:100%;
}

html, body
{
height:100%;
}

body
{
background-color:#E7E7E2;
margin:0;
padding:0;
}

/*Inicio Geral*/
div#geral
{
width:750px;
min-height:100%;
position:relative;
margin:0 auto;
text-align:left;
background-color:#FFF;
border-style:solid;
border-color:#CDC9C9;
border-width:0 2px;
padding:0 10px;
}
/*Fim Geral*/

/*Inicio Headers*/
div#header1
{
width:399px;
height:100px;
padding:5px;
float:left;
background:url(imagens/logo.gif);
background-repeat:no-repeat;
background-position:center center;
margin:5px 0;
}

ul#header2
{
width:340px;
height:80px;
margin:20px 0 20px 0;
background-color:#FFF;
float:right;
border-style:dashed;
border-color:#000;
border-width:0 0 0 1px;
}

ul#header2 li
{
line-height:20px;
list-style:none;
background-color:#FFF;
padding:0 0 0 20px;
font-weight:600;
font-size:13px;
}

ul#header2 li a
{
color:#8B8970;
text-decoration:none;
}

ul#header2 li a:hover
{
cursor:help;
color:#FFF;
background-color:#87CEFA;
padding:2px;
}
/*Fim Headers*/

/*Inicio SubHeader*/
div#subheader
{
width:726px;
background-color:#00B2EE;
color:#FFF;
padding:4px 4px 4px 20px;
clear:both;
}
/*Fim SubHeader*/

/*Inicio Menu*/
ul#menu
{
width:175px;
background-color:#FFF;
float:left;
margin:10px 0 0 0;
}

ul#menu li
{
font-size:13px;
border-color:#CDC9C9;
border-style:dashed;
border-width:0 0 1px 0;
list-style:none;
}

ul#menu li.principal
{
padding:6px 6px 6px 5px;
font-weight:600;
}

ul#menu li.strong
{
font-weight:600;
}

ul#menu li a, 
ul#menu li a.strong
{
padding:6px 6px 6px 15px;
text-decoration:none;
color:#000;
display:block;
}

ul#menu li a:hover
{
background-color:#C6E2FF;
}

#home #menu li a.home,
#sacadas #menu li a.sacadas,
#quadras #menu li a.quadras,
#construcao #menu li a.construcao,
#piscinas #menu li a.piscinas,
#mosqueteiras #menu li a.mosqueteiras,
#revisao #menu li a.revisao,
#fotos #menu li a.fotos,
#orcamento #menu li a.orcamento,
#contato #menu li a.contato
{
background-color:#C6E2FF;
}
/*Fim Menu*/

/*Inicio Conteudo*/
div#conteudo
{
width:555px;
background-color:#FFF;
float:right;
margin:10px 0 0 0;
padding:10px 0 0 10px;
}

div#conteudo h3
{
padding:0 0 0 220px;
border-style:dashed;
border-width:0 0 1px 0;
color:#00688B;
display:inline;
}

div#conteudo p
{
padding:0 0 10px 0;
text-indent:25px;
}

div#conteudo p.p1
{
padding:20px 0 10px 0; 
text-indent:25px;
}

div#conteudo a
{
color:#00B2EE;
font-weight:600;
padding:5px;
}

div#conteudo a:hover
{
color:#FFF;
font-weight:600;
background-color:#87CEFA;
text-decoration:none;
}
/*Fim Conteudo*/

/**/
div#tudo 
{
padding:0 0 60px 0;
background-color:F0F;
}

div#clear 
{
background-color:0F0;
clear:both;
}
/**/

/*Inicio Footer*/
div#footer
{
width:750px;
background-color:#00B2EE;
clear:both;
position:absolute;
bottom:0;
margin:0 0 5px 0;
padding:4px 0;
}

div#footer p
{
text-align:center;
color:#FFF;
font-size:13px;
}

div#footer a
{
color:#FFF;
text-decoration:none;
}

div#footer a:hover
{
text-decoration:underline;
}
/*Fim Footer*/

OBS: As páginas que contém formulario ainda não foram formatadas. Muito obrigado.

Thiago Retondar · Julho 5, 2009

Cara, melhorou muito! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Só acho que não precisava criar duas div para o header.

Podia criar uma que englobe tudo e colocar la a imagem e a lista. E no css você trabalha com as 'cascatas'.

Por exemplo:

#header img{}
 
E

#header ul{}

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

pslucasps · Julho 6, 2009

@Thiago Retondar: Então em relação ao header eu usei dois pois caso contrário acho que não conseguiria fazer aquela linha tracejada. Ou há uma maneira de fazer usando apenas um header?

Sem querer encomodar mas poderia me explicar melhor essa questão de trabalhar com cascatas ou dar um exemplo do que foi que eu errei. Pelo que eu entendi o qeu você quiz dizer é que o correto seria eu ter declarado:

#header2 ul

ao invés de:

ul#header2

certo? Bom, eu tentei fazer isso mas desta forma as regras CSS não eram aplicadas. Se puder dar uma explicaçã ou algum exemplo eu agradeço.

Thiago Retondar · Julho 6, 2009

[1] Da para fazer sim as linhas pontilhadas. Só usar a propriedade border junto ao padding para posicionar. http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://maujor.com/tutorial/bordertut.php

[2] Acho que me exŕessei mal. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Vamos lá:

Você poderia ter criado uma única div#header e dentro dela ter colocado o que queria, nesse caso ficaria assim:

<div id="header">
<img src="logotipo.jpg" alt="Logotipo da empresa" />
<ul>
<li><a href="link">Texto</a></li>
<li><a href="link">Texto</a></li>
<li><a href="link">Texto</a></li>
<li><a href="link">Texto</a></li>
<li><a href="link">Texto</a></li>
</ul>
</div>

No css você definiria a largura do #header e ao invés de criar um ID para aquela lista indefinida, trabalhar com ela no CSS. Assim:

#header{
width: BLÁpx;
height: BLÁpx;
float: left;
}
#header img{
float: left;
margin: BLÁpx BLÉpx BLÍpx BLÓpx;
}
#header ul{
float: right;
margin: BLÁpx BLÉpx BLÍpx BLÓpx;
border-left: 1px dashed black;
padding: 0 0 0 BLÁpx;
}

Onde você poderia ter criado muito bem uma ID para à ul e ter trabalhado com ela diretamente. Por exemplo se criasse <ul id="texto">, era só fazer assim:

#texto{
float: right;
margin: BLÁpx BLÉpx BLÍpx BLÓpx;
border-left: 1px dashed black;
padding: 0 0 0 BLÁpx;
}

Entendeu?

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

pslucasps · Julho 6, 2009

@Thiago Retondar: Sim entendi perfeitamente e já corrigi os erros. Novamente agradeço por sua colaboração desde o inicio deste topico. Abraço.

pslucasps · Julho 6, 2009

Desculpem postar aqui novamente mas é que tentei tentei e não consegui tirar a borda qeu aparece em imagens com links. Procurei inclusive nos tópicos do iMaster e segui a recomendação que é:

a img
{
background-color:transparent; /*Essa eu acrecentei pra ver se resolvia mas também não deu*/
text-decoration:none;
border-width:0;
border-color:transparent;
border-style:none;
}

Bom Aqui está o link para a página que contém a imagem. OBS: O a borda até some no estado normal, porém no estado hover ela aparece. OBS 2: A imagem em questão é o selo da W3C que se encontra no fim da página.

Aqui está o link para a folha de estilos. OBS: A parte que usei pra tentar corrigir este problema esá no final da página de estilos sendo o ultimo elemento.

OBS: Testei em: Firefox, Safari (Windowns), Opera, Chrome e IE e o problema ocorre em todos.

Agradeço quem puder me auxiliar neste caso.

Thiago Retondar · Julho 6, 2009

Use a extensão do Firefox, o Firebug e veja que a "borda" é do elementos A.

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

pslucasps · Julho 6, 2009

@Tiago Retondar: Grato, com sua ajuda e do firebug eu consegui resolver o porblema. Adicionei uma classe para o link da imagem em questão e assim retirei a borda.

Arquivado

[Resolvido] Como manter a proporção em um site

Recommended Posts

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

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