Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde Srs...
Como poderia fazer para evitar que a ampliação da imagem ,através da ampliação do navegador ,estrague a posição das minhas informações(da planilha) que estavam propositalmente colocadas em cima do mapa?
<table id='estados' background='mapa_brasil.png' border='1'>
<tr>
<td>dados 1a <td> <td>dados 2a <td> <td>dados 3a <td>
</tr>
<tr>
<td>dados 1b<td> <td>dados 2b <td> <td>dados 3b <td>
</tr>
</table>
<style>
#estados {
width:85%;
height:180%;
position:absolute;
max-width: 85%;
}
</style>
obs.:desculpe por colocar o script fora do local correto....é pq estava dando erro para coloca-lo.
obgdBoa noite Gabriel,
N precisa se preocupar com oq eu postei anteriormente....
Oq eu qro é colocar. Algumas informaçoes por cima de uma imagem(imagem de fundo )
Por exemplo...qro colocar a imagem do mapa do brasil
E por cima colocar algumas bolinhas verdes e outras vermelhas em certos estados..
E pra isso estou usando uma planilha por cima da imagem
E depois estou colocando border='0'
Para n aparecer as linhas da planilha...so as bolinhas mesmo..
Mas ...qdo visualizo em monitores diferentes...fica td fora das posicoes
Entao qria saber oq colocar. No css
Para evitar essa pane
O id da imagem eh id=imagem
E o id da planilha q vai por cima com as bolinhas em cada campo...eh id=planilha
Como deveria ficar meu <style>
#imagem{ }
#planilha{ }
<\style>
?Faz um tempo que eu não trabalho com HTML/CSS, mas eu procuraria criar um elemento (tag div) aonde a imagem estaria inserida.
Essa div, teria que ter position relative ou absolute. E, sobre a imagem, iriam os elementos com o position absolute.
A div deve ter uma das duas positions, para que as demais imagens, que iria sobrepor a imagem original, utilizem a div como referência.
Seria algo assim:
#background
{
background-image: url("image.jpg");
height: 500px;
position: relative;
width: 1000px;
}
.draw position: absolute;
}
HTML
<div id="background">
<img src="image.jpg" class="draw img1" />
<img src="image.jpg" class="draw img2" />
<img src="image.jpg" class="draw img3" />
</div>
E, para cada imagem, controle o position dela.draw.img1
{
left: 500;
top: 50;
}
Acredito que assim não terá problemas com o redimensionamento.OBGD!!!Gabriel..deu certo!!
aliás..sempre dá certo com vcs!!!
@marcos123
O tópico já foi resolvido e você postou um link dizendo que ali explica como fazer,
mas o link é para a Home do seu Blog.
Você se registrou no fórum hoje e já fez 8 posts com o link para seu Blog.
Leia as regras do fórum em: https://forum.imasters.com.br/guidelines/
Terá que nos fornecer mais exemplos. Pois, até agora, não há como verificarmos o que realmente está ocorrendo.
Movido: PHP -> HTML/CSS