[Resolvido] Diagramação

AAninh@ · Maio 21, 2009

Boa Noite,

Diagramação do Site: www.marketingpolis.com.br/V2/

O meu site não está diagramado da mesma forma no internet explorer e no mozila, a forma como está no internet explorer está certa. Como posso fazer para que fique arrumada nos dois?

Problemas:

- Tanto no Mozila quanto no Internet está aparecendo uma linha cinza acima da publicidade do rodape, como remove-la, já que no Dreamweaver ela não aparece?

- No Mozila onde se cadastra para receber as dicas, abaixo do Nome também aparece uma linha cinza só que ela também não está no Dreamweaver.

- A linha cinza que envolve desde o menu principal ate o Ver mais, como podem ver no Mozila ela está além da publicidade do topo, tenho de alinha-la junto com a publicidade.

Como arrumar já que no Internet explorer está normal e no mozila está todo sem diagramação?

alebae · Maio 25, 2009

Olá, você poderia postar o código para darmos uma olhada?

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

Giovani · Maio 26, 2009

AAninh@, seu site foi desenvolvido em com tabelas, esse é o principal motivo pelos erros que estão acontecendo.

Para desenvolver um site corretamente, estude sbre as CSS.

E sobre o DW, é uma bela ferramenta, mas utilize apenas o modo code. Visualizar o site é no navegador.

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

Morpheus#2005 · Maio 27, 2009

AAninh@, é alinha grossa da borda da Publicidade no TOPO ??

AAninh@ · Maio 28, 2009

AAninh@, é alinha grossa da borda da Publicidade no TOPO ??

Não... É na publicidade abaixo de tudo, onde está aparecendo duas publicidades ao invés de uma, viu? então acima dela tem uma linha cinza que vai desde o começo da publicidade ate o fim da página. Eu não quero essa linha ai como tirar já que ela não está no meu projeto Dreamweaver?

Outra linha que está ficando e não pode (aparece só no navegador Mozila Firefox) e abaixo de onde se inseri o nome para receber dicas de marketing... Ela também não está aparecendo no Dreamweaver.

hinom · Maio 29, 2009

print+screen em duplo display

display esquerdo: IE8

display direito: FF 3.1

Imagem Postada

Demarquei com setas vermelhas as linhas cinzas as quais a Ana se refere.

Em adição uma seta vermelha no topo, indicando "falha" apresentada em ambos os navegadores.

hinom · Maio 29, 2009

sugestões:

Linha cinza do quadro "PUBLICIDADE" no rodapé

no arquivo, "http://www.marketingpolis.com.br/V2/css/marketingpolis.css"

existe a seguinte declaração

#publicidade_rodape { 
	border-top:1px solid #CCCCCC; 
	padding-bottom:50px; 
	width:100%; 
	background-color:#FFFFFF; 
	background-image:url(../img/tpl_bg_rodape.gif); 
	background-repeat:repeat-x; 
	background-position:bottom; 
	font-size:10px;
	font-family:verdana;
	color:#999999;
}

defina a border-top: 0px

exemplo

border-top:0px solid #CCCCCC;

1px é a expessura da linha

solid é o tipo do tracejado

#CCCCCC é o código para a cor cinza.

Linha cinza entre o Nome e o Email

Provável causa:

No arquivo, "http://www.marketingpolis.com.br/V2/css/marketingpolis.css"

existe a seguinte declaração

#dicas input { 
	border:1px solid #CCCCCC; 
	background-color:#EEEEEE; 
	font-family:verdana; 
	font-size:11px; 
	color:#333333; 
	display:block;
	font-size:10px;
	margin-bottom:8px;
}

O CSS está correto,

porém, no HTML, apresenta um código arbitrário

<strong>
					<input type="hidden" name="MM_insert" value="form2" />
				  </strong>

Está aplicando negrito num elemento oculto do objeto <form>

O browser Internet Explorer ignora a ambiguidade dando priodidade à precedência oculta do elemento, por isso, a linha não é impressa na tela.

O Firefox interpreta de forma literal (para o caso específico), por isso, apesar de ser um elemento invisível, houve um "bug", no qual resultou em imprimir as bordas do elemento.

Parece ser uma borda de dupla expessura, mas se reparar, um elemento <input> do objeto <form>, possui a borda do topo e de baixo. Como o elemento é oculto, logo estará vazio, fazendo que com as bordas se unam, parecendo ser um só. Mas na verade são duas.

possível resolução:

remova a tag strong

está assim

<strong>
					<input type="hidden" name="MM_insert" value="form2" />
				  </strong>

deixe assim

<input type="hidden" name="MM_insert" value="form2" />

outras observações relevantes

1. código html está sujo e muito bagunçado

alguns exemplos

Elementos ocultos declarados em "espaço imprimível".

Sempre que precisar de elementos ocultos, posicione-os em locais neutros dentro da sintaxe HTML

Exemplo de espaço neutro

</td>

<td>

para o seu caso em específico, ficaria assim (exemplo usando trecho do código da página do seu site):

</td>
			  <!-- FORMULARIO DE ENVIO DE DICA DE MARKETING -->
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
<input type="hidden" name="MM_insert" value="form2" />
		  <td width="185" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />

A tag <form> e os "inputs" ocultos (type=hidden) dentro de um espaço neutro

Isso assegura de que esses elementos não interferirão no visual.

Cabeçalho

existe uma chamada para um arquivo CSS inexistente. Na verdade o path informado é um diretório, também inexistente

http://www.marketingpolis.com.br/V2/css/estilos.css"]http://www.marketingpolis.com.br/V2/menu/css

entretanto possui um erro de sintaxe html

<link href=''menu/css" rel="stylesheet" type="text/css" />

no trecho em negrito

inicia-se com duas "single quotes" e termina com uma "double quote"

correção:

remova essa linha, pois não serve para nada , alem de poder causar algum conflito

Um pouco mais acima existe outra declaração para um arquivo CSS.

http://www.marketingpolis.com.br/V2/css/estilos.css

a sintaxe apresenta o mesmo erro mencionado anteriormente, referente à single quote e double quote.

se não estiver usando nenhuma das propriedades do css estilos.css, remova-o do código html.

existem diversos outros erros, mas esses são os mais graves.

AAninh@ · Maio 29, 2009

sugestões:

Linha cinza do quadro "PUBLICIDADE" no rodapé

no arquivo, "http://www.marketingpolis.com.br/V2/css/marketingpolis.css"

existe a seguinte declaração
#publicidade_rodape { 
	border-top:1px solid #CCCCCC; 
	padding-bottom:50px; 
	width:100%; 
	background-color:#FFFFFF; 
	background-image:url(../img/tpl_bg_rodape.gif); 
	background-repeat:repeat-x; 
	background-position:bottom; 
	font-size:10px;
	font-family:verdana;
	color:#999999;
}
defina a border-top: 0px

exemplo

border-top:0px solid #CCCCCC;

1px é a expessura da linha

solid é o tipo do tracejado

#CCCCCC é o código para a cor cinza.

Linha cinza entre o Nome e o Email

Provável causa:

No arquivo, "http://www.marketingpolis.com.br/V2/css/marketingpolis.css"

existe a seguinte declaração
#dicas input { 
	border:1px solid #CCCCCC; 
	background-color:#EEEEEE; 
	font-family:verdana; 
	font-size:11px; 
	color:#333333; 
	display:block;
	font-size:10px;
	margin-bottom:8px;
}
O CSS está correto,

porém, no HTML, apresenta um código arbitrário
<strong>
					<input type="hidden" name="MM_insert" value="form2" />
				  </strong>
Está aplicando negrito num elemento oculto do objeto <form>

O browser Internet Explorer ignora a ambiguidade dando priodidade à precedência oculta do elemento, por isso, a linha não é impressa na tela.

O Firefox interpreta de forma literal (para o caso específico), por isso, apesar de ser um elemento invisível, houve um "bug", no qual resultou em imprimir as bordas do elemento.

Parece ser uma borda de dupla expessura, mas se reparar, um elemento <input> do objeto <form>, possui a borda do topo e de baixo. Como o elemento é oculto, logo estará vazio, fazendo que com as bordas se unam, parecendo ser um só. Mas na verade são duas.

possível resolução:

remova a tag strong

