Problemas com Títulos

Lydia · Junho 30, 2010

Bom dia,

Fiz uma pesquisa no forum mas não encontrei nada que pudesse me ajudar.

Meu problema é o seguinte:

Estou estruturando um layout usando divs, e ao usar a Tag <h2> para títulos ela faz com que o layout fique desalinhado pois, como sabem o espaçamento entre linhas dos títulos é bem maior que os de parágrafos comuns.

Gostaria de saber se há alguma forma de diminuir o espaçamento dos títulos.

Obrigada.

Aprendiz CSS · Junho 30, 2010

Você poderia usar o CSS Reset

tem algum link para ver e ajudar melhor?

Lydia · Junho 30, 2010

Aqui a visualização de como quero que fique

Aqui a página que tenho agora

O problema é esse espaço abaixo dos titulos <h2>:: Contato</h2> e <h2>:: Atendimento</h2>

Qdo visualizo no Dreamweaver tá tudo certo, mas no navegador - tanto FF qto IE8 - criam um espaço.

Abaixo os Códigos:

HTML

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (template.psd) -->
<link rel="stylesheet" type="text/css" href="estilo.css">
<!-- End Save for Web Styles -->
</head>

<body>
<!-- Save for Web Slices (template.psd) -->
<div id="main">
	<div id="left-space">
	</div>
    
    <div id="column1">
      <div id="logo">
      </div>
      
      <div id="contato-title">
		<h2>:: Contato<br>
		</h2>
      </div> 
     
      <div id="contato-form">
     
      </div>
     
      <div id="atendimento-title">
        <h2>:: Atendimento</h2>
      </div>
     
      <div id="atendimento-button">
	  </div>
      
	  <div id="footer-email">
		 contato@starvideoararaquara.com.br
	  </div>
    </div>
      
    <div id="column2">
      <div id="top-space">
      </div>
      
      <div id="banner">
      </div>
      
      <div id="menu">
      </div>
      
      <div id="content">
      </div>
      
      <div id="footer-endereco">
      </div>
      
      <div id="footer-creditos">
      </div>
      
      <div id="footer-validacao">
      </div>
    </div>
    
    <div id="right-space">
	</div>
    
    <div id="bottom-space">
    </div>
 
</div>
<!-- End Save for Web Slices -->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#113f69;
	margin:0;
	}

h3{
	}

h4{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	font-weight:bold;
	color:#434343;
	margin:0;	
	}

body {
	background-color:#fff;
/*    background-color:#e7e7e7;*/
	margin:0;
	padding:0 auto;
	text-align:center;
	}
	
#main {
	width:1024px;
	height:768px;
	margin:0 auto;
	padding:0;	
	}

#left-space {
	width:114px;
	height:696px;
	float:left;
	background-image:url(images/left_space.jpg);
	}
/*================== COLUNA 1 ===================*/	
#column1{
	width:238px;
	height:696px;
	float:left;
	}
	
#logo {
	width:238px;
	height:203px;
	background-image:url(images/logo.jpg);
	}
	
#contato-title {
	text-align:right;
	width:238px;
	height:47px;
	margin:0px;
	padding:22px 10px 0 0;
	background-image:url(images/contato_title.jpg);
	}
	
#contato-form {
	width:238px;
	height:335px;
	margin:0;
	padding:0px;
	background-image:url(images/contato_form.jpg);
	}
	
#atendimento-title {
	text-align:right;
	width:238px;
	height:39px;
	margin:0;
	padding:15px 10px 0 0;
	background-image:url(images/atendimento_title.jpg);
	}

#atendimento-button {
	width:238px;
	height:40px;
	background-image:url(images/atendimento_button.jpg);
	}

#footer-email {
	width:238px;
	height:32px;
	background-image:url(images/footer_email.jpg);
	}
/*================== COLUNA 1 ===================*/	



/*================== COLUNA 2 ===================*/	
#column2{
	width:555px;
	height:696px;
	float:left;
	}

