Adjust elements on an image

Asked

Viewed 54 times

-1

I’m developing a generator formulário de resposta I need to adjust the elements (black circles) using css, but I’m not succeeding, I tried with the property of position but unsuccessfully the tebela pushes the image down, but I want to position the circles correctly on the image, follows an image and my code, I intend to then just print the circles based on database data, already Tennho logic, what I need now is to position this table in the appropriate place of iamgem

inserir a descrição da imagem aqui

 <div style="page-break-before:always" align="center" id="folha-a4" class="folha a4_vertical"><!-- página A4  -->

<p>Escola: <?=$linha['escola']?><br>
   Aluno: <?=$linha['aluno']?>

<figure id="container">


   <div><img align="center" src="img/gab20.svg" width="95%" height="auto" /></div>

   <div style="font-family: Ebrima; font-size: 20pt;letter-spacing:20px;float:right;position:relative;top:66px;left:-419px;"><?=$linha['id']?></div>
   <figcaption>
   <table >
   <tr>
    <th style="width:29.2px; "></th>
    <th style="width:29px; "></th> 
    <th style="width:29px; "></th>
    <th style="width:29px; "></th>
    <th style="width:29px; "></th>
  </tr>
   <tr >
    <td width:50% ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
   <tr>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
    <td ><img  src="img/ball.svg" /></td>
   </tr>
</table> 
</figcaption>

</figure>

</div> <!-- Página A4  -->

Follow the images used:

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

html css
  • 1

    Have you tried using position: absolute; with the properties top and left, or right?

  • Got it here, now I need to widen the gap between the markings that are too close together

  • 1

    You can make the images available to try to play here?

  • yes, now just missing increase the height of the lines, I will put the images

  • @sam updated the post, missing format table for markups to be in the right places

  • @Sam got, now my doubt, these measures CSS is for any browser?

  • 1

    Yes, these basic properties work on any browser.

Show 2 more comments

1 answer

0


I managed to solve, follow the complete solution, including logic:

 <?php

// definições de host, database, usuário e senha
$host = "localhost";
$db   = "simrede";
$user = "root";
$pass = "";
// conecta ao banco de dados
$con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_query("SET NAMES 'utf8'", $con);
mysql_query('SET character_set_connection=utf8', $con);
mysql_query('SET character_set_client=utf8', $con);
mysql_query('SET character_set_results=utf8', $con);
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT a.id as id, 
substr(a.id,1,1) as idA,
substr(a.id,2,1) as idB,
substr(a.id,3,1) as idC,
substr(a.id,4,1) as idD,
substr(a.id,5,1) as idE,

s.nome as escola,
a.nome as aluno from alunos a

inner join siems s on s.id=a.siem_id

");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>

<html>

    <head>
    <style>
html { font-size: 12pt; 

}

.folha { align:center;background-color: #ccc; padding: 0.5em;


 }
.a4_vertical { width: 793px; height: 1122px;
    margin-left: auto;
    margin-right: auto;
 }
.a4_horizontal { width: 1122px; height: 793px; 
    margin-left: auto;
    margin-right: auto;
}

#container {
  display: inline-block;
  position: relative;
}

#container figcaption {
  position: absolute;
  top: 89px;
  left: 95px;
  color: black;
}
    </style>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <title>FOLHA DE RESPOSTA</title>
</head>
<body>

<!-- Retorna dados da tabela -->
<?php
function criarCombo($table,$id,$valor)
{
   $sql = "SELECT * FROM alunos";
   $rs_sql = mysql_query($sql);
   while($linha=mysql_fetch_array($rs_sql))
   {
     $chave = $linha[$id];
     $nome  = $linha[$valor];
     $combo = $combo . "<option value=\"$id\">$nome</option>";
   }
   echo $combo;
}
?>


<?php
    // se o número de resultados for maior que zero, mostra os dados
    if($total > 0) {
        // inicia o loop que vai mostrar todos os dados
        do {
?>

<div style="page-break-before:always" align="center" id="folha-a4" class="folha a4_vertical"><!-- página A4  -->

<h3>Escola: <?=$linha['escola']?><br>
   Aluno: <?=$linha['aluno']?></h3>

<figure id="container">
   <div style="font-family: Ebrima; font-size: 20pt;letter-spacing:20px;position: relative;float:right;top:60px;right:317px;"><?=$linha['id']?></div>

   <div><img align="center" src="img/gab20.svg" width="95%" height="auto" /></div>

   <figcaption>

   <table >
   <tr>
    <th style="width:29.2px; "></th>
    <th style="width:30px; "></th> 
    <th style="width:30px; "></th>
    <th style="width:29px; "></th>
    <th style="width:29px; "></th>
  </tr>
   <tr >
    <td name="line0A" style="height:30px; " ><? if($linha['idA'] == 0) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td name="line0B"><? if($linha['idB'] == 0) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td name="line0C"><? if($linha['idC'] == 0) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td name="line0D"><? if($linha['idD'] == 0) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td name="line0E"><? if($linha['idE'] == 0) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
    <td name="line1" style="height:30px; " ><? if($linha['idA'] == 1) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 1) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 1) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 1) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 1) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
   <td name="line2" style="height:32px; " ><? if($linha['idA'] == 2) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 2) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 2) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 2) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 2) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
   <td name="line3" style="height:34px; " ><? if($linha['idA'] == 3) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 3) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 3) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 3) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 3) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
   <td name="line4" style="height:30px; " ><? if($linha['idA'] == 4) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 4) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 4) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 4) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 4) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
   <td name="line5" style="height:32px; " ><? if($linha['idA'] == 5) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 5) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 5) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 5) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 5) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
   <td name="line6" style="height:31px; " ><? if($linha['idA'] == 6) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 6) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 6) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 6) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 6) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
    <td name="line7" style="height:32px; " ><? if($linha['idA'] == 7) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 7) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 7) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 7) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 7) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
    <td name="line8" style="height:31px; " ><? if($linha['idA'] == 8) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 8) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 8) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 8) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 8) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
   <tr>
    <td name="line9" style="height:33px; " ><? if($linha['idA'] == 9) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idB'] == 9) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idC'] == 9) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idD'] == 9) echo '<img  src="img/ball.svg" />'; else ?></td>
    <td ><? if($linha['idE'] == 9) echo '<img  src="img/ball.svg" />'; else ?></td>
   </tr>
</table> 
</figcaption>

</figure>

</div> <!-- Página A4  -->

            <!-- <div align="center" height="900px" style="">

            <BR>

            <BR>
            <div style="font-family: Ebrima; font-size: 20pt;letter-spacing:21px;float:left;
position:relative;top:33px;left:267px;"><b>
            </div>   

            <div align="center">
            </div>             

            <hr>
            </div>     -->
             <!-- -- <button><== Remover</button> -- <button>Adicionar ==></button> -->

<?php
        // finaliza o loop que vai mostrar os dados
        }while($linha = mysql_fetch_assoc($dados));
    // fim do if 
    }
?>
</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.