Publicado em 16 de mai.

Botão com posição fixa dentro de Div

Olá pessoal

Estou montando um site e estou precisando de uma ajuda.

O botão "leia mais" deve ficar no canto inferior direito, fixo.

Mas conforme a quantidade de texto da notícia, ele fica subindo e descendo.

Este botão está dentro de outra div.

Seguem duas imagens para vocês verem o que está ocorrendo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://analu.byethost2.com/revista/noticia1.jpg&key=ce00836dfbc229f60afd0480ffaf9f89ac5fd413b385c27f48e60958131fb069" alt="Imagem Postada" />

/applications/core/interface/imageproxy/imageproxy.php?img=http://analu.byethost2.com/revista/noticia2.jpg&key=1ac43a889c4b7f604e23fb9777ecf807312b396d18e90648529861d0f6e0f7d4" alt="Imagem Postada" />

Segue também o CSS dessa parte:

.news_style{
display:none;
}
.news_show

{

background-color: white;
color:black;
width:486px;
height:230px;
overflow: auto;
}
.news_border

{

background-color: white;
width:486px;
height:230px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 1px solid gray;
padding: 5px 5px 5px 5px;
overflow: auto;

}
.news_mark{
background-color:white;
font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
width:361px;
height:35px;
color:black;
text-align:center;
}
.news_title{
font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
padding: 5px 0px 9px 5px;
color:black;
display:none;
}

.news_show img{

margin-left: 5px;
margin-right: 5px;

}
.buttondiv

{ position: absolute; /float: left;/ /top: 169px;/

padding: 5px 5px 5px 5px;
background-color:white;
border: 1px solid gray;

/border-top-color: white;/

border-top:none;
height:20px;
}
#leiamais {
	background:#E9E9E9;
	width:65px;
	text-align:center;
	padding:7px 7px 7px 7px;
	font-size:13px;
	float:right;
}

abraço

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Retondar· 16 de mai.

Tente fazer assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#leiamais {
 width:65px;
 text-align:center;
 padding:7px 7px 7px 7px;
 font-size:13px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
<title>Botão</title>

</head>

<body>
<div id="leiamais"><button type="button">Leia Mais!</button></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>

Só adicionei esse monte de texto para você ver como fica.

ghenschel· 16 de mai.

não funcionou :(

segue o html da página para vocês verem...

<div align=left id=mynewsdis><div class=news_border>
<div id=showhere class=news_show ></div>
</div>
<div class=buttondiv id=news_button>
<img src=prev.gif align="absmiddle" id=news_prev><img src=pause.gif align="absmiddle" id=news_pause><img src=next.gif align="absmiddle" id=news_next >
</div>
<div class=news_mark><div id=news_display class=news_title></div>
</div></div>
<div id=mynews>
<div id=news1 class=news_style>
<table>
<tr><td><img src=foto align=left width="202"><br /></td>
<td><div id="titulonoticia"><strong>titulo</strong></div>
resumo<br /></td></tr></table>
<div id="leiamais"><a href="noticia.php?id=1">Leia mais</a></div>
</div>
</div>

Thiago Retondar· 16 de mai.

Só complementar com o resto do seu código:

<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Templates</title>
<style type="text/css">
#leiamais {
width:65px;
text-align:center;
padding:7px 7px 7px 7px;
font-size:13px;
position: fixed;
bottom: 0;
right: 0;
}
</style></head>

<body>
<div id="leiamais"><a href="noticia.php?id=1">Leia mais</a></div>
</body>
</html>