está assim
<strong>
					<input type="hidden" name="MM_insert" value="form2" />
				  </strong>
deixe assim
<input type="hidden" name="MM_insert" value="form2" />
outras observações relevantes

1. código html está sujo e muito bagunçado

alguns exemplos

Elementos ocultos declarados em "espaço imprimível".

Sempre que precisar de elementos ocultos, posicione-os em locais neutros dentro da sintaxe HTML

Exemplo de espaço neutro

</td>



<td>

para o seu caso em específico, ficaria assim (exemplo usando trecho do código da página do seu site):
</td>
			  
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
<input type="hidden" name="MM_insert" value="form2" />
		  <td width="185" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />
A tag <form> e os "inputs" ocultos (type=hidden) dentro de um espaço neutro

Isso assegura de que esses elementos não interferirão no visual.

Cabeçalho

existe uma chamada para um arquivo CSS inexistente. Na verdade o path informado é um diretório, também inexistente

http://www.marketingpolis.com.br/V2/css/estilos.css"]http://www.marketingpolis.com.br/V2/menu/css

entretanto possui um erro de sintaxe html

<link href=''menu/css" rel="stylesheet" type="text/css" />

no trecho em negrito

inicia-se com duas "single quotes" e termina com uma "double quote"

correção:

remova essa linha, pois não serve para nada , alem de poder causar algum conflito

Um pouco mais acima existe outra declaração para um arquivo CSS.

http://www.marketingpolis.com.br/V2/css/estilos.css

a sintaxe apresenta o mesmo erro mencionado anteriormente, referente à single quote e double quote.

se não estiver usando nenhuma das propriedades do css estilos.css, remova-o do código html.

existem diversos outros erros, mas esses são os mais graves.

A linha cinza entre o Nome e o E-mail não deu para tirar, tem outra solução?

Tem como eu colocar nesse espaço que está sobrando uma publicidade, já que no meu projeto Dreamweaver fica uma linha vermelha cercando todo o espaço? Veja abaixo, por favor:

Imagem Postada

Obrigada

hinom · Maio 29, 2009

além das sugestões

corrija os outros erros pois são graves e podem também influenciar nos erros em questão

recapitulando:

1. elementos ocultos

disponha os elementos ocultos dentro de espaços nulos da impressão

trecho do seu script ogirinal, referente ao campo Nome e Email

</noscript>		  </td>
		  <td width="230" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />
			  <!-- FORMULARIO DE ENVIO DE DICA DE MARKETING -->
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
				<p align="left">
									Nome:<br />
				  <input name="nome" type="text" id="nome" />
				  <input type="hidden" name="MM_insert" value="form2" />
				  <input name="email" type="text" id="email" />
				  <input type="image" name="cadastrar"  src="img/cadastrar.jpg" value="Cadastrar" />
				  <!-- FIM FORMULARIO DE ENVIO DE DICA DE MARKETING -->
				</p>
		  </form></td>

sugestão de correção

</noscript>		  </td>

<input type="hidden" name="MM_insert" value="form2" />
			  <!-- FORMULARIO DE ENVIO DE DICA DE MARKETING -->
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
		  <td width="230" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />
				<p align="left">
									Nome:<br />
				  <input name="nome" type="text" id="nome" />
				  <br>
				  <input name="email" type="text" id="email" />
				  <input type="image" name="cadastrar"  src="img/cadastrar.jpg" value="Cadastrar" />
				  
				</p>
		  </td>
</form>
<!-- FIM FORMULARIO DE ENVIO DE DICA DE MARKETING -->

2. erros graves de sintaxe

trecho original do seu código

<head><href=''css/estilos.css" rel="stylesheet" type="text/css" /><script src="js/AC_RunActiveContent.js" language="javascript">

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

<title>Marketing Pólis</title>

<link href=''menu/css" rel="stylesheet" type="text/css" />

<script language="javascript">AC_FL_RunContent = 0;</script>

Corrija as sintaxes ou remova os links denecessários, pois, de qualquer forma não estão sendo usados.

sugestão, remover:

<head><script src="js/AC_RunActiveContent.js" language="javascript">

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

<title>Marketing Pólis</title>