#top-space {
	width:555px;
	height:12px;
	padding:0;
	background-image:url(images/top_space.jpg);
	}

#banner {
	width:555px;
	height:163px;
	background-image:url(images/banner.jpg);}
	
#menu {
	width:555px;
	height:28px;
	background-image:url(images/menu.jpg);
	}	
	
#content {
	width:555px;
	height:433px;
	background-image:url(images/content.jpg);
	}	
	
#footer-endereco {
	width:555px;
	height:28px;
	background-image:url(images/footer_endereco.jpg);
	}
	
#footer-creditos {
	width:475px;
	height:32px;
	float:left;
	background-image:url(images/footer_creditos.jpg);
	}

#footer-validacao {
	width:80px;
	height:32px;
	float:right;
	background-image:url(images/footer_validacao.jpg);
	}
/*================== COLUNA 2 ===================*/	



#right-space {
	width:117px;
	height:696px;
	float:left;
	background-image:url(images/right_space.jpg);
	}	
	
#bottom-space {
	width:1024px;
	height:72px;
	clear:both;
	background-image:url(images/bottom_space.jpg);
	}

Aprendiz CSS · Junho 30, 2010

pesquise por CSS Reset!

mas pelo que vi o problema está na div que engloba o h2 :/

e pelo que vi alguns estilos são iguais, se forem mesmo, utilize classes para facilitar a manutenção e a legibilidade do código

[]s

Lydia · Junho 30, 2010

Seguindo sua dica encontrei esse artigo sobre o assunto.

No IE funciona perfeitamente, inclusive em um problema de alinhamento em outra parte do layout que foi quase resolvido (ainda ficou uma linha na parte de baixo):

Clique aqui

Já no firefox não aparece a linha que aparece no IE porém, o espaçamento da H2 ainda não tá legal:

Clique aqui

GabrielFerrari · Junho 30, 2010

Quanto a linha branca que aparece basta colocar 1 cm a mais nos divs left-space, atendimento-button e right-space

O espaçamento está nas divs contato-title e atendimento-title e não na tag <h2>

altere a altura deles de 47px para 25px

Testa ae

qualquer coisa torne a postar.

Lydia · Junho 30, 2010

Quanto a linha branca que aparece basta colocar 1 cm a mais nos divs left-space, atendimento-button e right-space

O espaçamento está nas divs contato-title e atendimento-title e não na tag <h2>

altere a altura deles de 47px para 25px

Testa ae

qualquer coisa torne a postar.

Oi amigo, obrigado pela ajuda mas resolvi refatiar o site pra ver se faço um css menos complicado, ou seja, recomecei do zero.

Se eu precisar de ajuda volta a postar aqui.

Obrigada por enquanto ;)

Aprendiz CSS · Junho 30, 2010

Aproveite e faça o que falei, os estilos que forem semelhantes crei uma classe.

antes de começar leia algum artigo sobre box model

abraço

Evandro Oliveira · Julho 1, 2010

Enquanto refaz o lay-out, uma dica:

Esqueça o visualizador do Dreamweaver. Sem querer parecer grosseiro mas, ninguém navega no seu site utilizando Dreamweaver. ;)

Lydia · Julho 1, 2010

Enquanto refaz o lay-out, uma dica:

Esqueça o visualizador do Dreamweaver. Sem querer parecer grosseiro mas, ninguém navega no seu site utilizando Dreamweaver. ;)

Ah, pode crer!

estou levando isso em consideração ;)

GabrielFerrari · Julho 1, 2010

Enquanto refaz o lay-out, uma dica:

Esqueça o visualizador do Dreamweaver. Sem querer parecer grosseiro mas, ninguém navega no seu site utilizando Dreamweaver. ;)

É trabalhoso mas é bom ter os principais navegadores usados para testar

