Div não fica em cima da outra. Como resolver?

Front-end

15/06/2016

Olá pessoal,

Meu nome e Hugo Baur, trabalho com desenvolvimento a um tempinho, estou com um problema que não consigo resolver de jeito nenhum. Dessa vez preciso pedir ajuda a vocês.

Estou desenvolvendo um site chamado SNAP. Onde o usuário clica num botão e tira foto, essa foto vai pro servidor, estou usando o XAMPP. Local host mesmo (Pedido do cliente).

Até ai tudo certo, o problema é na próxima página, onde tem uma variedade de molduras que quando clicado deve vir em cima da imagem. Eu consegui resolver isso colocando as divs uma em cima da outra e chamando a IMG da foto e a IMG da moldura por CSS, funciona, mas tem uma funcionalidade IMPRIMIR. que pega somente a foto para impressão. Mas a funcionalidade imprimir não funciona se as imagens forem declaradas pelo CSS. E se for declarado <IMG> no HTML, uma imagem fica em cima e a utra em baixo, ou UM ou OUTRO.

Resumindo:

Com as IMG's declaradas pelo HTML (UMA DIV FICA EM BAIXO DA OUTRA MAS IMPRIME)

<div id="print" class="conteudo" ><img id="foto" src="upload/img.png" width="861" height="655" style="z-index:2;" />
            <div id="moldurafoto"><img id="mold1" src="img/molduras/molduras/snap_mol1.png" width="412" height="211" /></div>
          </div>


Com as IMG's no CSS (DIV FICA EM CIMA DA OUTRA, MAS NÃO IMPRIMIE)

#main-banner {
	width: 1180px;
	height: 768px;
	overflow: hidden;
	background-image: url(upload/img.png);
	background-repeat: no-repeat;
	padding-right:-50px;
	z-index:2;
}
#main-banner-content {
	width: 1080px;
	height: 768px;
	float: right;
	background-image: url(img/molduras/molduras/snap_mol1.png);
	background-repeat: no-repeat;
	z-index:1;
}

<div id="main-banner" style="padding-top:40px;">
      <div id="main-banner-content" style="padding-top:40px;">
</div>
      </div>


O que preciso é de ajuda para, ou conseguir deixar as div's uma m cima da outra no HTML ou um procedimento imprimir quando as img's são declaradas pelo CSS.

e ai pessoal?

Obrigado!
Hugo Baur

Hugo Baur

Curtidas 0

Respostas

Leandro Chiodini

Leandro Chiodini

15/06/2016

Bom dia Amigo.
Ja tentou usar o

clear: both;

no Css das tuas Divs

#main-banner-content {
    width: 1080px;
    height: 768px;
    float: right;
    background-image: url(img/molduras/molduras/snap_mol1.png);
    background-repeat: no-repeat;
    z-index:1;
clear: both;;
}
 
GOSTEI 0
Hugo Baur

Hugo Baur

15/06/2016

Opa, vou testar aqui e retorno o resultado.
GOSTEI 0
Hugo Baur

Hugo Baur

15/06/2016

Não funcionou, Pelo CSS funciona a moldura ficar em cima da foto, mas ai a funcionalidade imprimir não acha a imagem pq vem do HTML. E se eu colocar as IMG's pelo HTML as divs não ficam sobrepostas.

Alguém tem mais alguma idéia?

Abaixo segue o evento para imprimir que eu uso, tem um "innerHTML" ali que pega do HTML, será que tem alguma coisa tipo "innerCSS"?


<div id="imprimir">
            <p><a href="" onclick="cont();"></a></p>


<script>
function cont(){
   var conteudo = document.getElementById('print').innerHTML;
   tela_impressao = window.open('about:blank');
   tela_impressao.document.write(conteudo);
   tela_impressao.window.print();
   tela_impressao.window.close();
}
</script>
GOSTEI 0
Marcelo Coelho

Marcelo Coelho

15/06/2016

Já tentou mudar as dimensões das divs, Pois os valores do width e height são atribuído ao tamanho do conteúdo. Sendo assim são desconsiderado o valor do padding e border.
GOSTEI 0
Marcelo Coelho

Marcelo Coelho

15/06/2016

Já tentou mudar as dimensões das divs, pois os valores do width e height são atribuído ao tamanho do conteúdo. Sendo assim são desconsiderado o valor do padding e border.

No CSS, #main-banner
Altere o valor da width(largura) e Height(Altura) com valores maiores

e no #main-banner-content adicione uma propriedade "box-sizing: border-box" alterando assim a atribuição do width e height(onde se leva em consideração conteúdo, padding e border)
GOSTEI 0
POSTAR