Problemao com imagens em DESIGN RESPONSIVO?

Eduardo_555 · Agosto 25, 2015

Ola

tenho uma imagem, insegrida no meu layout que era fixo e estou tentando trnasformar em responsivo

o problema e que todos os elementios estao funcionando, menos a imagem, alem de que ela cria uma enorma area vazia lateral, criando uma barra de rolagem enorme

vei um trecho do codigo,

oque eu queria era colocala no canto , e uma logo, bem pequena, porem com o layout fixo era facil, usava um

position:absolute;
top:tantantan;
left:tantantan;

heigth:tatata;
width:tatata;

assim ja funfava

olha como esta meu codigo

.logo{
	width:130px;
	height:130px;
}
.logo img{
	max-width:100%;
	height:auto;
}

tenho a div de class logo e a img

tentei forçala ela ate fika do tamanho mas com vou posicionala assim ela carrega onde quer, e se eu travo ela como antes ela nao redimensiona e agora??

rikaschmitt · Agosto 25, 2015

Entendi nada.

Eduardo_555 · Agosto 25, 2015

massa

kkkk

é o seguinte

tenho uma imgem que desejo usala como logo

ela deve ficar posicioanada no canto direito e superior da tela.

antes, quando usava um layout fixo, ou seja ele nao se adaptava aos diferentes monitores, eu fasia assim

position:absolute;
top:50px;
left:900px;

//*valores nao reais usados para exemplificar*//

Assim ela se posicionava no canto direito da tela.

porem com design responsivo nao posso usar o position:absolute.

quando executado em monitor com resoluçao menor, a imagem acaba ficando cortada.

o codigo que fiz para a imagem foi esse

.logo{
	width:130px;
	height:130px;
}
.logo img{
	max-width:100%;
	height:auto;
}

e no html assim

<div class="logo">
		<img src="midia/LL.png"/>
	</div>

e assim ela nao fica no canto, fica la embaixo como se fosse o ultimo elemento do site

como conserto isso??

rikaschmitt · Agosto 25, 2015

tem como postar o código de toda a página e o css?

se puder uma versão online, melhor ainda...

deve ter algum conflito de posição de divs ai..

Eduardo_555 · Agosto 26, 2015

<DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width:device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Seleçao de categoria</title>
<link rel="stylesheet" href="style123456789/inicio.css"/>
<script language="javascript">
	function disableselect(e){
		return false
		}
		function reEnable(){
		return true
		}
//if IE4+
	document.onselectstart=new Function ("return false")
	document.oncontextmenu=new Function ("return false")
//if NS6	
	if (window.sidebar){
	document.onmousedown=disableselect
	dosument.onclick=reEnable
	}
</script>
</head>
<body class="fadeIn">

	<h1>SELECIONE SUA CATEGORIA</h1>
	<div class="pagina">
		<div class="container">
		<div class="barra">
			<div class="linha">
				<div class="tile vermelho">
					<a href="menu.html" style="color:#FFFFFF" style="text-decoration:none"><span>FRIGORÍFICO</span></a>
					<div class="tileico">
					<a href="menu.html"><img src="midia/suino_bordo.png" width="50" height="50"></a>
				</div>
				</div>
				<div class="tile azul">
					<a href="AVISO DE VERSAO.html" style="color:#FFFFFF"><span>LACTICÍNIOS</span></a>
					<div class="tileico">
					<a href="AVISO DE VERSAO.html"><img src="midia/queijo_bordo.png" width="45" height="45"></a>
				</div>
				</div>
				<div class="tile verde_desbot">
					<a href="AVISO DE VERSAO.html" style="color:#FFFFFF"><span>BOVINO</span></a>
					<div class="tileico">
					<a href="AVISO DE VERSAO.html"><img src="midia/boi_bordo.png" width="45" height="45"></a>
				</div>
				</div>
				<div class="tile marrom">
					<a href="AVISO DE VERSAO.html" style="color:#FFFFFF"><span>AVES</span></a>
					<div class="tileico">
					<a href="AVISO DE VERSAO.html"><img src="midia/galinha_bordo.png" width="45" height="45"></a>
				</div>
				</div>
				<div class="tile ceu">
					<a href="AVISO DE VERSAO.html" style="color:#FFFFFF"><span>INDUSTRIA DE MASSAS</span></a>
					<div class="tileico">
					<a href="AVISO DE VERSAO.html"><img src="midia/massa_bordo.png" width="45" height="45"></a>
				</div>
				</div>
				<div class="tile rosa">
					<a href="AVISO DE VERSAO.html" style="color:#FFFFFF"><span>TRANSPORTADORAS</span></a>
					<div class="tileico">
					<a href="AVISO DE VERSAO.html"><img src="midia/tranportadora_bordo.png" width="45" height="45"></a>
				</div>
				</div>
		</div>		
