Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal como faço para que a div texto fique em cima e a div link fique embaixo??
veja o código
CSS
.box{width:150px;
min-height:50px;.texto{width:150px;
height:10px;
background-color:#FF00FF;
}
.link{width:150px;
height:10px;
background-color:#FFFF00;
}HTML
<div class="box">
<div class="texto"></div>
<div class="link"></div>
</div>no codigo de cima a div texto e link ficam em cima!
Faça alguns testes aí.
.texto{width:150px; height:10px;}
.link{width:150px; height:10px;padding-top:20px;}
Existem várias maneiras de se posicionar um elemento,porém cada caso
é um caso.
>
pelo que eu entendi você quer que a div texto fique fixa do topo e a outra fique fixa no rodapé..
Se for isso, é so você deixar seu código assim.
.box{
position: relative;
width:150px;
min-height:50px;background-color:#3300CC;}
.texto{
position: absolute;
width:150px;
height:10px;
background-color:#FF00FF;
top: 0px;
}
.link{
position: absolute;
width:150px;
height:10px;
background-color:#FFFF00;
bottom: 0px;
}Ok Dian Carlos ficou uma posicionada no seus devido lugar a div texto em cima e a div link em baixo
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-_Ydap4MQpW8/UCLRcr7wHbI/AAAAAAAAAM0/n3_sHbHQok4/s1600/box_div3.png&key=31726a48f75f55f92c8e393adf67df1b1d365f711c6c654c5b92fdded819f776" alt="box_div3.png" />
porem quando é colocado algum texto na div texto ela fica assim! veja abaixo
/applications/core/interface/imageproxy/imageproxy.php?img=http://3.bp.blogspot.com/-g22m3SALZzM/UCLPrilNVNI/AAAAAAAAAMs/ychCQq1qMto/s1600/box_div2.png&key=50a498db7ed5cba11080ecf7dc8a94da9b1e12746f8a4a813dc18cedd72cefd2" alt="box_div2.png" />
queria que ela ficasse assim quando o texto fosse muito grande exemplo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://2.bp.blogspot.com/-ZbIso4SOPJk/UCLPpZpzBoI/AAAAAAAAAMk/z7akZFTjORI/s1600/box_div.png&key=a27b14eecfab6c7af5b496eac1cbef40b3c94962feb70bb06877be6b369a3d19" alt="box_div.png" />
.texto{width:150px;
height:10px;
background-color:#FF00FF;
position: relative;
z-index: 5;
}Se o problema persistir, aumente o valor da propriedade z-index
@Wanderson
.texto{width:150px;
height:10px;
background-color:#FF00FF;
position: relative;
z-index: 5;
}Isso não rsolverá o problema mas sim renderizará .text por cima
dos elementos que tiverem z-index < 5.
>
queria que ela ficasse assim quando o texto fosse muito grande exemplo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://2.bp.blogspot.com/-ZbIso4SOPJk/UCLPpZpzBoI/AAAAAAAAAMk/z7akZFTjORI/s1600/box_div.png&key=a27b14eecfab6c7af5b496eac1cbef40b3c94962feb70bb06877be6b369a3d19" alt="box_div.png" />
@Lorena Ribeiro,nesse casso coloque :
texto{
position: absolute;
width:150px;
height:auto;
background-color:#FF00FF;
top: 0px;
}height:auto redimensionara de acordo com o conteudo.
Para esconder o conteudo extra:
overflow:hidden;
>
@Wanderson
.texto{width:150px;
height:10px;
background-color:#FF00FF;
position: relative;
z-index: 5;
}Isso não rsolverá o problema mas sim renderizará .text por cima
dos elementos que tiverem z-index < 5.
@Lorena Ribeiro,nesse casso coloque :
texto{
position: absolute;
width:150px;
height:auto;
background-color:#FF00FF;
top: 0px;
}height:auto redimensionara de acordo com o conteudo.
Para esconder o conteudo extra:
overflow:hidden;
@Marcos Xavier não entendi aonde colocar o overflow:hidden;post para mim o codigo html e css todo para eu entender melhor
>
@Marcos Xavier não entendi aonde colocar o overflow:hidden;
post para mim o codigo html e css todo para eu entender melhor
Não tem a ver com o problema, só postei com a intenção
de incentivar a pesquisa :thumbsup: .
Contudo vai o código:
.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background:#3300CC;
}
.texto{
position: absolute;
width:150px;
height:auto;
background:#FF00FF;
top: 0;
}
.link{
position: absolute;
width:150px;
height:auto;
background:#FFFF00;
bottom: 0;
}
</style>
<div class="box">
<div class="texto">texto</div>
<div class="link">link</div>
</div>Porém não se limite ao que a galera posta.Veja o código,analise,modifique,teste o que postamos aqui.
att
>
Não tem a ver com o problema, só postei com a intenção
de incentivar a pesquisa :thumbsup: .
Contudo vai o código:
.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background:#3300CC;
}
.texto{
position: absolute;
width:150px;
height:auto;
background:#FF00FF;
top: 0;
}
.link{
position: absolute;
width:150px;
height:auto;
background:#FFFF00;
bottom: 0;
}
</style>
<div class="box">
<div class="texto">texto</div>
<div class="link">link</div>
</div>Porém não se limite ao que a galera posta.Veja o código,analise,modifique,teste o que postamos aqui.
att
bem pelo o codigo que você me passou a div 'link' fica fixa e a div 'texto' ultrapassar ela!! como fazer que a div 'link' desça junto com a div 'texto'?!
@Lorena.
Se você manter a '.box' com a altura minima de 50px,pode colocar
como abaixo. Porém se aumentar para mais de 50px a '.link' terá que
alterar a margin-top.
Coloque mais texto na .texto e .link para testar.
.box{
position: relative;
width:150px;
min-height:50px;
height:auto;
background-color:#3300CC;.texto{
width:150px;
height:auto;
background-color:#FF00FF;
margin-top:0;
}
.link{
width:150px;
height:auto;
background-color:#FFFF00;
margin-top:20px;
}
</style>
<div class="box">
<div class="texto">text<br>text<br>text<br>text<br></div>
<div class="link">link<br>link<br>link<br>link<br>link<br></div>
</div>Agora ficou do geito que queria Alelulia :clap:
E ainda resolvi o problema da porcaria do Internet Explore tem quer atribuir esse valor no css
html>body .box {
height: auto;
}o código ficou assim:
<style type="text/css">
.box {
min-height:100px;
height:100px;
position: relative;
width:150px;
background-color:#3300CC;
border:1px #111 solid;
}html>body .box {
height: auto;
}
.texto{
position:relative;
width:150px;
height:auto;
background-color:#FF00FF;
margin-bottom:20px;
}
.link{
width:150px;
height:20px;
background-color:#FFFF00;
position:absolute;
bottom:0;
}
</style>
<div class="box">
<div class="texto">s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl s fsddsf sdfdsf fsd fsd s jjkljkl </div>
<div class="link">link</div>
</div>Agradeço a ajuda de todos :thumbsup:
pelo que eu entendi você quer que a div texto fique fixa do topo e a outra fique fixa no rodapé..
Se for isso, é so você deixar seu código assim.
background-color:#3300CC;}