Minimizo a tela o elementos saem fora de lugar

Damon · Dezembro 3, 2013

Alguém sabe me falar se tem alguma função no javascrpt para segurar para meus elementos dos css não saírem fora do lugar quando minimizo a tela ?

Se não tiver alguém pode me ajudar a encontra o meu erro no css, quando eu minimizo a tela os elementos estão saindo fora de lugar.

Desde de já agradeço.

Código

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

*{
	margin:0;
	padding:0;
	
}

#tudo{
	width:100%;
	height:1400px;
	border-color:#000;
	overflow-x: hidden;
	overflow-y: hidden;
	
	
}

#topo{
	width:100%;
	height:160px;
	
}
.log{
	background-image:url(imagens/Logo.png);
	margin:4px auto;
	float:left;
	width:280px;
	height:130px;
	
	
	}
/*Linha do topo verde*/
.topo-boder{
	width:100%;
	height:5px;
	background-color:#093;
	
	
	}
.menu{
	list-style:none;
	margin:60px;
	margin-left:500px;
		
	
			
	}
.menu li {
	float:left;
	border-left:1px solid #093;
	border-right:1px solid #093;
	background: #FFF;
	position:relative;
	
}

.menu li a{
	color:#000;
	text-decoration:none;
	padding:5px 10px; 
	display:block;
	
}
.menu li a:hover{
	background:#093;
	color:#ccc;	
}
.menu li ul {
	list-style:none;
	display:none;
	position:absolute;
	z-index:2;
	
}
.menu li ul li {
	display:block;
	width:150px;
	z-index:3;

	
	}

	
	
.banner{
	margin:170px auto;
	background-image:url(imagens/banner.png);
	width:100%;
	height:400px;
	

	
	
	
}


/*BOX*/
/*controla o curso do Slaids*/
.box{
	width:960px;
	margin:0 auto;
	position:relative;
	
	
}

.chat{
	float:right;
	width:136;
	height:360;
	margin-right:10px;
	
	
}
.chat1{
	
	background-image:url(imagens/chat.png);
	background-size:160px 169px;
	width:136;
	height:169;
	margin:10px auto;
	
	
}

	
	
	
/*SLAIDS*/
	
.slaids{
	float:left;
	width:750px;
	height:350px;
	margin-left:-30px;
	position:absolute;
	z-index:1;
	
	
	
	
	
	}
	
.slaids-itens{
	
	width:700px;
	height:310px;
	margin:40px;
	overflow:hidden;
	


}


/*PAGER*/
/* curso do sliads*/
.pager{
	position:absolute;
	z-index:0;
	top:110px;
	right:190px;
	
	
	
	
}
/*transfornando o formato do curso*/
.pager a{
	display:block;
	width:5px;
	right:5px;
	padding:8px;
	border-radius:100%;
	-moz-border-radius:100%;
	-webkit-border-radius:100%;
	background:#CCC;
	margin:10px 3px;
	cursor:pointer;	
	
}
/*cor do cursor do slaids a ação do mause */
.pager a:hover{ 
	background:#063;
	
}
/*cor do cursor do slaids sem mause */
.pager a.slaidativado{ 
	background:#063;
	
}

	



/* conteudo de baixo do slaids*/
#conteudo{
	width:100%;
	height:200px;
	background-image:url(imagens/conteudo.png);
	margin:-170px;
	margin-left:5px;
	
	
}
.imagem1 {
	float:left;
	margin:25px;
	

	
	
	
}
/*Titulos*/
.I{
	float:left;
	font: 16px "Trebuchet MS"; 
	color:#060;
	width:1px;
	margin:20px auto;
	margin-left:0px;
	
	
}
/*Testo depois do titulo*/
.texto{
	float:left;
	margin:80px auto;
	margin-left:0px;
	width:100px;
	font:11px Segoe, "Segoe UI", "DejaVu Sans", Verdana, sans-serif;
	color:#666;
	border-color:#000;
	border-left:#000;
	
	
	}
		