e para o caso do IE que tem diversas versões ainda em uso eu aconselho usar o IETester -> http://www.my-debugbar.com/wiki/IETester/HomePage

:)

Aprendiz CSS · Julho 1, 2010

Lydia

é quase certo que você terá mais beneficios do que prejuizo em reconstruir e não utilizar o visual do dreamweaver.

parabéns por ter aceitado as sugestões e tomado a iniciativa :)

Lydia · Julho 1, 2010

Seguindo a dica do Aprendiz CSS, dei uma pesquisada sobre box model :Tutorial.

Depois deste tutorial, minha vida nunca mais foi a mesma! kkkkkk

Uma coisa que deu pra perceber é que é bem mais fácil estruturar o layout posicionando os elementos de dentro pra fora, se é que me entendem.

Ainda estou tentando aperfeiçoar o uso de Classes no CSS. Não sei pq, mas tenho uma certa dificuldade de estruturar o documento CSS usando classes.

Deve ser falta de costume rsrs...

Bom, segue abaixo o link para o site (falta só o conteúdo)

www.starvideoararaquara.com.br/new/

e abaixo o CSS:

@charset "utf-8";/* CSS Document */h1{	font-size:18px;	font-weight:bold;	color:#113f69;	text-align:right;	margin:0px;	padding:15px;	}h4{	font-size:09px;	font-weight:bold;	color:#113f69;	text-align:right;	margin:0px;	padding:10px 20px 0 0;	}p.endereco{	font-size:9px;	font-weight:bold;	color:#113f69;	text-align:center;	line-height:14px;	}	p.creditos{	font-size:9px;	color:#fff;	text-align:center;	line-height:22px;	}	p.creditos a{	font-weight:bold;	color:#fff;	}	p.creditos a:hover{	color:#287ec1;	}	form{	font-size:11px;	font-weight:bold;	color:#113f69;	text-align:right;	padding:10px 18px 0 10px;	}input.texto, input.button, textarea{	font-size:11px;	font-weight:100;	margin-top:02px;	}	input.texto{	height:20px;	width:190px;	}	textarea{	width:190px;	height:105px;		}	input.button{		color:#fff;	width:60px;	height:25px;	border-style:solid;	background-color:#113f69;	}ul{	text-align:left;	margin:0;	padding:06px 0 04px 0;	}		li{	display:inline;	margin:0 20px;	}	li a{		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	font-size:14px;	font-weight:bold;	color:#fff;	}	li a:hover{		color:#113f69;	}		body {	font-family:Verdana, Geneva, sans-serif;	background-color:#e7e7e7;	margin:0 auto;	text-align:center;	}.float_left{	float:left;	}#main {	width:1024px;	height:696px;	margin:0 auto;	}#left-space {	width:114px;	height:696px;	background-image:url(../images/left_space.jpg);	}		/*==================== COLUNA 1 ========================*/	#column1{	width:238px;	height:696px;	}#logo {	height:202px;	background-image:url(../images/logo.jpg);	}#contato {	height:379px;	background-image:url(../images/contato.jpg);	}	#atendimento {	height:83px;	padding-left:22px;	background-image:url(../images/atendimento.jpg);	}	#email {	height:32px;	background-image:url(../images/email.jpg);	}	/*==================== COLUNA 1 ========================*/	/*==================== COLUNA 2 ========================*/	#column2{	width:555px;	height:696px;	}	#header {	height:175px;	background-image:url(../images/header.jpg);	}#menu {	height:28px;	background-image:url(../images/menu.jpg);	}#content {	width:555px;	height:433px;	background-image:url(../images/content.jpg);	}#footer {	height:60px;	background-image:url(../images/footer.jpg);	}/*==================== COLUNA 2 ========================*/	#right-space {	width:117px;	height:696px;	background-image:url(../images/right_space.jpg);	}	/*======================= HOME =======================*/	#home01{	height:46px;	background-image:url(../images/home/01.jpg);	}	#home02{	height:142px;	background-image:url(../images/home/02.jpg);	}	#home03{	height:53px;		background-image:url(../images/home/03.jpg);	}	#home04{	width:278px;	height:142px;		background-image:url(../images/home/04.jpg);	}	#home05{	width:277px;	height:142px;		background-image:url(../images/home/05.jpg);	}	#home06{	height:50px;	background-image:url(../images/home/06.jpg);	}	/*======================= HOME =======================*//*======================= PAGES =======================*/	#pages01{	height:46px;	background-image:url(../images/pages/01.jpg);	}	#pages02{	height:356px;	background-image:url(../images/pages/02.jpg);	}	#pages03{	height:31px;		background-image:url(../images/pages/03.jpg);	}	/*======================= PAGES =======================*/

Estou aberta dicas para otimização do CSS se alguem tiver sujestões...

Mtu obriaga pela ajuda pessoal.

Evandro Oliveira · Julho 1, 2010

@Lydia, antes de brincarmos com as CSS ainda preciso fazer algumas sugestões quanto à marcação:

Você está - teoricamente - com dois documentos dentro de um só:

div>
      
        <div id="content">
          <html>
<head>
  <title>Home</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  
  <style type="text/css" media="all">  @import url(css/reset.css);  @import "css/generic.css";  </style>
  <style type="text/css" media="print"> @import url(css/print.css) print; </style>
  <!--[if IE]><style type="text/css" media="all"> @import url(css/ie.css); </style><![endif]-->
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>

<body>
<div id="content">
	<div id="home01">
    </div>

Vamos começar validando a marcação, ok?

Depois disso, já vou adiantar que, como você já deve ter visto sobre box model, alguns elementos dispensarão o uso de <div> como por exemplo aqui:

<div id="email">
          <h4>contato@starvideoararaquara.com.br</h4>
        </div>

Sempre que tiver alguma dúvida sobre o display natural de um elemento, recorra às referências.

GabrielFerrari · Julho 1, 2010

insira um doctype

esse tutorial vai te dar uma noção se quiser saber mais afundo de uma pesquisada na internet

que irá encontra bons conteúdos

Aprendiz CSS · Julho 1, 2010

Ola

nesse seu layout, o correto seria

#coluna1 { float: left; }
#coluna2 { float: right; }
#rodape { clear: both; }

ai você trabalha com os tamanhos, não é muito correto você escrever float: left e float: left; para ficar ao lado um do outro

http://aprendacss.wordpress.com/2008/06/23/layout-duas-colunas/

abraço

Lydia · Julho 2, 2010

Ola

nesse seu layout, o correto seria
#coluna1 { float: left; }
#coluna2 { float: right; }
#rodape { clear: both; } 
ai você trabalha com os tamanhos, não é muito correto você escrever float: left e float: left; para ficar ao lado um do outro

http://aprendacss.wordpress.com/2008/06/23/layout-duas-colunas/

abraço

Então, para issu eu teria que recomeçar do zero mais uma vez.

Dei uma olhada nos erros apontados pelo validador, acho q estou quase lá..rs

Falta ainda resolver um problema de espaçamento das páginas que abrem por include ao clicar nos links do menu. Ta dando diferença do FF pro IE.

Clique aqui

Evandro Oliveira · Julho 2, 2010

Boa parte dos avisos desaparecerá se você trocar os "&" nos seus links por "&"

Lydia · Julho 2, 2010

Boa parte dos avisos desaparecerá se você trocar os "&" nos seus links por "&"

Essa não entendi :huh:

Se for á respeito dos links do menu, estou usando pra dar 2 espaços entre os caracteres. Só isso

Evandro Oliveira · Julho 2, 2010

Antes

<a href="google.com?var1=teste&var2=testeb">Clique</a>

<a href="google.com?var1=teste&var2=testeb">Clique</a>

Arquivado

Problemas com Títulos

Recommended Posts

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lydia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331