Ir para conteúdo

POWERED BY:

Arquivado

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

kaamus

problema com imagens liquidas

Recommended Posts

eaeww galera, beleza?!

 

minha dúvida é o seguinte, to com um layout aqui q tá uma beleza! Só que as minhas imagens non acompanham, ou seja, não estão liquidas =/

não sei como eu faço pra ajustar as imagens de acordo com o layout.

 

qualquer ajuda aew é válida!

valewww =]

Compartilhar este post


Link para o post
Compartilhar em outros sites

coloca um link ai, fica mais fácil pra gente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

coloca um link ai, fica mais fácil pra gente.

opa! to sem link ainda não passei pro servidor, to fazendo reconstrução do site!

daí quando tiver pronto que vai pro ar já =]

mais o problema em detalhe é que meu layout é liquido então ele estende! mais minha imagem tem um tamanho fixo de 700px se não me engano.......Daí o que acontece é quando estende o layout que vai de acordo com a resolução a imagem não acompanha e fica meio que duplicada.

 

valew pela atenção http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

 

ouvi dizer sobre plugins pro gimp que ajudam nessa parte........ já que eu usei o gimp pra editar, pensei em usar essa forma.... mais não deu em nada! http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, não sei se tem como aumentar a imagem de acordo com a resolução, o que faço é colocar uma imagem de background com resolução de tipo 1400 x xxx centralizada ai a informação principal da imagem coloco no centro, quando a resulução aumenta ele mostra as laterais que fazem parte da imagem, tipo submarino.com.br por exemplo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, não sei se tem como aumentar a imagem de acordo com a resolução, o que faço é colocar uma imagem de background com resolução de tipo 1400 x xxx centralizada ai a informação principal da imagem coloco no centro, quando a resulução aumenta ele mostra as laterais que fazem parte da imagem, tipo submarino.com.br por exemplo.

bom, não entendi muito a idéia! porque são duas imagens que eu to usando, uma no topo e outra no rodapé.......... ia colocar uma na lateral, mais o flash me ajudou e como o menu ficou extenso não precisa http://forum.imasters.com.br/public/style_emoticons/default/grin.gif ............ o que eu entendi foi colocar as imagens junto ao fundo, sei lá ainda to meio confuso! :huh:

Compartilhar este post


Link para o post
Compartilhar em outros sites
CODE

opa amigo!
então melhor eu postar mais ou menos como eu to fazendo

#topo{
display:block;
background: #000000 url(topob.jpg) center;
height:180px;
margin-bottom: 0px;


exemplo de site pra vcs darem uma olhada na minha idéia:
http://www.htsti.com.br/

eu tenho um topo que nem esse banner da hartech, só que o meu topo ta com uma largura de 700px..............daí o que acontece é que numa resolução
1280x1024 que é a do meu monitor por exemplo, ela começa a repetir na tela porque ela só tem 700px de largura............... entenderam?

Compartilhar este post


Link para o post
Compartilhar em outros sites

insere o no-repeat ak.

 

 

background: #000000 url(topob.jpg) no-repeat center;

Compartilhar este post


Link para o post
Compartilhar em outros sites

então já pensei nisso só que daí o meu fundo não estende................. fica o 700px de imagem e o fundo na cor definida que em #000..... ai que tá, queria que ela extendesse para os lados do topo! =]

Compartilhar este post


Link para o post
Compartilhar em outros sites

sinceramente, sem ver é complicado, mas olhas você tem tres alternativas, se for uma imagem só que não pode se repetir, então você tem que fixar o layout, se for imagem que pode repetir então ai sim voce pode usar layout liquido, ou também em layout liquido você fixar a imagem de fundo no centro e colocar cor no fundo, ai depende do seu layout

Compartilhar este post


Link para o post
Compartilhar em outros sites

sinceramente, sem ver é complicado, mas olhas você tem tres alternativas, se for uma imagem só que não pode se repetir, então você tem que fixar o layout, se for imagem que pode repetir então ai sim voce pode usar layout liquido, ou também em layout liquido você fixar a imagem de fundo no centro e colocar cor no fundo, ai depende do seu layout

