Ir para conteúdo

POWERED BY:

Arquivado

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

NetBoy16

Div mudando de posicao conforme resolucao

Por , em Desenvolvimento frontend

Recommended Posts

NetBoy16    72

NetBoy16
Postado

Fala pessoal, to tendo um problema, nao sei porque ta acontecendo, nesse site que to fazendo, em cada resolucao a div fica numa posicao diferente, alguem por favor pode me ajudar?

 

codigo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recanto Sertanejo</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
       <div id="menu">
           <?php require 'modulos/menu.php'; ?>
       </div>
   	<div id="cont">
           <div id="topo">
               <div id="banner"><?php require 'modulos/banner.php'; ?></div>
           </div>
           <div id="conteudo">
               <div id="rsocial"><?php require 'modulos/rsocial.php'; ?></div>
               <div id="cobertura"><?php require 'modulos/cobertura.php'; ?></div>
               <div id="programacao"><?php require 'modulos/programacao.php'; ?></div>
               <div id="parque"><?php require 'modulos/parque.php'; ?></div>
               <div id="bonusrevista"><?php require 'modulos/bonusrevista.php'; ?></div>
               <div id="facebook"><?php require 'modulos/facebook.php'; ?></div>
               <div id="parceiros"><?php require 'modulos/parceiros.php'; ?></div><br />
           </div>       
	</div>
       <div id="rodape">
           <img src="images/violao.png" alt="violao" />
       </div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */

* {
padding:0;
margin:0;	
font-family:Verdana, Geneva, sans-serif;
}
body {
text-align:center;	
background:black;
}
img {
border:none;	
}
#container {
	background:url(../images/bg.png);
	width:1025px;
	margin:auto;
}
	#menu {
		width:1000px;
		height:100px;
	}
		#menu img {
			position:absolute;	
			left: 160px;
			top: -30px;
		}
	#cont {
		width:900px;
		background:black;
		margin:auto;	
	}
		#topo {
			padding-top:50px;		
			height:400px;		
		}
			#banner {
				background: url(../images/molde.png) no-repeat center 100%;
				height: 370px;				
			}
		#conteudo {
			width:800px;	
			margin:auto;
		}
			#rsocial {
				position: absolute;
				left: 810px;
				top: 525px;	
			}
				#rsocial a {
					margin-left:20px;	
				}
			#cobertura {
				background:url(../images/ultimascoberturas.png) no-repeat;
				width:900px;
				height:230px;
				margin-left:-50px;
				margin-top: -20px;
			}
				#cobertura ul {
					float:left;
					list-style:none;
					margin-top:100px;
				}
					#cobertura ul li {
						float:left;
						list-style:none;
						margin-left:30px;	
					}
						#cobertura ul li p {
							color:#0b0202;
							margin-top:10px;
							font-weight:bold;
						}	
			#programacao {
				background:url(../images/programacao.png) no-repeat;	
				width: 470px;
				height: 343px;
				margin-top: 50px;
				margin-left: -50px;
			}
				#programacao img {
					margin-top: 70px;
					margin-left: -5px;
				}
			#parque {
				background:url(../images/conhecaoparque.png) no-repeat;	
				width: 400px;
				height: 343px;
				margin-left: 450px;
				margin-top: -343px;
			}
				#parque img {
					margin-top:100px;	
				}
			#bonusrevista {
				background:url(../images/bonuserevista.png) no-repeat;	
				width:470px;
				height:189px;
				margin-top:30px;
				margin-left:-50px;
			}
				#bonusimg {
					position:absolute;	
					top: 1250px;
					left: 220px;
				}
				#revistaimg {
					position:absolute;
					top: 1250px;
					left: 500px;
				}
			#facebook {
				background:url(../images/facebook.png) no-repeat;	
				width: 400px;
				height: 288px;
				margin-left: 450px;
				margin-top: -200px;
			}
				#facebook img {
					margin-top: 100px;
					margin-left: 50px;
				}
			#parceiros {
				background:url(../images/parceiros.png) no-repeat;
				width: 900px;
				height: 214px;
				margin-left: -50px;
				margin-top: -20px;
				margin-bottom:20px;
			}
				#parceiros ul {
					float:left;
					list-style:none;	
					margin-top: 130px;
					margin-left: 50px;
				}
					#parceiros ul li {
						float:left;
						list-style:none;
						margin-left:30px;
					}
	#rodape {
		background:url(../images/bgrodape.png);	
		width:1025px;
		height:132px;
	}
		#rodape img {
			position:absolute;
			top: 1400px;
			left: 160px;	
		}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

em cada resolucao a div fica numa posicao diferente

 

Informe a div que está tendo problemas para que fique mais rapido te ajudar

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

todas que tem a imagem com position absolute, pra você descobrir é só dar ctrl - , susse :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Complementando a dica do thiago, evite usar muito position, float também pode ajudar em alguns casos.

 

Outro detalhe, não tão importante assim mas é bom você saber:

 

- O site ta todo em PNG, ta demorando muito para carregar todas as imagens, ou você põe algumas em JPG/GIF ou diminui os tamanhos;

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Complementando a dica do thiago, evite usar muito position, float também pode ajudar em alguns casos.

 

Outro detalhe, não tão importante assim mas é bom você saber:

 

- O site ta todo em PNG, ta demorando muito para carregar todas as imagens, ou você põe algumas em JPG/GIF ou diminui os tamanhos;

 

ah vlw, quanto aos pngs, é pq eu só montei o layout pra demonstracao, quando for finalizar o site, só vai ser img oque realmente for pra ser img, e ainda vai ser jpg se possivel.

 

beleza, arrumei colocando margin, soh tem 2 problemas agora:

 

1)O logo do menu fica por baixo do banner, ja tentei aplicar z-index na div e na img mas nao resolve.

2)precisava posicionar a revista um pouco mais pra direita, mas se eu fizer isso desalinha o bonus.

 

Alguém se dispõe a ajudar? muito obrigado desde já :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

Quanto ao menu você colocou assim?

 

#menu{
	z-index:1;
}

#banner{
z-index:0;
}

 

- A imagem da revista se você colocar uma margin-left na #revistaimg axo que resolve...

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

eu tinha colocado z-index:1000000; no img, depois tentei na div da img, mas nao deu, vou tentar assim.

 

já tentei dar margin-left na revista, ela vai pra onde eu quero, mas dai o bonus sai do lugar tb.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marrabel    20

Marrabel
Postado

já tentei dar margin-left na revista, ela vai pra onde eu quero, mas dai o bonus sai do lugar tb.

 

Porque a div #bonusimg também possui margin

 

Tente relacionar bem estas imagens (incluindo a div pai), as vezes um padding resolve.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

beleza, vou ver essa questao do margin, quanto ao menu, tentei oque você disse e nao resolveu, oque eu faco ?

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