[Resolvido] Barra fixa na base do site

Thiago Rodrigues_171482 · Agosto 17, 2012

quero saber como coloco uma barra fixa na base do meu site, mesmo quando a pessoa rolar para baixo q ela fique fixa na base (parte de baixo) da tela, um exemplo e este site q tem uma barra fixa na base do site mesmo quando rola ele continua la eu estava usando um iframe so que o iframe so fica na parte superior do site, alguem da um Help ai. Obrigado!! (se desse pra colocar um iframe na base tbm serviria)

marcelo2605 · Agosto 17, 2012

Thiago, use CSS:

footer{
position:fixed;
left:0;
bottom:0;
height:60px;
width:100%;
}

Thiago Rodrigues_171482 · Agosto 17, 2012

Marcelo, me desculpe a lerdeza e que sou iniciante e realmente nao sei como utilizar esse codigo, poderia ser mais especifico? ja tenho a barra criada no DW e salva q codigo uso pra colocar a barra na base e chamar a barra q tenho ja feita?

marcelo2605 · Agosto 17, 2012

Thiago, você tem a barra criada na página html, certo? Ela é uma div? Você deu um nome a ela (por exemplo: <div class="rodape">)?

Thiago Rodrigues_171482 · Agosto 17, 2012

tenho a barra criada ja com as imagens e etc, com um html com nome de rodape.html pra dizer a verdade alem disso nao tenho nada pronto apenas a barra q fiz no DW q ja hospedei antes tentei usar com o iframe mas so fica encima e eu quero em baixo caso queira olhar vou deixar a barra com iframe pra você ver como ta la no site Clique aqui sera q nao teria como colocar o iframe na parte de baixo do site? desculpe se nao entender mais e q sou leigo mesmo e sei pouco de html e css =/ mesmo assim ja agradesço

marcelo2605 · Agosto 17, 2012

Thiago, posta o código do rodape.html

Thiago Rodrigues_171482 · Agosto 17, 2012

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

#apDiv1 {
position:absolute;
width:200px;
height:0px;
z-index:0;
left: 0px;
top: -1px;
}

#apDiv2 {

position:absolute;

width:200px;

height:115px;

z-index:2;

left: 451px;

top: 78px;

}

#apDiv3 {

position:absolute;

width:28px;

height:24px;

z-index:2;

left: 638px;

top: 51px;

}

#apDiv4 {

position:absolute;

width:30px;

height:31px;

z-index:3;

left: 749px;

top: 46px;

}

#apDiv5 {

position:absolute;

width:32px;

height:24px;

z-index:4;

left: 859px;

top: 50px;

}

#apDiv6 {

position:absolute;

width:118px;

height:24px;

z-index:5;

left: 957px;

top: 54px;

}

#apDiv7 {

position:absolute;

width:316px;

height:23px;

z-index:6;

left: 248px;

top: 48px;

color: #FFF;

font-size: large;

}

#apDiv8 {

position:absolute;

width:200px;

height:115px;

z-index:7;

}

</style>

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

 if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

</head>



<body onload="MM_preloadImages('botoes rodape/botao-1-2.png','botoes rodape/botao-2-2.png','botoes rodape/botao-3-2.png','botoes rodape/botao-4-2.png')">

<div id="apDiv1"><img src="botoes rodape/menu-rodape.png" width="1363" height="93" align="absbottom" /></div>

<div id="apDiv3"><a href="chat.html" target="_new" onmouseover="MM_swapImage('Image2','','botoes rodape/botao-1-2.png',1)" onmouseout="MM_swapImgRestore()"><img src="botoes rodape/botao-1.png" name="Image2" width="22" height="20" border="0" id="Image2" /></a></div>

<div id="apDiv4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','botoes rodape/botao-2-2.png',1)"><img src="botoes rodape/botao-2.png" name="Image3" width="24" height="25" border="0" id="Image3" /></a></div>

<div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','botoes rodape/botao-3-2.png',1)"><img src="botoes rodape/botao-3.png" name="Image4" width="24" height="18" border="0" id="Image4" /></a></div>

<div id="apDiv6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','botoes rodape/botao-4-2.png',1)"><img src="botoes rodape/botao-4.png" name="Image5" width="111" height="16" border="0" id="Image5" /></a></div>

<div id="apDiv7">Quer falar com um consultor de vendas?</div>

</body>

</html>

esse e o codigo do radape q fiz no DW

marcelo2605 · Agosto 17, 2012

Thiago, substitua esse código:

#apDiv1 {
       position:absolute;
       width:200px;
       height:0px;
       z-index:0;
       left: 0px;
       top: -1px;
}

por esse:

#apDiv1 {
position: fixed;
width: 100%;
height: 50px;
z-index: 0;
left: 0;
bottom: 0;
}

e veja o que acontece

Thiago Rodrigues_171482 · Agosto 17, 2012

eu retiro o iframe e o codigo vai direto na idex?

ahhh acho q deu certo sim mas, so desceu a barra mais escura os icoes ficaram la encima sem a barra como coloco os icoes la em baixo tbm ?

marcelo2605 · Agosto 20, 2012

Thiago, o que fiz foi fazer com que o CSS posicionasse a barra no rodapé da página. Fiz isso da seguinte forma:

#apDiv1{
position: fixed; DETERMINA QUE A POSIÇÃO DA DIV SERÁ FIXA
width: 100%; DETERMINA QUE A DIV TERÁ UMA LARGURA DE 100%, PARA OCUPAR TODA A PÁGINA
height: 50px; ALTURA DA DIV
z-index: 0;
left: 0; DETERMINA QUE A DIV DEVERÁ SER POSICIONADA TOTALMENTE À ESQUERDA
bottom: 0; DETERMINA QUE A DIV DEVERÁ SER POSICIONADA TOTALMENTE NO CANTO INFERIOR DA PÁGINA
}

Tente fazer isso com os outros elementos.

Thiago Rodrigues_171482 · Agosto 21, 2012

opa mto obrigado Marcelo consegui aqui com suas dicas, disso eu nao sofro mais kkk Grato por tudo!

marcelo2605 · Agosto 21, 2012

Thiago, se você quiser ter uma noção melhor dos fundamentos básicos, eu sugiro esta série de vídeos. Mesmo que não saiba inglês, dá para acompanhar. Espero que te ajude e boa sorte!

Arquivado

[Resolvido] Barra fixa na base do site

Recommended Posts

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Rodrigues_171482 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante