Jump to content


Photo

Como Colocar Um Rodapé Em Div


  • Faça o login para participar
20 replies to this topic

#16 giga_fire

giga_fire

    Normal

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Leme

Posted 13/09/2004, 14:11

Esse eh o código:

<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>.:: Agencia Virtual - Argentina &amp; Uruguay ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="Mon, Jan 01 2004 00:00:01 GMT" />
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body class="corpo_padrao" onload="rodape()">
<!-- banner { -->
<div id="banner" style="width:778px;height:150px;">
 <div id="banner_r1_c1" style="position:absolute;left:0px;top:0px;width:778px;height:22px;z-index:5;">
  <img src="imagem/layout/banner_r1_c1.png" alt="banner_r1_c1_barra" />
 </div>
 <div id="banner_r2_c1" style="position:absolute;left:0px;top:22px;width:155px;height:128px;z-index:5;">
  <img src="imagem/layout/banner_r2_c1.png" usemap="#mapa_logo" alt="banner_r2_c1_logotipo" />
 </div>
 <div id="banner_r2_c2" style="position:absolute;left:155px;top:22px;width:335px;height:55px;z-index:5;background-image:url(imagem/layout/banner_r2_c2.png);background-repeat:norepeat;padding:5px;">
  <p class="texto_preto_esquerdo">
   <b>Bienvienido a la Agencia Virtual!!!</b>
  </p>
 </div>
 <div id="banner_r2_c3" style="position:absolute;left:500px;top:22px;width:278px;height:128px;z-index:5;">
  <img src="imagem/layout/banner_r2_c3.png" usemap="#mapa_aviao" alt="banner_r2_c3_bandeiras" />
 </div>
 <div id="banner_r3_c1" style="position:absolute;left:155px;top:87px;width:345px;height:63px;z-index:5;">
  <img src="imagem/layout/banner_r3_c1.png" alt="banner_r3_c1_agencia_virtual" />
 </div>
</div>
<!-- banner } -->
<!-- menu { -->
<div id="menu_conteudo" style="position:absolute;left:0px;top:150px;z-index:5;width:125px;">
 <div class="menu_categoria" style="background-image:url(imagem/layout/menu_indice.png);">
  <img src="imagem/layout/pixel.gif" alt="pixel_espaco" />
 </div>
  <div class="menu_item">
  .| <a href="index.htm" title="Principal pagina de la Agencia Virtual" class="link_menu">Principal</a>
 </div>
  <div class="menu_categoria" style="background-image:url(imagem/layout/menu_uruguay.png);">
 <img src="imagem/layout/pixel.gif" alt="pixel_espaco" />
 </div>
  <div class="menu_item">
  .| <a href="uruguay/index.htm" title="Principal pagina del Uruguay" class="link_menu">Principal</a>
 </div>
  <div class="menu_item">
  .| <a href="uruguay/transporte.htm" title="Transporte aéreo, acuático y terrestre" class="link_menu">Transporte</a>
 </div>
  <div class="menu_item">
  .| <a href="uruguay/hospedaje.htm" title="Hosterías y otros hospedajes" class="link_menu">Hospedaje</a>
 </div>
  <div class="menu_item">
  .| <a href="uruguay/turismo.htm" title="Fiestas y puntos turísticos del país" class="link_menu">Turismo</a>
 </div>
  <div class="menu_item">
  .| <a href="uruguay/comidas.htm" title="Comidas típicas" class="link_menu">Comidas</a>
 </div>
 <div class="menu_categoria" style="background-image:url(imagem/layout/menu_argentina.png);">
  <img src="imagem/layout/pixel.gif" alt="pixel_espaco" />
 </div>
  <div class="menu_item">
  .| <a href="argentina/index.htm" title="Principal pagina del Argentina" class="link_menu">Principal</a>
 </div>
  <div class="menu_item">
  .| <a href="argentina/transporte.htm" title="Transporte aéreo, acuático y terrestre" class="link_menu">Transporte</a>
 </div>
  <div class="menu_item">
  .| <a href="argentina/hospedaje.htm" title="Hosterías y otros hospedajes" class="link_menu">Hospedaje</a>
 </div>
  <div class="menu_item">
  .| <a href="argentina/turismo.htm" title="Fiestas y puntos turísticos del país" class="link_menu">Turismo</a>
 </div>
 <div class="menu_item">
  .| <a href="argentina/comidas.htm" title="Comidas típicas" class="link_menu">Comidas</a>
 </div>
</div>
<!-- menu } -->
<!-- barra { -->
<div id="barra" style="position:absolute;left:125px;top:150px;z-index:5;width:653px;">
 <div id="barra_r1_c1" style="position:absolute;left:0px;top:0px;width:648px;height:20px;z-index:4;background-image:url(imagem/layout/barra_r1_c1.png);padding-top:5px;padding-left:5px;background-repeat:repeat-x;">
  <p class="texto_branco_esquerdo">
   <a href="index.htm" title="Principal page" class="link_menu">Agencia Virtual</a> <img src="imagem/layout/detalhe_01.gif" alt="detalhe_azul" /> Principal
  </p>
 </div>
</div>
<!-- barra } -->
<!-- conteudo { -->
<div id="conteudo" style="position:absolute;left:125px;top:175px;z-index:5;width:653px;">
 <div id="conteudo_r1_c1" style="width:643px;background-color:#000000;padding-top:0px;padding-left:5px;padding-right:5px;padding-bottom:5px;">
  <h1 class="titulo_um"><img src="imagem/layout/detalhe_01.gif" alt="detalhe_azul" /> Principal</h1>
  <p class="texto_branco_esquerdo">
   Sejam bem-vindos a Agencia Virtual da Argentina e Uruguay. Esperamos que aproveite sua visita ao site. Para ajudá-lo(a) em sua navegação pelo site segue algumas dicas à baixo!
  </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>
 </div>
</div>
<!-- conteudo } -->
<map name="mapa_aviao" id="mapa_aviao">
 <area shape="rect" coords="203,94,233,113" href="uruguay/index.htm" alt="Uruguay" />
 <area shape="rect" coords="242,94,273,114" href="argentina/index.htm" alt="Argentina" />