.imagem2{
	float:left;
	padding: 5px;
	margin:20px;
	border-left-color:#090;
	
	

}
.I1{
	float:left;
	font: 16px "Trebuchet MS"; 
	color:#060;
	width:1px;
	margin:20px auto;
	margin-left:0px;
	
	
}
.texto1{
	float:left;
	margin:45px auto;
	margin-left:0px;
	padding:0px 1px;
	width:110px;
	font:11px Segoe, "Segoe UI", "DejaVu Sans", Verdana, sans-serif;
	color:#666;
	
	
	
	}
	
	
	


.imagem3{
	
	float:left;
	margin:30px;
	
	
	}
	
.I2{
	float:left;
	font: 16px "Trebuchet MS"; 
	color:#060;
	width:1px;
	margin:20px auto;
	margin-left:0px;
	
	
}
.texto2{
	float:left;
	margin:45px auto;
	margin-left:0px;
	width:98px;
	font:11px Segoe, "Segoe UI", "DejaVu Sans", Verdana, sans-serif;
	color:#666;
	
	
	
	}
	
.imagem4{
	float:left;
	margin:25px;
		
	
	
}
.I3{
	float:left;
	font: 16px "Trebuchet MS"; 
	color:#060;
	width:1px;
	margin:20px auto;
	margin-left:0px;
	
	
}
.texto3{
	float:left;
	margin:45px auto;
	margin-left:0px;
	margin-right:5px;
	width:110px;
	font:11px Segoe, "Segoe UI", "DejaVu Sans", Verdana, sans-serif;
	color:#666;

	}	
	
/*Imagem depois do texto link*/

img.saibamais {
	margin:10px auto;		
    opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)

}


img.saibamais:hover {
opacity: 0.2; 
-moz-opacity: 0.2;
Filter: Alpha(Opacity=900)
}


img.saibamais1 {
	margin:28px auto;		
opacity: 3.0; 
-moz-opacity: 3.0;
Filter: Alpha(Opacity=1000)

}


img.saibamais1:hover {
opacity: 0.2; 
-moz-opacity: 0.2;
Filter: Alpha(Opacity=900)
}

img.saibamais3 {
	margin:23px auto;		
opacity: 3.0; 
-moz-opacity: 3.0;
Filter: Alpha(Opacity=1000)

}


img.saibamais3:hover {
opacity: 0.2; 
-moz-opacity: 0.2;
Filter: Alpha(Opacity=900)
}

img.saibamais4 {
	margin:10px auto;		
opacity: 3.0; 
-moz-opacity: 3.0;
Filter: Alpha(Opacity=1000)

}


img.saibamais4:hover {
opacity: 0.2; 
-moz-opacity: 0.2;
Filter: Alpha(Opacity=900)
}

.Itens{
	width:100%;
	height:500px;
	margin-top:170px;
	border-color:2px inherit #999;
	margin-left:5px;
	background-image:url(imagens/fundo.png);

}
.cartao{
	background-image:url(imagens/cartao.png);
	width:145px;
	height:80px;
	margin:20px;
	position:relative;
	
	
}
.cartao_t{
	float:left;
	width:300px;
	height:5px;
	margin:-20px;
	margin-left:10px;
	color:#063;
	opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)
	
	}
.textoc:hover{
	 opacity: 0.3; 
    -moz-opacity: 0.3;
    Filter: Alpha(Opacity=600)
	
}	
.textoc{
	float:left;
	margin:10px;
	width:250px;
	height:30px;
	font: 14px "Trebuchet MS"; 
	color:#666;
	margin-left:10px;
	text-justify:auto;
	opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)
	
}

.blog{
	float:left;
	background-image:url(imagens/blog.png);
	width:200px;
	height:50px;
	margin:-90px;
	margin-left:60px;
	
	
}
.blog_titulo{
	float:left;
	width:300px;
	height:5px;
	margin:60px;
	margin-left:10px;
	color:#063;
		
	}
