[Resolvido] Ampliar tela e não prejudicar a planilha com a imagem de fundo

[paulaodaregulage 0]

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.

 

 

obgd

 

 

[Gabriel Heming 766]

Terá que nos fornecer mais exemplos. Pois, até agora, não há como verificarmos o que realmente está ocorrendo.

 

Movido: PHP -> HTML/CSS

[paulaodaregulage 0]

Boa 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>

 

?

[Gabriel Heming 766]

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.

[paulaodaregulage 0]

OBGD!!!Gabriel..deu certo!!

 

aliás..sempre dá certo com vcs!!!

[Maujor 144]

@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/