[Resolvido] Alinhar banner no IE

[Apostilas na Web 0]

Boa noite,

 

Gostaria de uma ajuda para alinhar um banner que está no meu site, no firefox ele está certo, porem quando abro o site com o IE 7m o banner fica totalmente desalinhado.

 

 

1º No primeiro banner, eu abri com o navegador firefox, o banner ficou alinhado dentro da imagem publicidade.

2º Agora na segunda imagem eu abri com o IE 7, porem o banner não ficou alinhado dentro da imagem publicidade.

 

 

Código HTML / PHP

 

<div align="center">
<table>
  <tr>
	<td id="ja-banner">
	<jdoc:include type="modules" name="banner" style="none" />
	</td>
  </tr>
</table></div>

Código CSS

 

#ja-banner {
width: 485px;
height: 68px;
margin:0px;
padding:15px;
padding-top:0px;
padding-left: 14px;
background:url(../images/publicidade_barra.gif) no-repeat left;
}

Se alguem souber como eu posso fazer para alinhar o banner dentro da imagem publicidade nos dois navegadores, eu ficou grato.

[Paulo de Tarso F. M. 24]

Tudo bem que está me parecendo alguma espécie de blog, mas por que aquela tabela? <_< Não que ela seja o problema, mas é que temos que "cortar o mal pela raiz"... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Seu site está usando que Doctype?

[Apostilas na Web 0]

  Paulo de Tarso F. M. disse:

Tudo bem que está me parecendo alguma espécie de blog, mas por que aquela tabela? <_< Não que ela seja o problema, mas é que temos que "cortar o mal pela raiz"... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Seu site está usando que Doctype?

Bom dia Paulo,

 

Eu coloquei aquela tabela porque pensei que era necessário ! Mais pelo tom da pergunta, acredito que posso deixar somente a div...

 

Doctype ?? Não entendi !

[Paulo de Tarso F. M. 24]

Bom dia!

 

Bom, é o seguinte: como você não conhece Doctype, então você não conhece Webstandards, né? Se não conhece, tudo bem, não se sinta mal por isso não (rs), afinal de contas, 90% dos desenvolvedores não conhecem (embora eu acho que hoje esse número pode ter diminuído, espero).

 

É assim, no seu caso, realmente, a tabela ali é totalmente desnecessária e seria incorreto o seu uso. Sabe por quê? Porque tabelas não existem para construir layouts ou ajudar no posicionamento de elementos em uma página. Infelizmente, a maior parte dos desenvolvedores web ainda constróem seus sites dessa forma, criando um layout no Fireworks ou Photoshop, por exemplo, e com o auxílio dessas ferramentas, fatiam as imagens e exportam tudo no Dreamweaver, que se encarrega então de criar todo o código HTML para você, sem que você precise "encostar" em uma linha de código.

 

"Pôxa, que bacana isso, né?"

 

Não, não é bacana. Primeiro, o código gerado muitas vezes é um código sujo, com uso de tags desnecessárias e incorretas. Segundo, você fica "viciado", e acaba não conhecendo uma tag de HTML (é estranho, né, um desenvolvedor de sites não conhecer a linguagem mais básica e necessária para construção deles). E, terceiro, por não conhecer nada de HTML, dificilmente irá poder corrigir quaisquer erros que possam surgir.

 

"Mas por que eu não posso utilizar uma tabela ali, afinal de contas?"

 

Bom, se sua dúvida era porque que seu banner não fica na posição que deseja, já viu que fui muito além disso, não é? E eu poderia ir muito, mas muito mais longe ainda, mas não quero causar mais confusão do que eu provavelmente já posso ter causado, mas pelo menos essa questão eu responderei (o porque não usar a tabela). Veja esse material aqui:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Trabalhando com Tabelas

Nesse tutorial você aprende como se deve trabalhar com tabelas, claro, isso quando necessário. Agora, uma recomendação: leia também os outros artigos publicados em nosso Laboratório de Scripts (WS), além desse sobre tabelas, que está nesse Lab.

 

Agora, uma sugestão para seu banner, eu teria que estar com as imagens utilizadas (tanto o próprio banner quanto a imagem que está escrito "Publicidade"), para poder medir e calcular os espaçamentos necessários.

 

É assim, é coisa simples esse seu caso, pelo menos aparentemente. Se possível, disponibilize um link para vermos o problema de fato.

 

Ok? Boa sorte! E, precisando de ajuda, pode voltar a escrever!

 

Um abraço!

[Apostilas na Web 0]

Bom dia Paulo,

 

o banner está no tamanho 468 x 60, já a imagem que está escrito "publicidade" está no tamanho 485 x 60, o link para o site infelizmente não vou poder passar, pois está em localhost !

 

 

 

 

 

Eu tirei a parte das tabelas e deixei o código assim agora:

 

Código HTML

 

<div id="ja-banner">
	<jdoc:include type="modules" name="banner" style="none" />
</div>

Código CSS

 

#ja-banner {
width: 485px;
height: 68px;
margin:0px;
padding:15px;
padding-top:0px;
padding-left: 14px;
background:url(../images/publicidade_barra.gif) no-repeat left;
position:relative;
left: 15%;
}

[Aprendiz CSS 3]

resolveu?

[Apostilas na Web 0]

Bom diaAprendiz CSS,

 

ainda não consegui resolver meu problema !

 

Abraços

[Aprendiz CSS 3]

Qual é o resultado disso:

 

<jdoc:include type="modules" name="banner" style="none" />

 

 

posta o código do resultado na WEB

 

um link se possivel

[Apostilas na Web 0]

Esse código é responsável pela exibição do banner, isso faz parte do CMS que eu uso. Infelizmente não tenho um link para passar para você, pois está em localhost.

 

No início do tópico, coloquei o código CSS que eu estou usando.

 

