Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

David Terra

IE e Firefox

Por , em Desenvolvimento frontend

Recommended Posts

David Terra    0

David Terra
Postado

Olá;

 

Estou usando uma figura de fundo na página e encima dessa imagem estou pondo outras imagens posicionei usando Float mas quando visualizo no Firefox as posições mudam.

 

#header {
width: 768px;
height: 143px;
background-image: url('../img/bg_r1_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

#content {
width: 768px;
height: 719px;
background-image: url('../img/bg_r2_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

<DIV ID="header"></DIV>
<DIV ID="content">

		<DIV style="FLOAT:left; margin-left:20px;">
			<IMG SRC="../../img/logo.jpg" WIDTH="190" HEIGHT="90" BORDER="0" ALT="" >
		</DIV>

		<DIV style="Float:left; margin-left:15px;">
			<IMG SRC="../../img/body-girl.jpg" WIDTH="232" HEIGHT="430" BORDER="0" ALT="" >
		</DIV>

		<DIV style="Float:right; margin-top:10; margin-right:100px;">
			<IMG SRC="../../img/evento.jpg" WIDTH="76" HEIGHT="36" BORDER="0" ALT="" >
		</DIV>
		
		<DIV style="Float:right; margin-top:100; margin-right:100px;">
			<IMG SRC="../../img/loja.jpg" WIDTH="38" HEIGHT="39" BORDER="0" ALT="" >
		</DIV>
	</DIV>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Olá David!

 

então .. seu código soh tem uma coisa que eu mudei aqui..

naum sei se ficou do modo desejado..

 

mais tah aqui o código que eu tentei mudar apartir do seu

 

eu usei o position:relative ... pq?!

pq o conteudo você pode deixar do modo que você quer.. ou seja?! absolute,... etc

agora as imagens dentro dele.. você coloca elas como relative.. relativo ao posicionamento do conteudo anterior

ai você manipula elas apartir top e left..

vê ai se ficou bom! ^_^ uma imagem a direita eh as outras a esquerda okay?! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

qualquer coisa estamos a disposição ^_^

 

<html>
<head>
#header {
width: 768px;
height: 143px;
background-image: url('../img/bg_r1_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

#content {
width: 768px;
height: 719px;
background-image: url('../img/bg_r2_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}
</head>
<body>
<DIV ID="header"></DIV>
<DIV ID="content">

<DIV style="position:relative; margin-left:20px;">
<IMG SRC="../../img/logo.jpg" WIDTH="190" HEIGHT="90" BORDER="0" ALT="" >
</DIV>


<DIV style="position:relative; margin-left:15px;">
<IMG SRC="../../img/body-girl.jpg" WIDTH="232" HEIGHT="430" BORDER="0" ALT="" >
</DIV>

<DIV style="position:relative; margin-top:10; margin-right:100px;">
<IMG SRC="../../img/evento.jpg" WIDTH="76" HEIGHT="36" BORDER="0" ALT="" >
</DIV>

<DIV style="Float:right; margin-top:100; margin-right:100px;">
<IMG SRC="../../img/loja.jpg" WIDTH="38" HEIGHT="39" BORDER="0" ALT="" >
</DIV>
</DIV>
</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Fiz de um outro jeito aqui..

naum sei se ficou bom pq naum testei

 

<html>
<head>
#header {
width: 768px;
height: 143px;
background-image: url('../img/bg_r1_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

#content {
width: 768px;
height: 719px;
background-image: url('../img/bg_r2_c1.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: top;
}

DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
margin-left:20px;
margin-top:0px;
}
<style>
DIV.imagem2 {
position: relative;
top: -100px;
left: 0px;
margin-left:15px;
margin-top:0px;
}
DIV.imagem3 {
position: relative;
top: 380px;
left:0px;
margin-left:0px;
margin-top:10px;

DIV.imagem3 {
position: relative;
top: 380px;
left:0px;
margin-right: 100px;
margin-top:0px;

</head>
<body>
<DIV ID="header">
</DIV>
<DIV ID="content">
</DIV>

<div class="imagem1">
<img style="width: 190px; height: 90px>
<a target="_blank" href="http://link_que_quer_por">
<img border="0" src="http://local_da_imagem" alt="texto descritivo da imagem ou link"></a>
</div>

<div class="imagem2">
<img style="width: 232px; height: 430px>
<a target="_blank" href="http://link_que_quer_por">
<img border="0" src="http://local_da_imagem" alt="texto descritivo da imagem ou link"></a>
</div>

<div class="imagem3">
<img style="width: 76px; height: 36px>
<a target="_blank" href="http://link_que_quer_por">
<img border="0" src="http://local_da_imagem" alt="texto descritivo da imagem ou link"></a>
</div>

<div class="imagem4">
<img style="width: 38px; height: 39px>
<a target="_blank" href="http://link_que_quer_por">
<img border="0" src="http://local_da_imagem" alt="texto descritivo da imagem ou link"></a>
</div>

</body>
</html>

 

agora no:

 

<body>
<DIV ID="header">
</DIV>
<DIV ID="content">
</DIV>

naum sei se teria que colocar o tamanho da imagem.. a ampliação dela pra ficar de fundo..

tentei ajudar ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Terra    0

David Terra
Postado

Obrigado...

 

"Position: relative;" é relativa a DIV anterior? Tem como fazer relativa a Div content?

 

 

Posicionei tudo no IE mas quando vou visualizar no Firefox as imagens estão fora da posição.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

isabel não entendi isso:

<img style="width: 38px; height: 39px>
<a target="_blank" href="http://link_que_quer_por">
<img border="0" src="http://local_da_imagem" alt="texto descritivo da imagem ou link">
duas vezes <img> por que?

 

acho que você esta fazendo algo errado

=/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito