Начинающий в верстке, так что сильно не ругайте :) Вывожу данные из бд в список, под списком хочу поставить div
, но он встает на список.
Вот скрипт в котором генерится html
<?php
$servername = ":)";
$username = ":)";
$password = ":)";
$conn = new mysqli($servername, $username, $password);
$conn -> query("USE game");
$conn -> set_charset("utf8");
if ($conn -> connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$users = $conn -> query("SELECT * FROM `game` . `players`");
echo "<html><head><title>Аккаунты</title><meta charset=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/><meta name=\"theme-color\" content=\"#711BCB\"/><link href=\"styles.css\" rel=\"stylesheet\"></head><body><div id=\"header\"><div id=\"headercontent\"><h1>Аккаунты</h1></div></div>";
echo "<div id=\"wrapper\"><div id=\"list4\"><ul>";
while($user = mysqli_fetch_array($users)) {
echo "<li><a href=\"h\"><strong>$user[name]</strong></a></li>";
}
echo "</ul></div>";
echo "<div id=\"add\"><a href=\"#\"><h2>Добавить аккаунт...</h2></a></div></div>";
echo "</body></html>";
$conn -> close();
?>
CSS
* {
margin: 0;
padding: 0px;
}
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
#add {
position: absolute;
width: 70%;
align: center;
left: 15%;
didpay: inline-block;
background-color:#711BCB;
}
#add h2 {
padding:30px;
margin: 30px;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 40px;
font-family: 'Nova Flat', Nova Cut, Nova Oval;
}
#list4 {
width: 100%;
}
#list4 ul {
list-style: none;
height: 50px;
}
#list4 ul li { }
#list4 ul li a {
display:block;
text-decoration:none;
color:#000000;
background-color:#FFFFFF;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCCCCC;
border-right-style:solid;
border-right-width:1px;
border-right-color:#CCCCCC;
border-left-style:solid;
border-left-width:1px;
border-left-color:#CCCCCC;
border-top-style:solid;
border-top-width:1px;
border-top-color:#CCCCCC;
padding:30px;
margin:30px;
cursor:pointer;
}
#list4 ul li a strong {
font-size: 40px;
font-family: 'Nova Flat', Nova Cut, Nova Oval;
margin-right:10px;
}
#header {
background-color: #711BCB;
height: 200px;
width: 100%;
position: relative;
}
#header h1 {
color: #ffffff;
padding: 60px;
font-size: 50px;
font-family: 'Nova Flat', Nova Cut, Nova Oval;
}
#headercontent {
position: absolute;
bottom: 0;
left: 0;
}
Скрин
wrapper
строкуposition: absolute
?