</map>
<map name="mapa_logo" id="mapa_logo">
 <area shape="poly" coords="79,106,113,96,127,79,134,46,121,14,107,4,45,4,28,21,18,49,32,86,53,101" href="index.htm" alt="Principal pagina da Ag&amp;ecirc;ncia Virtual" />
</map>
</body>
</html>

E eu preciso colocar um rodapé depois do comentário <!-- conteudo } -->, entenderam? Como eu faço isso?

#17 giga_fire

giga_fire

    Normal

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Leme

Posted 14/09/2004, 16:07

Em?

#18 Marcio_Trindade

Marcio_Trindade

    Normal

  • Usuários
  • 108 posts
  • Sexo:Não informado
  • Interesses:Ajudar e ser ajudado

Posted 14/09/2004, 22:06

Nossa cara eu to com um problema bem parecido cara, tb coloco o bendito rodapé e o conteudo passa por cima, mas só no mozila pq no IEca da certinho , me imprecionei em ter problemas com o mozila em vez do IE, se descobrir ai como fazer posta aqui o resultado blz

Abraços e valeu ai!!!

#19 giga_fire

giga_fire

    Normal

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Leme

Posted 15/09/2004, 00:08

Nossa cara eu to com um problema bem parecido cara, tb coloco o bendito rodapé e o conteudo passa por cima, mas só no mozila pq no IEca da certinho , me imprecionei em ter problemas com o mozila em vez do IE, se descobrir ai como fazer posta aqui o resultado blz

Abraços e valeu ai!!!

Ok...

#20 brunoalves

brunoalves

    Linux user #392843

  • Ex-Admins
  • 1018 posts
  • Sexo:Não informado
  • Localidade:Rio de Janeiro

Posted 15/09/2004, 00:35

Nossa cara eu to com um problema bem parecido cara, tb coloco o bendito rodapé e o conteudo passa por cima, mas só no mozila pq no IEca da certinho , me imprecionei em ter problemas com o mozila em vez do IE, se descobrir ai como fazer posta aqui o resultado blz

Abraços e valeu ai!!!

O problema não é com o Mozzila ele interpreta exatamente como vc escreveu o CSS, o IE que é complascente com código escrito errado.

Segue um que eu fiz a muito teempo, se não me engano funcionava em vários browsers

#conteudo{
	height:80%;
	text-align:left;
}
#topo{
      width:100%;
      margin-left:0;
      margin-top:0;
      margin-right:0;
      height:75px;
   padding:0;
      border-bottom: 2px solid #FF6600;
}
#esq{
      position:relative;
   height:100%;
      float:left;
      padding:15px 5px 5px;
      margin-left:0px;
      width:150px;
}
#meio{
	position:relative;
	height:100%;	
	padding:15px 5px 5px 5px;
    margin-left:160px;
    margin-right:160px;
}
#direita {
      position:relative;
   height:100%;   
      float:right;
      padding:15px 5px 5px;
      margin-right:0px;
      width:150px;
}
#rodape {
      position:relative;
      width:100%;
      clear:both;
      margin-right: 10px;
      margin-left: 10px;
      height:5px;
      border-top: 2px solid #FF6600;
}


<!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>
		<title>Título</title>			
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="Keywords" content="keywords" />
		<meta name="Description" content="descricao" />
		<meta name="author" content="WebLugar.net - Seu Lugar na WEB" />
		<meta name="rating" content="General" />
		<meta name="ROBOTS" content="INDEX,FOLLOW" />
		<meta name="ROBOTS" content="ALL" />
		<meta name="revisit-after" content="2 days" />
		<meta name="title" content="titulo" />
		<meta name="language" content="Portugues" />
		<meta name="copyright" content="WebLugar.net - Seu Lugar na WEB" />
		<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=24)" />
		<link rev="made" href="mailto:hostmaster@weblugar.net" />
		<link href="estilo.css" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="favicon.ico" /> 
	</head>
	<body onload="window.defaultStatus='Titulo da pagina">
		<div id="conteudo">
			<div id="topo">
				<!-- Topo do Site -->
			</div>		      		    		    
			<div id="esq">
				<!-- Coluna Esquerda -->		
			</div>
			<div id="direita"> 
				<!-- Coluna Direita -->		
			</div>		
			<div id="meio">
				<!-- Conteúdo Principal -->
			</div>
		</div>
		<div id="rodape"> 
				<!-- Rodapé -->
		</div>
	</body>
</html>

Abraços.

#21 giga_fire

giga_fire

    Normal

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Leme

Posted 16/09/2004, 22:06

É aí que está a resposta! O atributo clear! Ele diz aquela div que ela deve estar em uma nova linha em relação à direita e à esquerda... falow!




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq