Jump to content

Alinhar imagem numa div com overflow


tig17
 Share

Recommended Posts

Boas pessoal.

Estou aqui com uma duvida que para vocês deve ser simples.

Eu tenho uma div com a propriedade overflow a hidden para caso as imagem do menu não caibam todas na div esta aumentar aumtomaticamente.

O problema é que no float left da div meti uma imagem mas não consigo alinhar ao bottom da div quando esta faz o overflow. Existe alguma maneira de eu alinhar a imagem sempre ao bottom da div mesmo quando esta está em overflow?

<div class="menuu_panel" style="overflow:hidden;">
<span class="float_left">
<script language="javascript">
//valor de 0 a 10
var valor = Math.round(Math.random()*10);
if (valor<5) {
	imagem = "link1";
}else {
	imagem = "link2";
}
document.write('<img src="' + imagem + '" class="imagemwelcome">');
</script>
</div>
Link to comment
Share on other sites

Eu tenho uma div com a propriedade overflow a hidden para caso as imagem do menu não caibam todas na div esta aumentar aumtomaticamente.

ai é ?? e eu a pensar que o overflow hidden descartava tudo não é possivel apresentar ... (fora da box)

http://css-tricks.com/the-css-overflow-property/

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

No meu caso como vês tenho o overflow a hidden no código e as imagens que tenho ao não caberem na div que tenho, a própria div aumenta de tamanho para que estas lá caibam dentro.

Por acaso faltou-me uma coisa no código quando o passei para aqui:

<div class="menuu_panel" style="overflow:hidden;">
<span class="float_left">
<script language="javascript">
        //valor de 0 a 10
        var valor = Math.round(Math.random()*10);
        if (valor<5) {
                imagem = "link1";
        }else {
                imagem = "link2";
        }
        document.write('<img src="' + imagem + '" class="imagemwelcome">');
</script>

(aqui estão as imagens que falo e quando não há espaço na div para todas, a div cresce automaticamente)

</div>
Link to comment
Share on other sites

Desculpa só responder agora. É dificil mostrar porque onde estou a colocar ainda não está on e estou a fazer isto num fórum.

Mando o CSS à parte do HTML porque onde coloco os css é um local diferente de onde meto o HTML.

Mas só tenho isto que vou mostrar:

CSS

.imagemwelcome {
     max-height: 120px;
     height: expression(this.height > 120 ? "120px" : true);
}


.menuu_panel {
background: #DCDCDC url(http://i42.tinypic.com/b8p9j6.png) repeat-x;
color: #000000;
border-bottom: 1px solid #bebebe;
padding: 0px;
        font-size: 11px;
}



HTML

<div class="menuu_panel" style="overflow:hidden;">

<span class="float_left">

<script language="javascript">
//valor de 0 a 10
var valor = Math.round(Math.random()*10);
if (valor<5) {
	imagem = "http://i1059.photobucket.com/albums/t433/Tiago_Dias/dgreeting3.png";
}else {
	imagem = "http://img191.imageshack.us/img191/3190/ocertohshs.png";
}
document.write('<img align="bottom" src="' + imagem + '" class="imagemwelcome" >');
</script>

</span>

...... Aqui tenho outras imagens sempre com tamanho fixo e quando as resoluções são menores elas ficam umas por baixo das outras o que faz a div menuu_panel crescer para lá caberem todas. Mas a imagem que mostro no codigo em cima não acompanha o bottom do div......

</div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.