2
I’m doing a lineup of teams using the bootstrap, where each registered match, a new row is generated with the data, the problem is that the table is not on the background image.
Table does not appear if the screen is full, only appears when the decrease.
HTML and PHP
<body>
<div class="fundo-externo">
<div id="fundo">
<img src="../images/ball1.jpg"/> <!-- alt="Uma bola de futebol sobre um gramado" -->
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<header class="masthead clearfix navbar navbar-dark bg-dark">
<div class="logo col-xs-12 col-md-2">
<img src="../images/drawing2.png" width="35%"/>
</div>
<div class="col-xs-12 col-md-8 inner">
<div class="nav justify-content-center m-auto">
<h3 class="titulo"> ÁREA DE CADASTRO DE TIMES </h3>
</div>
</div>
</header>
// Área para cadastro
<form action="queryeconfirm.php" method="POST"> <br>
<div class="container-fluid mt-5" >
<div class="row mb-5">
<div class="col-xs-0 col-sm-2 col-md-3"> </div>
<div class="col-xs-12 col-sm-8 col-md-6 mb-5">
<label for="inputEmail" class="sr-only"> Time 1 </label>
<div class="input-group">
<span class="input-group-addon"> <img src="../images/icon.png" width="12px"/> </span>
<input type="text" name="time1" id="email" class="form-control" placeholder="Primeiro time" required="" autofocus>
</div> <br>
<label for="inputPassword" class="sr-only"> Time 2 </label>
<div class="input-group">
<span class="input-group-addon"> <img src="../images/shield.png" width="12px"/> </span>
<input type="text" name="time2" id="inputPassword" class="form-control" placeholder="Segundo time" required="">
</div> <br> <br>
<button class="btn btn-outline-info btn-block" type="submit"> Adicionar times </button>
</div> <!-- /container -->
</div> <!-- /container -->
</div> <!-- /container -->
<!-- LINK: http://getbootstrap.com/docs/4.0/components/navs/ (Navs BOOTSTRAP) -->
</form>
// Onde busco os dados no banco
<?php
/* Faz a conexao */
include("../conn/conexao.php");
$buscar = "SELECT * FROM tb_time";
$exe = mysqli_query($conexao, $buscar) or die("Ocorreu um erro ao mostrar os dados.");
// Parte fixa da tabela, o cabeçalho
echo "
<div class='container'>
<div class='table-responsive'>
<table class='table table-striped table-bordered table-hover'>
<thead>
<tr>
<th> ID </th>
<th> Time 1 </th>
<th> Time 2 </th>
<th> Atualizar </th>
<th> Apagar </th>
</tr>
</thead>";
// Onde são geradas as partidas que foram cadastradas
$cont = 0;
while($linha = mysqli_fetch_array($exe)){
// Caso o $cont seja par, ele irá receber a cor "white", caso ímpar, ele receberá "d2feff"
$color = $cont%2 == 0 ? "white" : "d2feff";
echo "
<tbody>
<tr>
<th>".$linha['id']."</th>
<td>".$linha['time1']."</td>
<td>".$linha['time2']."</td>
<td align='center'> <a href='update.php?id=".$linha['id']."'> <img src='../images/update.png'> </a> </td>
<td align='center'> <a href='delete.php?id=".$linha['id']."'> <img src='../images/delete.png'> </a> </td>
</tr>
</tbody>";
$cont++;
}
// Fechando a tabela
echo "
</table>
</div>
</div>
<div class='container'>
2017 - Ester A. Patricio
</div>";
?>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="bootstrap-4.0.0-beta/bootstrap-4.0.0-beta/assets/js/ie10-viewport-bug-workaround.js"> </script>
<!-- http://getbootstrap.com/docs/4.0/layout/grid/ -->
</body>
</html>
Man CSS
img{
max-width: 100%;
}
.titulo{
text-align:center;
color:white;
margin-right:25%;
font-family:monospace;
font-size:220%;
}
#fundo-externo {
overflow: hidden; /* para que não tenha rolagem se a imagem de fundo for maior que a tela */
width: 100%;
height: 100%;
position: relative; /* criamos um contexto para posicionamento */
}
#fundo {
position: fixed; /* posição fixa para que a possível rolagem da tela não revele espaços em branco */
width: 100%;
height: 100%;
}
#areaLogin{
text-align:center;
color:white;
}
#aqui{
color:blue-sky;
}
It is because the background image has a limited height.
– Sam
By the way, "Fire Boot" is wrong, the correct would be "Botafogo" :)
– Sam