Anchor bleibt trotz "float: right" links.
HTML
- <!doctype html>
- <html>
- <head>
- <title>Startseite | Schillerschule </title>
- <meta charset=utf-8>
- <link rel="stylesheet" href="styles/portfolio.css" media="screen">
- <link href='https://fonts.googleapis.com/css?family=Baloo Bhaijaan' rel='stylesheet'>
- <link href='https://fonts.googleapis.com/css?family=Acme' rel='stylesheet'>
- </head>
- <body>
- <header>
- <div class="nav-main">
- <div class="logo">Portfolio</div>
- <ul>
- <li>
- <a href="#" class="nav-item">Startseite</a>
- </li>
- <li>
- <a href="#" class="nav-item">Downloads</a>
- </li>
- <li>
- <a href="#" class="nav-item">Schulprofil</a>
- <div class="nav-content">
- <div class="nav-sub">
- <ul>
- <li><a href="baustein1.php">Qualitätsbaustein 1</a></li>
- <li><a href="baustein2.php">Qualitätsbaustein 2</a></li>
- <li><a href="baustein3.php">Qualitätsbaustein 3</a></li>
- <li><a href="baustein4.php">Qualitätsbaustein 4</a></li>
- </ul>
- </div>
- </div>
- </li>
- <li>
- <div class="logout">
- <a class="nav-item" style="float: right;" href="logout.php">Logout</a>
- </div>
- </li>
- </ul>
- </div>
- </header>
und CSS:
Code
- body{
- font-family:"Segoe UI",Arial,sans-serif;
- margin: 0;
- font-size: 1em;
- }
- footer{
- border-top: 5px solid grey;
- }
- footer a{
- color: grey;
- text-decoration: none;
- }
- footer a:hover{
- color: black;
- }
- header{
- border-bottom: 5px solid grey;
- }
- body{
- background-image: url(/img/bg.png);
- }
- .login{
- float: right;
- }
- .nav-main{
- width: 100%;
- background-color: #333;
- height: 70px;
- color: #fff;
- }
- .nav-main .logo{
- font-family: "Acme",sans-serif;
- float: left;
- height: 40px;
- padding: 15px 30px;
- font-size: 1.4em;
- line-height: 40px;
- }
- .nav-main > ul{
- margin: 0;
- padding: 0;
- float: left;
- list-style-type: none;
- }
- .nav-main > ul > li{
- float: left;
- }
- .nav-item{
- display: inline-block;
- padding: 15px 20px;
- height: 40px;
- line-height: 40px;
- color: white;
- text-decoration: none;
- }
- .login{
- float: right;
- }
- .nav-item:hover{
- color: white;
- background-color: black;
- }
- .nav-content{
- position: absolute;
- top: 70px;
- overflow: hidden;
- background-color: #333;
- max-height: 0;
- }
- .nav-content a {
- color: #fff;
- text-decoration: none;
- }
- .nav-content a:hover{
- text-decoration: underline;
- }
- .nav-sub{
- padding: 20px;
- }
- .nav-sub ul {
- padding: 0;
- margin: 0;
- list-style-type: none;
- }
- .nav-sub ul li a{
- display: inline-block;
- padding: 5px 0;
- }
- .nav-item:focus ~ .nav-content{
- max-height: 400px;
- -webkit-transition: max-height 0.4s ease-in;
- -moz-transition: max-height 0.4s ease-in;
- transition: max-height 0.4s ease-in;
- }
- .nav-content:hover{
- max-height: 400px;
- -webkit-transition: max-height 0.4s ease-in;
- -moz-transition: max-height 0.4s ease-in;
- transition: max-height 0.4s ease-in;
- }
- .logout{
- float: right;
- }