none
Posicionamento de Texto sobre imagem RRS feed

  • Pergunta

  • Olá pessoal, estou desenvolvendo um aplicação Web como projeto de Iniciação científica. Tenho na base de dados MySQL informações referentes NFPA de produtos químicos e estes valores correspondem a grau de:

    ->Perigo de Saúde (Azul)
    ->Inflamabilidade (Vermelho)
    ->Reatividade (Amarelo)
    ->Riscos específicos (Branco)

    Estes valores vão de 0 à 4 e como já disse estão na base de dados MySQL. No formulário web tenho uma imagem que representa o Diagrama de Homell onde estes valores devem ficar. Cada valor no correspondente local da cor. Poderia salvar uma imagem para cada produto químico mais isso ficaria gastaria muito espaço em virtude dos tantos produtos químicos que existem. Enfim, eu queria que o valores ficassem posicionados exatamente com mostra a imagem abaixo e de maneira fixa. 


    domingo, 26 de junho de 2016 21:21

Respostas

  • Fiz isso com CSS é claro...

    <style  type="text/css">
    .container {
        ;
        width:250px;
        height:200px;
    }

    .azul {
        ;
        top: 20%;
        left: 48%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .vermelho {
        ;
        top: 55%;
        left: 48.5%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .amarelo {
        ;
        top: 38%;
        left: 30%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .branco {
        ;
        top: 38%;
        left: 65%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    </style>

    • Marcado como Resposta Icosaedro quinta-feira, 30 de junho de 2016 21:53
    quinta-feira, 30 de junho de 2016 21:52

Todas as Respostas

  • Já encontrei a solução!
    quinta-feira, 30 de junho de 2016 04:32
  • Olá, 

    poste a solução e feche a thread , mais pessoas podem precisar :)



    Diego Almeida Barreto
    System Analyst / Software Developer

    quinta-feira, 30 de junho de 2016 13:40
  • Fiz isso com CSS é claro...

    <style  type="text/css">
    .container {
        ;
        width:250px;
        height:200px;
    }

    .azul {
        ;
        top: 20%;
        left: 48%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .vermelho {
        ;
        top: 55%;
        left: 48.5%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .amarelo {
        ;
        top: 38%;
        left: 30%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    .branco {
        ;
        top: 38%;
        left: 65%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }
    </style>

    • Marcado como Resposta Icosaedro quinta-feira, 30 de junho de 2016 21:53
    quinta-feira, 30 de junho de 2016 21:52