.texto-b:hover{
	 opacity: 0.3; 
    -moz-opacity: 0.3;
    Filter: Alpha(Opacity=600)
	
}	
.texto-b{
	float:left;
	margin:-10px;
	width:250px;
	height:30px;
	font: 14px "Trebuchet MS"; 
	color:#666;
	margin-left:10px;
	text-justify:auto;
	opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)
	
}

.blog_titulo1{
	float:left;
	width:300px;
	height:5px;
	margin:30px;
	margin-left:10px;
	color:#063;
		
	}
.texto-b1:hover{
	 opacity: 0.3; 
    -moz-opacity: 0.3;
    Filter: Alpha(Opacity=600)
	
}	
.texto-b1{
	float:left;
	margin:10px;
	width:250px;
	height:30px;
	font: 14px "Trebuchet MS"; 
	color:#666;
	margin-left:10px;
	text-justify:auto;
	opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)
	
}

.mapa{
	background-image:url(imagens/mapa.png);
	width:215px;
	height:276px;
	float:right;
	margin:-95px;
	margin-right:20px;


}

.fechadura{
	background-image:url(imagens/fechadura.png);
	width:66px;
	height:118px;
	margin:180px;
	position:absolute;
	margin-left:10px;

}

.fechadura_h{
	float:left;
	width:250px;
	height:5px;
	margin:-5px;
	margin-left:40px;
	color:#063;
	opacity: 3.0; 
   -moz-opacity: 3.0;
    Filter: Alpha(Opacity=1000)
}
.fechadura_t{
	float:left;
	width:200px;
	height:10px;
	margin:40px;
	margin-left:70px;
	color:#666;
	font: 14px"Trebuchet MS";
	
	
}

.rodape{
	background-image:url(imagens/rodape.png);
	width:100%;
	height:130px;
	margin:2px auto;
	margin-bottom:5px;
    border-bottom::1px solid #093;



	
	
	
}

:

Wanderson Valerio · Dezembro 3, 2013

Seria gambiarra de mais da conta usar Javascript, o correto seria você desenvolver uma estrutura em HTML e CSS que suportasse isso.

Damon · Dezembro 4, 2013

Seria gambiarra de mais da conta usar Javascript, o correto seria você desenvolver uma estrutura em HTML e CSS que suportasse isso.

Você viu algum erro no código acima meu caro o seria só uma opinião mesmo?

YFilus · Dezembro 4, 2013

Com os dados que você enviou Damon, fica difícil saber o que está acontecendo. Nunca vi um site perder a formatação quando é minimizado. Talvez quando o tamanho do navegador é alterado, mas minimizado não.

Vi um erro de css ali, mas não sei se é isso o problema:


.chat{
	float:right;
	width:136;
	height:360;
	margin-right:10px;
}
.chat1{
	
	background-image:url(imagens/chat.png);
	background-size:160px 169px;
	width:136;
	height:169;
	margin:10px auto;
}

Faltou a métrica do width e height (px provavelmente).

E o nosso amigo Wanderson está correto. Se isto está ocorrendo, deve ser um problema de CSS. Se você tiver o site hospedado em algum lugar, ou um jsFiddle dele, ficaria mais fácil.

Até mais.

Wanderson Valerio · Dezembro 4, 2013

Você viu algum erro no código acima meu caro o seria só uma opinião mesmo?

Está mais para teria do que para opinião, é quase que uma regra que devemos seguir nesses casos.

Algumas princípios básicos:

Sempre defina largura, mas não altura (Dependendo de muitos fatores e dos objetivos)
Dependendo do projeto, use float left ou right para posicionar (ou flutuar) os elementos
Use um CSS reset

Damon · Dezembro 4, 2013

Com os dados que você enviou Damon, fica difícil saber o que está acontecendo. Nunca vi um site perder a formatação quando é minimizado. Talvez quando o tamanho do navegador é alterado, mas minimizado não.

