Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
} 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??
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;
} 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??
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..
<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'](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
} document.onselectstart=new Function ("return false")
document.oncontextmenu=new Function ("return false") 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;
} max-width:100%;
height:auto;
}
.retorno{
margin:10% 0% 0% 3%;
padding:0%;
} 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;
} color:#FFFFFF;
}
.selecionado{
background-color: #FFFFFF;
}
#sair{
margin:0% 0% 0% 3.60%;
color:#FFFFFF;
text-decoration:none;
} color:#FFFFFF;
position:relative;
left:38.06734992679356%;
bottom:0em;
font-size:0.875em;
}.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;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".
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
Blz. Qualquer coisa, grita ai! :D
Entendi nada.