ok! isso de colocar a imagem no centro e colocar cor não fica muito bom............é que nem o site da hartech que eu mostrei, meu layout tinha que fazer meu "banner" obedecer ao tamanho da resolução! aumentando junto com o layout............é no fixo eu sei que aumenta, só que daí eu teria que fazer um layout elástico...... mais não entendo muito ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Visitei o site do exemplo e eles usam layout fixo, faz seu layout fixo que funciona, testa ai coloca fixo e diminui a resolução para 800 x 600.

Compartilhar este post


Link para o post
Compartilhar em outros sites

ah sim! mais meu layout já está em liquido, porque eu até tentei fazer um fixo só que distorceu....... em liquido, qual opções que eu teria pra tah aumentando a imagem? pode me dar um exemplo de site(ah! aquele do submarino eu naum entendi a idéia)? ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

CODE

opa amigo!

então melhor eu postar mais ou menos como eu to fazendo

 

#topo{

display:block;

background: #000000 url(topob.jpg) center;

height:180px;

margin-bottom: 0px;

 

exemplo de site pra vcs darem uma olhada na minha idéia:

http://www.htsti.com.br/

 

eu tenho um topo que nem esse banner da hartech, só que o meu topo ta com uma largura de 700px..............daí o que acontece é que numa resolução

1280x1024 que é a do meu monitor por exemplo, ela começa a repetir na tela porque ela só tem 700px de largura............... entenderam?

oie!

Essencial para layouts líquidos, até onde eu saiba, são larguras que se expandem ou se contraem a partir do redirecionamento da janela do seu navegador.Correto? Então você deve ter utilizado para a div desejada

valores em porcentagem para a largura.

Com base nisso, a div de suas imagens devem seguir o mesmo padrão que a div onde estarão contidas.

Ou seja, é necessário criar uma div para as imagens dentro da div onde elas serão estruturadas.

Aí você dá uma largura em porcentagem a ela e uma altura fixa. você tb tem de preparar a imagem com uma largura suficiente para abranger a largura máxima do seu layout.

Tenta fazer isso tb:

[/code]
background: #000000 url(topob.jpg) no-repeat center center; 
[code]
aí ela vai ficar centralizada vertical e horizontalmente.

 

Olha eu sou nova por aqui, ainda stou aprendendo css..mas fiz um site para mim com a estrutura em layout líquido, se você quiser passar lah e observa a css para se basear na estruturação ao menos, se puder ajudar neh.

Xau

 

www.ffesi.com

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi bom dia! ainda não me esqueci do problema com as imagens liquidas! aeuheuheaueheuah!!!

 

Fesi, não é bem isso o que eu quero...... no meu caso a sua dica não se aplica, mais muito obrigado pela ajuda =]

Bom, pensei aqui num modo mais daí é gambiarra! =]

que seria... colocar uma imagem de fundo que repete, e coloca a minha posicionada a direita.. huaeheauahe!......

mais nem ficaria tão bom!

bom...... se alguem ainda puder ajudar =/

 

vlwww... ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

seria algo mais ou menos assim??

 

#topo{
background: #000000 url(topob.jpg);
width:800px;
height:120px;
}
#topo .top{
width:200px;
height:100px;
background: #000000 url(banner.jpg) right no-repeat;
}

<div id="topo">
<div class="top"></div>
</div>

falow ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

seria algo mais ou menos assim??

 

#topo{
background: #000000 url(topob.jpg);
width:800px;
height:120px;
}
#topo .top{
width:200px;
height:100px;
background: #000000 url(banner.jpg) right no-repeat;
}

<div id="topo">
<div class="top"></div>
</div>

falow ;)

 

gambiarra?? =]

 

uheuhaeuahuahuh!

orra! tá dificil aqui...... na verdade queria que estendesse a imagem do topo silverfox =]

 

 

putz... será que não tem nem um modo de eu aplicar porcentagem na foto???

as imagens só se estendem no layout fixo =/

Compartilhar este post


Link para o post
Compartilhar em outros sites

se eu fizesse algo assim:

 

CODE

 

#imagem {

width: 100%;

height: auto;

}

 

com uma id fechando no corpo, iria deslocar né??

 

 

queria algo assim........... pra comandar a porcentagem =]

Compartilhar este post


Link para o post
Compartilhar em outros sites

E ai tudo bem?

 

Então pelo que testei ak esse comando distorce a imagem, da o efeito que você falou mas distorce e pode perder resolução, acho que não a melhor maneira não.

 

 

abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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