Ich habe eine andere Frage an Sie. Ich habe beschlossen, etwas wie Web-Fanpage von Mr. Robot zu erstellen. Ich wollte HTML und CSS üben + JS lernen. Aber es gibt ein Problem, das ich nicht lösen kann. Es gibt Platz zwischen divs. Ich habe viele Tutorials versucht, um es zu entfernen, aber keiner von ihnen half. wenig Platz zwischen divs
body {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
}
#main {
height: 100%;
width: 100%;
}
header {
background: black;
padding: 1px;
max-width: 100%;
}
header p {
margin-left: 50px;
font-family: 'Inconsolata', monospace;
font-size: 50px;
text-align: center;
}
.barva {
color: #B20707;
}
.menu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: black;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.menu a {
display: block;
text-decoration: none;
color: white;
font-size: 20px;
padding: 8px;
transition: 0.3s;
margin-left: 20px;
font-family: 'Poppins', sans-serif;
}
.menu a:hover {
color: #B20707;
}
.Openbt {
cursor: pointer;
position:absolute;
top: 0;
left: 0;
margin-top: 20px;
margin-left: 10px;
float:left;
color: #B20707;
font-size: 50px;
}
.menu .closebt {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #B20707;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
}
.domu {
height: auto;
}
img
{
max-width: 100%;
}
.about {
height: auto;
max-width: 100%;
min-height: 250px;
background: black;
}
<!doctype html>
<html lang="cs-cz">
<head>
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Yaaa boiii</title>
</head>
<body>
<header>
<p style="color:white "><span class="barva">ID:_ROOT:</span>Our<span class="barva">_democracy_</span>has<span class="barva">_</span><span class="barva">been</span>_hacked</p>
<div class=Openbt>
<span onclick="openNav()"><i class="fa fa-bars"></i></span>
</div>
</header>
<div id="mySidemenu" class="menu">
<a href="javascript:void(0)" class="closebt" onclick="closeNav()">×</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>
<div id="main"> <!-- Veškerý kontent -->
<div class="domu">
<img src="obrazky/robot.jpg" width="1920" height="1000" />
</div>
<div class="about">
</div>
</div>
<script>
function openNav() {
document.getElementById('mySidemenu').style.width = "250px";
document.getElementById('header').style.marginLeft = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById('mySidemenu').style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
</script>
</body>
</html>
Vielleicht bemerkt, dass ich auf dem Bild eine gewisse Breite und Höhe eingestellt hatte. Wie stelle ich Höhe 100% und Breite 100% ein? Ich habe versucht, es in .domu einzugeben, aber es hat nicht funktioniert.
Mögliche Duplikat [HTML, CSS - seltsam unsichtbar Marge unterhalb der Abbildungen] (https://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below -Bilder) – showdev