Banner Fixo

wagtel · July 6, 2011

Estou construindo um site onde as propagandas deverão ficar no lado direito da tela.

Encontrei um modelo na web que explica como fazer:

http://www.maujor.com/w3ctuto/pinned.html

Primeiramente eu copiei os códigos em duas página: HTML e CSS

Mas não deu certo:

http://www.eaquitem.com.br/teste.htm

Não entendo o que está faltando, caso alguém possa me ejudar eu agradeço

Abaixo os códigos:

Na página HTML:

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Banner Flutuante</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="banner.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="banner"> 
  <p align="center"> <a rel="home" class="banner" href="http://www.w3.org"> <img alt="W3C" src="index_images/w3c_home.png" /></a> 
    <a rel="bookmark" href="http://www.w3.org/Consortium/Activities"> Activities</a> 
    <a rel="bookmark" href="http://www.w3.org/TR/">Tech. reports</a> <a rel="index" href="http://www.w3.org/Help/siteindex">Site 
    index</a> <a rel="bookmark" href="http://www.w3.org/Consortium/Translation/"> 
    Translations</a> <a rel="bookmark" href="http://www.w3.org/Status">Software</a> 
    <a rel="search" href="http://search.w3.org/">Search</a> <em>Nearby:</em> <a rel="top" href="http://www.w3.org/Style">Style</a> 
    <a rel="up" href="http://www.w3.org/Style/CSS/">CSS</a> <a rel="first" href="http://www.w3.org/Style/Examples/007/"> 
    tips & tricks</a> </p>
</div>
<p class="banner">&nbsp;</p>
<p class="bannerpropaganda">&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>o </p>
</body>
</html>

Na página banner.css:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 2.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }


div.banner a {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right 200px;
}

Markus Magnus · July 19, 2011

acima da tag html coloque essa linha e o seu código vai funcionar sem precisar mecher uma virgula

claro só para os navegadores normais (todos exceto o ie) e as versoes do ie superiores a 6.0

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

se você ainda quiser fazer com que os navegadores ie com versões menores que 6.0 vizualizem esse efeito acrescente isso ao seu css

<!–[if IE]>

html, body {

height: 100%;

overflow: auto;

}

#menu {

position: absolute;

}

</style>

<![endif]–>

Sign In

Banner Fixo

Question

wagtel

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Markus Magnus

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity