My elements are arranged on my screen. However due to the use of the jquery.Tab plugin css is blocking the elements of the page.
Index.phpCode
<!doctypehtml><htmllang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo."
);
});
}
});
} );
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="paginas/detalhes.php">Detalhes</a></li>
<li><a href="paginas/mapas.php">Mapas</a></li>
<li><a href="paginas/cadastrodivices.php">Cadastrar Divices</a></li>
<li><a href="paginas/alerta.php">Alerta</a></li>
</ul>
</div>
</body>
</html>
Code Maps.php
<div>
<div id="topo" class="linha">
<span>Tipo<span>
<select name="tipo">
<option value="" >-------- </option>
</select>
<span>Agendamento</span>
<select name="agendamento">
<option value="" >-------- </option>
</select>
<span>Online</span>
<select name="online">
<option value="" > Todos </option>
</select>
<span>Vinculados</span>
<select name="vinculados">
<option value="" > Todos </option>
</select>
<form action="busca.php" method="post">
<input type="text" class="search-query" placeholder="Busca">
</form>
<button class="btn">
<img src="./img/search.png" width="25" />
</button>
<button class="btn">
<img src="./img/edit.png" width="25" />
</button>
<button class="btn">
<img src="./img/deletar.png" width="25" />
</button>
<button class="btn">
<img src="./img/add.jpg" width="25" />
</button>
</div>
<div id="detalheMapa">
<?php include "mapas/detalheMapa.php"; ?>
</div>
<div id="painelPonto">
<?php include "mapas/painelPonto.php"; ?>
</div>
<div id="detalhePonto">
<?php //include "mapas/detalhePonto.php"; ?>
</div>
<div id="rodape">
<?php //include "mapas/rodape.php"; ?>
</div>
Here the code is running: JSfidle