</div>
</div>
</div>
	<div class="logo">
		<img src="midia/LL.png"/>
	</div>
	<div class="retorno">
		<a href="login.html"><img src="midia/sair.png" width="50px" height="50px"/>
	</div>
	<div id="sair">
		SAIR
	</div>
	<div id="referncia">
		<h6>tttttttttttttttttttttttttttttttttt v 1.0<h6>
	</div>
	
</body>
</html>

Este e o html,

a:link{
	color:#000000;
	text-decoration:none;
}

body{
	overflow-x:hidden;
	width:100%;
	font-family: 'Fjalla One', sans-serif;
	background:#a1312f;
	color: #000000;
	padding: 0%;

}
.padding{
	width:100%;
	overflow-x: auto;
	height:100%;
}
.linha{
	text-align:center;
	width:auto;
	padding: 0.1464128843338214%;
	height: 8.052708638360176%;
	display: table;
	text-decoration:none;
	margin:14.64128843338214% 0% 0% 14.64128843338214%;
}
.tile{
	border-radius:0.7em;
	height:100px;
	width:152px;
	float:left;
	margin:0 10px 0 0;
	padding:0.1464128843338214%;
}
.tileico{
	background:#ffffff;
	height:50px;
	width:80px;
	margin:20px 10px 0px 30px;
	border-radius:0.7em;
}
.logo{
	position:absolute;
	top:3.660322108345534%;
	left:87.84773060029283%;
	width:130px;
	height:130px;
}
.logo img{
	max-width:100%;
	height:auto;
}
.retorno{
	margin:10% 0% 0% 3%;
	padding:0%;
	
}
.tile:hover{
	background:#BEBEBE;
}
.tilelargo{
	width:319px;
}
.amarelo{
	background: #E8E8E8;
}
.vermelho{
	background:#E9967A;
}
.azul{
	background:#4682B4;
}
.ciano{
	background:#5F9EA0;
}
.verde_desbot{
	background:#8FBC8F;
}
.rosa{
	background:#9370DB;
}
.marrom{
	background:#DEB887;
}
.ceu{
	background:#ADD8E6;
}
h1{
	color:#FFFFFF;
}
.selecionado{
	background-color: #FFFFFF;
}
#sair{
	margin:0% 0% 0% 3.60%;
	color:#FFFFFF;
	text-decoration:none;
}
h6{
	color:#FFFFFF;
	position:relative;
	left:38.06734992679356%;
	bottom:0em;
	font-size:0.875em;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; } 
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fadeIn {
-webkit-animation: fadeIn 2s ease-in-out;
-moz-animation: fadeIn 2s ease-in-out;
-o-animation: fadeIn 2s ease-in-out;
animation: fadeIn 2s ease-in-out;
}

este e o css;

pmmartinelli · Agosto 26, 2015

Bom... não sei se entendi ao certo a necessidade mas...

Para posicionar uma imagem à direita existem várias formas de fazer.

Aproveitando o teu código, talvez basta você substituir o "left: 900px" por "right: 0". Isto fará com que a imagem, ao invés de calcular 900px(fixo) a partir da esquerda, calculará 0px a partir da direita, independente da resolução.

Outra forma é usar "float: right" ao invés de "position: absolute" e dispensar o "left".

Mas uma das coisas principais é: Se você deseja que o logo apareça acima dos demais elementos, coloque o código dele acima do código dos outros elementos e não precisará se preocupar com "top".

Eduardo_555 · Agosto 26, 2015

valeu pela ajuda, mas acabeireescrevendo tudo, ja tava meio perdido, e bugava em otras resoluçaoes

agora to tentando organiza como falasse com a oredem certinha das divs

pmmartinelli · Agosto 26, 2015

Blz. Qualquer coisa, grita ai! :D

Arquivado

Problemao com imagens em DESIGN RESPONSIVO?

Recommended Posts

Eduardo_555 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo_555 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo_555 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

pmmartinelli 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo_555 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

pmmartinelli 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Conteúdo Similar

Fóruns

Tempo Real

Informação importante