← HTML + CSS

[CSS] Como sobrepor um DIV a uma imagem alinhado ao fundo dessa imagem?

Lida 16831 vezes

Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Vou colocar uma imagem para explicar melhor o que pretendo:



  • A imagem é carregada num div
  • A parte mais escura no fundo da imagem é o menu de navegação da galeria
  • Os icones brancos são outras fotos

Como é que faço para posicionar o div da navegação assim apenas com html e css?
Offline

LusaHosting 
Membro
Mensagens 46 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Tenta fazer antes da abertura da dita "div" o seguinte código "<center> e depois do fecho da div o </center>....

isso em html...
Offline

Gonçalo Martins 
Membro
Mensagens 229 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

HTML

<div class="img">
   <img src="imagem.png" alt="" />
   <cite>o menu?</cite>
</div>

CSS

.img {
   position: relative;
   display: block;
   height:
   width:
}
.img cite {
   background: #000;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width:
   padding:
   
}

ali o <cite> pode ser uma class por exemplo...
Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Código: [Seleccione]
Obrigado pela dica, funcionou mas surgiram algumas questoes:

tenho mesmo de usar um div e neste caso ele tem margin e padding e neste momento o div embora se sobreponha á imagem não está alinhado com o fundo.

A outra questão é que ao colocar a opacidade tudo dentro do div carroncel está a ficar a herdar a opacidade desse div e não é suposto. Já tentei colocar a opacidade especificamente nessas imagens a 100% mas não alterou nada.

























Aqui está o código html:

<div class="multi-destaques">
<div class="imagem-destaques">
            <img src="images/multi-destaques1.png" alt="Multidestaques" />
           
            <div id="carroncel"><div id="carroncel-nav-esq"><img src="images/btn-destaques-esq.gif" alt="Esquerda" /></div>
<ul>
<li><img src="images/icon-multidestaques1.gif" alt="Multidestaques1" /></li>
<li><img src="images/icon-multidestaques2.gif" alt="Multidestaques2" /></li>
<li><img src="images/icon-multidestaques3.gif" alt="Multidestaques3" /></li>
<li><img src="images/icon-multidestaques4.gif" alt="Multidestaques4" /></li>
<li><img src="images/icon-multidestaques5.gif" alt="Multidestaques5" /></li>
<li><img src="images/icon-multidestaques6.gif" alt="Multidestaques6" /></li>
</ul>
<div id="carroncel-nav-dir"><img src="images/btn-destaques-dir.gif" alt="Direita" /></div>
</div><!-- Carroncel -->
            </div><!-- imagem-destaques -->

Aqui está o CSS:

Código: [Seleccione]
.multi-destaques { background:#666666; width:600px; height:260px; margin-bottom:30px; }

.multi-destaques .imagem-destaques { float:left; width:400px; height:260px; }

.multi-destaques .imagem-destaques img {
   position: relative;
   display: block;
}
.multi-destaques .imagem-destaques #carroncel {
   background: #000;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom:0;
   width:550px;
   height:50px;
   padding:0;
   margin-left:20px;
   margin-right:20px;
}

.multi-destaques .imagem-destaques #carroncel #carroncel-nav-esq { float:left; }
.multi-destaques .imagem-destaques #carroncel #carroncel-nav-dir { float:right; }

.multi-destaques #carroncel ul {
list-style:none;
margin:0;
padding:0;

}

.multi-destaques #carroncel ul li { display:inline; }

.multi-destaques #carroncel ul li img { float:left; margin:0 10px; }