<script language="javascript">AC_FL_RunContent = 0;</script>

3. HTML entities

Evite uso de HTML Entities para essa finalidade

<title>Marketing Pólis</title>

Mecanismos de busca por exemplo, não indexarão o conteúdo corretamente.

A palavra "Marketing Pólis" não será vinculada ao site, mas sim a palavra "Marketing Pólis".

outros exemplos dentro do código:

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Nacional </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política econômica </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Municipal </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Internacional </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Dicas de Marketing Político </a></td>

4. conflito entre layout e resolução do monitor

Altere as configurações da sua placa de video para que exiba uma configuração acima da atual.

Veja como o layout do site se comporta entre as diversas configurações de resolução de vídeo.

em resolução:

1680X1050

Imagem Postada

para resolver de forma simples e rápida, no seu caso,

alinhe o layout à esquerda.

5. adicionar banner

conforme descrito no post 8

Imagem Postada

basta adicionar a imagem logo abaixo do campo "Email", mais especificamente após a tag que carrega a imagem "Cadastrar"

<br>
<a href="#"><img src="imagem.do.banner.jpg" border="0" class="BannerRight"></a>

no CSS adicione:

img.BannerRight { 
	border:1px solid #FF0000;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
}

AAninh@ · Maio 30, 2009

além das sugestões

corrija os outros erros pois são graves e podem também influenciar nos erros em questão

recapitulando:

1. elementos ocultos

disponha os elementos ocultos dentro de espaços nulos da impressão

trecho do seu script ogirinal, referente ao campo Nome e Email
</noscript>		  </td>
		  <td width="230" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />
			  
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
				<p align="left">
									Nome:<br />
				  <input name="nome" type="text" id="nome" />
				  <input type="hidden" name="MM_insert" value="form2" />
				  <input name="email" type="text" id="email" />
				  <input type="image" name="cadastrar"  src="img/cadastrar.jpg" value="Cadastrar" />
				  
				</p>
		  </form></td>
sugestão de correção
</noscript>		  </td>

<input type="hidden" name="MM_insert" value="form2" />
			  
			  <form id="form2" name="form2" method="post" action="/V2/index.php?">
		  <td width="230" id="dicas" valing="top"><a href="#" target="_self" title="Receber Dicas de Marketing"><img src="img/tpl_dicas.gif" valign="top" /></a> <br />
				<p align="left">
									Nome:<br />
				  <input name="nome" type="text" id="nome" />
				  <br>
				  <input name="email" type="text" id="email" />
				  <input type="image" name="cadastrar"  src="img/cadastrar.jpg" value="Cadastrar" />
				  
				</p>
		  </td>
</form>

2. erros graves de sintaxe

trecho original do seu código

<head><href=''css/estilos.css" rel="stylesheet" type="text/css" /><script src="js/AC_RunActiveContent.js" language="javascript">

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

<title>Marketing Pólis</title>

<link href=''menu/css" rel="stylesheet" type="text/css" />

<script language="javascript">AC_FL_RunContent = 0;</script>

Corrija as sintaxes ou remova os links denecessários, pois, de qualquer forma não estão sendo usados.

sugestão, remover:

<head><script src="js/AC_RunActiveContent.js" language="javascript">

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

<title>Marketing Pólis</title>

<script language="javascript">AC_FL_RunContent = 0;</script>

3. HTML entities

Evite uso de HTML Entities para essa finalidade

<title>Marketing Pólis</title>

Mecanismos de busca por exemplo, não indexarão o conteúdo corretamente.

A palavra "Marketing Pólis" não será vinculada ao site, mas sim a palavra "Marketing Pólis".

outros exemplos dentro do código:

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Nacional </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política econômica </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Municipal </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Política Internacional </a></td>

<td width="160" class="titulo_materia"><a href="#" target="_self" class="titulo_materia_texto">Dicas de Marketing Político </a></td>

4. conflito entre layout e resolução do monitor

Altere as configurações da sua placa de video para que exiba uma configuração acima da atual.

Veja como o layout do site se comporta entre as diversas configurações de resolução de vídeo.

em resolução:

1680X1050

para resolver de forma simples e rápida, no seu caso,

alinhe o layout à esquerda.

