1
Ich mache eine Website. Mein Float-Element funktioniert nicht so, wie es sollte. Aber das ist nicht das einzige, wenn ich das float: left Element hinzufüge, verschwindet die Navbar. Ich brauche meine Navigationsleiste, um nach links zu schweben.float: left Not Working - Text verschwindet
HTML-Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
text-align: center;
box-sizing: border-box;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
position: absolute;
top: 35px;
right: 20px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
text-align: center;
overflow: hidden;
color: #68cedd;
}
.dropdown {
position: relative;
}
.dropdown:active {
color: #32673f;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 50%;
transform: translate(50%,0);
position: absolute;
padding: 10px 0;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
font-weight: normal;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f9f9f9;
}
#image_symbol {
width: 10em;
margin: 0 auto;
}
header {
height: 95px;
width: 100%;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
}
#main_navbar li a.active, ul#main_navbar li a:hover {
color: #32673f;
}
#navbar {
position: relative;
float: left;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t <title>My Cycle - Home</title>
\t \t <link rel="stylesheet" href="css/style.css" type="text/css" />
\t </head>
\t <body>
\t \t <header>
\t \t \t <div id="heading">
\t \t \t \t <img src="http://i.imgsafe.org/79ba3b5.png" id="image_symbol"></img>
\t \t \t \t <h2 style="position: relative; top: -100px; left: 120px">MY CYCLE</h2>
\t \t \t </div>
\t \t \t <div id="navbar">
\t \t \t \t <ul id="main_navbar">
\t \t \t \t <li>
\t \t \t \t \t <a href="#" style="z-index: -1" class="active">Home</a>
\t \t \t \t </li>
\t \t \t \t <li class="dropdown">
\t \t \t \t \t <a class="dropbtn" style="z-index: -1">Rent</a>
\t \t \t \t \t <div class="dropdown-content">
\t \t \t \t \t <a href="rental/mountain_bikes.html">Mountain Bikes</a>
\t \t \t \t \t <a href="rental/hybrid_bikes.html">Hybrid Bikes</a>
\t \t \t \t \t <a href="rental/road_bikes.html">Road Bikes</a>
\t \t \t \t \t <a href="rental/city_bikes.html">City Bikes</a>
\t \t \t \t \t </div>
\t \t \t \t </li>
\t \t \t \t <li>
\t \t \t \t \t <a href="faq.html" style="z-index: -1">FAQ's</a>
\t \t \t \t </li>
\t \t \t \t <li>
\t \t \t \t \t <a href="about.html" style="z-index: -1">About</a>
\t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </header>
\t \t <section>
\t \t \t
\t \t </section>
\t \t <footer>
\t \t \t
\t \t </footer>
\t </body>
</html>Vielen Dank im Voraus.
Was meinst du mit "funktioniert nicht wie es sein sollte"? Sie müssen Ihr Problem erklären –
Wenn ich Schwimmer nach links verwenden, verschwindet der Text. –
Ich habe es akzeptiert. –