Vi um erro de css ali, mas não sei se é isso o problema:
.chat{
	float:right;
	width:136;
	height:360;
	margin-right:10px;
}
.chat1{
	
	background-image:url(imagens/chat.png);
	background-size:160px 169px;
	width:136;
	height:169;
	margin:10px auto;
}
Faltou a métrica do width e height (px provavelmente).

E o nosso amigo Wanderson está correto. Se isto está ocorrendo, deve ser um problema de CSS. Se você tiver o site hospedado em algum lugar, ou um jsFiddle dele, ficaria mais fácil.

Até mais.

Obrigado Yiru por me lembra dos px, mas infelizmente eles não são o problema :(

Ele ainda não esta hospedado não estou testo ele no servidor local mesmo. Eu tentei criar o jsFiddle não sei se criei corretamente por que hoje é a primeira vez que uso essa ferramenta. Vou te passar aqui

http://jsfiddle.net/#&togetherjs=pbaidK6hlM

Obrigado

Está mais para teria do que para opinião, é quase que uma regra que devemos seguir nesses casos.

Algumas princípios básicos:

Sempre defina largura, mas não altura (Dependendo de muitos fatores e dos objetivos)

Dependendo do projeto, use float left ou right para posicionar (ou flutuar) os elementos

Use um CSS reset

Obrigado pela adica Wanderson mas tirando css reset acho que outras regras já estou utilizando.

Damon · Dezembro 4, 2013

Somente os elementos da direita estão saindo fora do lugar quando minimizo a tela !!

YFilus · Dezembro 4, 2013

Consegue postar o html da sua página aqui também?

Assim tento ver o que está ocorrendo.

Até mais.

Damon · Dezembro 4, 2013

Consegue postar o html da sua página aqui também?

Assim tento ver o que está ocorrendo.

Até mais.


<

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina Principal</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.cycle.all.latest.js"></script>
<script language="JavaScript" src="javaScript.js"></script>

</head>

<body>
<div class="tudo">
 <div class="topo">
 <div class="topo-boder"></div>
   <div class="log"></div>
	<div class="conteudo"> 
      <ul class= "menu">
      	<li class ="h"><a href="#"><span>Home</samp></a></li>
        <li class="empresa"><a href="#"><span>Empresa</samp></a>
        	<ul class="sub">
            <li><a href="#"><span>Historico</samp></a></li>
            <li><a href="#"><span>Localização</samp></a></li>
        	</ul>
        </li>
        <li class = "parent"><a href="#"><span>Produtos</samp></a>
        	<ul class= "submenu">
            <li><a href="#"><span>xxxx</samp></a></li>
            <li><a href="#"><span>xxxxxxx</samp></a></li>
            <li><a href="#"><span>xxxxxxxx</samp></a></li>
            <li><a href="#"><span>xxxxxxxx</samp></a></li>
            <li><a href="#"><span>xxxxxxx</samp></a></li>
            </ul>
        
        </li>
        
        <li><a href="#"><span>Chat</samp></a></li>
        <li><a href="#"><span>Contato</samp></a></li>
        <li><a href="#"><span>Download</samp></a></li>
	</div>
    <div class="box">
    <span class="pager"></span>
    </div>
    <div class="banner">
   
    <div class="chat"><div class="chat1"></div>
    <img src="imagens/chat1.png" class="chat2"></div>
    <div class="slaids">
       <div class="slaids-itens">
    	<ul>
          <li><img src="imagens/xxxxx_banner.png" alt=""/></li> 
           <li><img src="imagens/xxx_banner.png" alt=""/></li> 
           <li><img src="imagens/xxxxx-banner.png" alt=""/></li>
            <li><img src="imagens/xxxx-banner.png" alt=""/></li>
        	          
       
        </ul>
	</div>
   </div>
   </div> 

    
    
    <div id="conteudo">
       	<div class="border"> 
        	<div class="imagem1"><img src="imagens/xxxx.png" alt=""/>
        	</div>
        	<h3 class="I">xxxxxxxxxxxx</h3>
        	<p><span class="texto">xxxxxxxxxxxxxxxxxxxxxxxxx
        	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        	<a href="#"><img src="imagens/bt_saiba_mais.gif" class="saibamais1"/>
            </a></span>
        </div>  
      
         
         
        
        	<div class="imagem2"><img src="imagens/xxxxxxxxx.png" alt=""/></div>
        	<h3 class="I1">xxxxxx </h3>
        	<p><span class="texto1">xxxxxxxxxxxxxxxxx
        	<a href="#"><img src="imagens/bt_saiba_mais.gif" class="saibamais"/>
        	</a></span>
        
       
      
       		<div class="imagem3"><img src="imagens/xxxxxx.png" alt=""/></div>
        	<h3 class="I2">xxxxxxx</h3>
        	<p><span class="texto2">xxxxxxxxxxxxxxxxxxxxxx.
        	<a href="#"><img src="imagens/bt_saiba_mais.gif" class="saibamais3"/>
        	</a></span>
       
        
      
        	<div class="imagem4"><img src="imagens/ponto4.png" alt=""/></div>
         	<h3 class="I3">xxxxxxxxx</h3>
       		 <p><span class="texto3"> xxxxxxxxxxxxxxxxxxxxxxxxxxxx. 
     		 <a href="#"><img src="imagens/bt_saiba_mais.gif" class="saibamais4"/>
      		</a></span></p>
             
   </div>
   <div class="Itens">
   		<div class="cartao">
        	<h3 class="cartao_t"> xxxxxxxxxx</h3>
        	<span class="textoc">
             xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
            </span>
            <div class="fechadura"><h3 class="fechadura_h">xxxxxxxxxxxx</h3>
            <span class="fechadura_t"> xxxxxxxxxxxxxxxxx... </span>
            </div>
        
         </div>
   		<div class="blog"> 
            <h3 class="blog_titulo">xxxxxxxxxxxxxxx</h3>
            <span class="texto-b">xxxxxxxxxxxxxxxxxxxxxxxx</span>
             <h3 class="blog_titulo1">xxxxxxxxxxxxxxxxxxxxxxxx/h3>
            <span class="texto-b1"xxxxxxxxxxxxxxxxxxxxxx </span>
        
        </div>
      	<div class="mapa"> </div>
   </div>
    <div class= "rodape">
    		
    
    
    </div>
   </div>
 </div>
</body>
</html>

Então Yiru

Cara conseguir resolver com position:relative em alguns conteúdos no firefox que é o que eu executo ele esta perfeito, porem quando eu abri com chrome o meu menu sai pouquinha coisa do lugar, agora no E7 ainda persiste o erros.

Estranho..

Sera que eu tenho que executa com cada navegador? Vou fazendo teste aqui.

Obrigado pela atenção.

YFilus · Dezembro 4, 2013

Pelo que eu vi aqui Damon, quando você diminui a largura do navegador, os elementos da direita ficam sem espaço, e vão para baixo.

Isto ocorre porque você montou o CSS somente com base na resolução de seu monitor.

Quando criamos um site com 100% da largura do navegador, precisamos ter muito cuidado com isso. E diria que essa é uma tarefa mais complexa. Então sugiro manter as coisas simples por hora :)

Pegue o conteúdo do site, e englobe uma div com largura fixa, e a centralize.

Algo estilo:

<div class="pai">
     <div class="content">
       ...
     </div>
</div>

.pai { width: 960px; margin: 0 auto; }

Mas por que 960px de largura? (meu porque ta certo?)

http://gs.statcounter.com/#resolution-BR-monthly-201306-201311

Espero ter ajudado.

Arquivado

Minimizo a tela o elementos saem fora de lugar

Recommended Posts

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

YFilus 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

YFilus 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

YFilus 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Fóruns

Tempo Real

Informação importante