5. adicionar banner

conforme descrito no post 8

basta adicionar a imagem logo abaixo do campo "Email", mais especificamente após a tag que carrega a imagem "Cadastrar"
<br>
<a href="#"><img src="imagem.do.banner.jpg" border="0" class="BannerRight"></a>
no CSS adicione:
img.BannerRight { 
	border:1px solid #FF0000;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
}

--------------------------------------------------------------------------------------------------------------------------------------------

No Mozila Firefox as imagens do meu menu não estão aparecendo, mas no IE sim. Acho que a causa dele não está aparecendo pode ser a do Item 2 que você me falou. Eu tirei tudo em negrito que você falou, porém acho que não posso tirar a linha:

Já que ela e responsável pelo estilo do meu menu. O que você acha?

No item 3. HTML entities

<title>Marketing Pólis</title>

O que tenho de fazer para que o conteudo sejá indexado pelos mecanismos de busca? Tenho que tirar os acentos, há outra alternativa?

No item 5. adicione um banner swf direto do dreamweaver por isso não inseri o codigo, isso pode me ocasionar um problema futuro? No Mozila Firefor está ficando um quadrado vermelho logo abaixo do banner, como tirar?

O sub-menu Dicas e Serviços está ficando por baixo do banner como resolver?

Obrigada

hinom · Maio 30, 2009

Uma série de novos problemas surgirão se os problemas pendentes nao forem corrigidos

Utilize o Dreamweaver se possuir pleno dominio sobre html, css.

As outras questões fogem do escopo do tópico, por isso, abra um novo tópico para cada questão distinta ou faça uma busca pelo forum, pois a maioria das dúvidas são comuns e possuem topicos resolvidos.

<link href=''menu/css" rel="stylesheet" type="text/css" />

Comentei 2 vezes para remover esses códigos pois não servem para nada além de poder causar conflito.

Nesse código, que supostamente seria o CSS do menu, há 2 erros graves, já mencionados anteriormente, portanto, não há como estar sendo utilizado.

<link href=''menu/css" rel="stylesheet" type="text/css" />

''menu/css" http://forum.imasters.com.br/public/style_emoticons/default/seta.gif inicia com duas single quotes (duas aspas simples) e termina com 1 double quote (aspa dupla)

ou usa single quote ou usa double quote.

para resolver com double quote

<link href="menu/css" rel="stylesheet" type="text/css" />

para resolver com single quote

<link href='menu/css' rel="stylesheet" type="text/css" />

entretanto, ainda há outro erro

<link href='menu/css' rel="stylesheet" type="text/css" />

o caminho apontado não é um arquivo válido

"menu/css"

http://www.marketingpolis.com.br/V2/menu/css

portanto, além da sintaxe estar errada, o arquivo declarado é inexistente

uma linha antes de iniciar o corpo (<body>)

</head>
<link href='css/estilos.css'" rel="stylesheet" type="text/css" />
<body>

provavelmente esse é o arquivo com os estilos css que está sendo usado para o menu.

contudo, corrija a sintaxe pois existe erro no uso das "quotes" (aspas)

<link href='css/estilos.css'"

remova essa aspa dupla no final

adote um padrão único e preste atenção nas alterações que faz no código

correção

<link href="css/estilos.css" rel="stylesheet" type="text/css" />

AAninh@ · Junho 2, 2009

Como centralizar a publicidade do topo?

Abraços

hinom · Junho 6, 2009

As outras questões fogem do escopo do tópico, por isso, abra um novo tópico para cada questão distinta ou faça uma busca pelo forum, pois a maioria das dúvidas são comuns e possuem topicos resolvidos

Como centralizar a publicidade do topo ?

consulte o forum CSS / HTML

AAninh@ · Junho 6, 2009

As outras questões fogem do escopo do tópico, por isso, abra um novo tópico para cada questão distinta ou faça uma busca pelo forum, pois a maioria das dúvidas são comuns e possuem topicos resolvidos

Como centralizar a publicidade do topo ?

consulte o forum CSS / HTML

Ok. obrigada!

Arquivado

[Resolvido] Diagramação

Recommended Posts

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morpheus#2005 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

AAninh@ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante