F�rum Div n�o fica em cima da outra. Como resolver? #557184

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

Curtir t�pico

+ 0

Responder

Posts

16/06/2016

Leandro Chiodini

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;;
}
�

Responder

Gostei + 0

20/06/2016

Hugo Baur

Opa, vou testar aqui e retorno o resultado.

Responder

Gostei + 0

20/06/2016

Hugo Baur

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>

Responder

Gostei + 0

19/07/2016

Marcelo Coelho

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)

Responder

Gostei + 0