0
Ich versuche zu lernen, reagiert CSS aber Schwierigkeiten mit einigen grundlegenden css Design. Ich habe eine feste Navigationsleiste erstellt, wie Sie im folgenden Code sehen können. Aber das Problem, mit dem ich konfrontiert bin, ist, dass ich Inhalte darunter nicht richtig ausrichten kann. Der Inhalt wird von der Navigationsleiste überlappt. Kannst du eine geeignete CSS Lösung vorschlagen und keine Workaround wie das Hinzufügen von leeren Divs mit festen Höhen? Hier ist der Code:CSS - Inhalt unter festen Navbar ausrichten
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> <a href="#"> Home </a></li>
<li> <a href="#"> How It Works </a></li>
<li> <a href="#"> Features </a></li>
<li> <a href="#"> Surveys </a></li>
<li> <a href="#"> Plans and Pricings </a></li>
<li> <a href="#"> Webinars </a></li>
<li> <a href="#"> Blog </a></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
`responsive.html`