1
Dies ist ein Beispiel, ich habe ein Problem mit:Probleme mit einer Navigationsleiste, wie kann ich sie nicht fixieren?
Also, wenn ich scroll, geht Navbar auch wegen der festen Eigenschaft und ruiniert das Aussehen, wie man es mit Logo auf einer Schriftrolle gehen weg?
Auch kann mir jemand vorschlagen, wenn dies ein gutes für eine Begining ist und wenn es einige Dinge gibt, auf die ich achten sollte. Ich möchte die rechte Seite für zufällige Widgets und die linke Seite für einen Inhalt machen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Design
</head>
<style>
\t /* Body style */
\t body {
\t \t margin: 0;
\t \t padding: 0;
\t \t font-size: 12px;
\t \t
\t }
\t
\t /* Logo */
\t .header {
\t \t position: relative;
\t \t margin: 0;
\t \t padding: 0;
\t \t display: block;
\t \t height: 50px;
\t \t background: #fff !important;
\t \t padding: 8px 16px; \t \t
\t }
\t .logo-1 {
font-family: Helvetica, "serif";
text-decoration: none;
font-size: 37px;
letter-spacing: 3px;
\t font-weight: 900;
color: #555555;
display: block;
\t }
\t
\t /* Navigation */
\t .navbar {
\t \t Position: fixed;
\t \t width: 100%;
\t \t background: #333333;
\t list-style-type: none;
\t \t text-decoration: none;
\t \t margin: 0;
\t \t padding: 0;
\t \t text-align: center;
\t }
\t
\t li {
\t \t float: left;
\t }
\t
\t li a {
\t \t display: block;
\t \t padding: 14px 16px;
\t \t color: #eee;
\t \t text-decoration: none;
\t \t text-align: center;
\t \t font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
\t }
\t
\t li a:hover:not(.active) {
\t \t background: #111111;
\t }
\t
\t .active {
\t \t background-color: #008cba;
\t }
\t
\t /* Widget */
\t .widget {
\t \t position:relative;
\t \t bottom: -42px;
\t \t float: right;
\t \t overflow: hidden;
\t \t width: 190px;
\t \t border-left: 1px solid #9fa2a9;
\t \t display: block;
\t \t padding: 2px 5px;
\t }
\t
\t </style>
<body>
\t <div class="header"><a class="logo-1" href="#">Test Design</a></div>
<!-- Navigation -->
<ul class="navbar">
\t <li><a class="active" href="#">Home</a></li>
\t <li><a href="#">Portfolio</a></li>
\t <li><a href="#">About</a></li>
\t <li><a href="#">Contact</a></li>
\t <li style="float: right"><a class="active" href="#">Register</a></li>
\t <li style="float: right"><a href="#">Login</a></li>
\t </ul>
<!-- Widget -->
<div class="widget">
\t <b><u>Random bullshit lorem-ispum</u></b>
\t <form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
Hallo, wechselnde Position relativ Marken navbar weiß (nicht vorhanden) – Shadow