Abraços

[Paulo de Tarso F. M. 24]

Veja se assim funciona:

 

CSS:

div#banner {
	width:468px;
	height:60px;
	padding:4px 3px 4px 14px;
	bachground:url(publicidadebarrang8.gif) left top no-repeat;
}
div#banner a img {border:none;}

HTML:

<div id="banner">
	<a href="[link]" title="[Seu title]">
		<img src="osmbanner1pj0.png" alt="[Seu alt]" width="468" height="60" />
	</a>
</div>

(O código não precisa ser exatamente com esse monte de quebra de linha, só fiz assim para facilitar a leitura).

 

Qualquer coisa, volte a postar!

 

Abraço!

[Apostilas na Web 0]

Boa tarde Paulo,

 

Estamos quase conseguindo, já conseguimos centralizar a parte left e right do banner da imagem, porem agora precisamos só centralizar o top do banner na imagem.

Não foi possível utilizar todo código que você desenvolveu para mim, porem pela parte que eu usei deu quase certo.

 

Esse é o código que eu estou usando

#ja-banner {
width: 485px;
height: 68px;
padding:0px 3px 4px 14px;
background:url(../images/publicidade_barra.gif) left top no-repeat;
position:relative;
left: 15%;
}

Olha como que ficou:

 

 

 

Observação: Esse efeito está tanto no IE 7 e Firefox.

[Aprendiz CSS 3]

Apostilas na Web

 

conserta isso ai cara, agora ficou tranquilo!!!

 

abraço

[Apostilas na Web 0]

Paulo, obrigado pela força que esta me dando...

[Aprendiz CSS 3]

acho que você não conhece um plugin do firefox chamado FireBug, instala ele que você verá que consegue alterar o código css em tempo real, com isso ele te ajudará a resolver esse problemas de ajuste! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

abraço

[Paulo de Tarso F. M. 24]

Provavelmente outro elemento esteja influenciando isso. Procure zerar o margin para ver o que acontece, e também verifique a formatação de outros elementos. Muitas vezes aplicamos uma formatação padrão para todas as tags, e isso pode estar atrapalhando. Por exemplo:

div {margin:10px;}

Todas as divs recebem um margin de 10px. Se você precisa remover as margens do lado direito e esquerdo em uma div especificamente, terá que criar uma regra específica para essa div:

div#nome {margin:10px 0;}

Bom, vai tentando aí, qualquer coisa, volte a postar!

 

Abraço!

 

Obs.: Ótima dica essa do nosso amigo Aprendiz CSS. Vale muito a pena a instalação do mesmo. Eu uso também!

[Apostilas na Web 0]

Então Aprendiz CSS,

 

eu tenho essa extensão instalada, mais eu acho melhor a extensão Web Developer, acho mais legal e tem mais recursos.

Então cara, eu tô tentando mexer no código assim, inclusive estou até no site do maujor para tentar conseguir o que estou precisando...

 

Mais de qualquer forma agradeço a sua dica.

[Apostilas na Web 0]

É Paulo, com a sua boa vontade, conhecimento e dicas conseguimos resolver o meu problema.

 

  Citar

Provavelmente outro elemento esteja influenciando isso. Procure zerar o margin para ver o que acontece, e também verifique a formatação de outros elementos. Muitas vezes aplicamos uma formatação padrão para todas as tags, e isso pode estar atrapalhando. Por exemplo:

Foi com essa dica que então comecei a procurar no código todo do template, algo que tivesse o nome banner, então encontrei essa parte do código e então alterei o valor do margin-top.

 

.banneritem {
	display: block;
	margin-top: 4px;
}

Depois se você quiser olhar o meu site pra ver como que ficou, pode acessar através desse link http://www.apostilasnaweb.com/

 

Abraços e obrigado a todos

[Paulo de Tarso F. M. 24]

Que bom que resolveu o problema! Agora, posso dar sugestões? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif (Embora aqui não seja o fórum de Avaliação, que foi o local onde comecei minha "carreira" aqui dentro do iMasters...)

 

Centralize mais o banner na área cinza, observe que o espaço livre nas laterais do banner não é igual, o ideal seria que a parte cinza do fundo seria igual nas duas laterais (ocorre que na lateral esquerda você tem a palavra Publicidade, e seria melhor que você não contasse com ela na hora de dividir. Comece a contar a partir do Publicidade... Consegue compreender o que estou dizendo? É que escrever é muito mais difícil do que dizer, né? rsrsrs)...

 

Outra sugestão: retire os asteriscos na barra de título da sua página (<title>). Deixe apenas a frase...

 

Bom, é isso. E precisando de algo, é só nos procurar!

 

Boa sorte!

 

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

[Apostilas na Web 0]

Realmente dizer para a pessoa ali na frente do que ficar escrevendo, mais eu consegui entender o que você me passou.

Sobre os asteriscos, eu já fiz a alteração. No banner, você quer dizer para eu alinhar o banner dentro da imagem cinza(publicidade) ou para eu alinhar os 2 no centro do desktop ou site ?

 

Caso a sua dica seja para alinhar o banner dentro da imagem cinza(publicidade) o que eu acho que deve ser, eu estou abrindo o site no firefox(ultima versão) e no IE 7 e aqui está aparecendo que está alinhado nos 4 lados.

 

Se possível manda um Print da tela.

 

 

Obrigado pela sugestão !

[Paulo de Tarso F. M. 24]

Engraçado, não apareceu mais, realmente está alinhado (pode ser que no momento em que acessei ocorreu algum bug temporário... Coisas da informática... rs).

 

Muito bom, meu caro Apostilas na Web. Que bom que pude lhe ajudar!

 

E, já sabe, precisando de mais alguma coisa, estamos por aqui!

 

Um abraço!