Anchor bleibt trotz "float: right" links.

quhxl · 1. November 2018

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>

Alles anzeigen

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;
}

Alles anzeigen

basti1012 · 1. November 2018

meinst du jetzt deinen logout button oder was soll nach rechts ?

Dein Navigatios Menü öffnet die untern Links auch nicht richtig

Sempervivum · 1. November 2018

Ich gehe auch davon aus, dass Du den Logout-Button meinst, weil dieser als einziges Element float:right hat.

In dem Fall empfehle ich, wie so häufig, auf Flexlayout umzustellen:

Alle floats entfernen und dann:

Code

.nav-main {
display: flex;
}
.nav-main>ul {
flex: 1;
display: flex;
}
.nav-main>ul>li:last-child {
margin-left: auto;
}

Alles anzeigen

Auf das aufklappbare Untermenü habe ich jetzt nicht so acht gegeben.

basti1012 · 1. November 2018

Sempervivum schrieb:

Auf das aufklappbare Untermenü habe ich jetzt nicht so acht gegeben.

Scheint in Ordnung zu sein.Ich hatte irgendwie probleme mit Cache.

quhxl .Du mußt auch druf achten das du die Angaben nicht öffters drinne hast und deswegen mal Fehler bekoomst. Du hast zb 2 mal .login{float:right] in der Css stehen.

Meißtens zählt das was weiter unten steht,aber wenn du oben fummelst und unten noch was anderes steht, dann sucht man sich ab und und zu ach doofe

quhxl · 1. November 2018

Tut mir leid hätte ich genauer beschreiben sollen. ( basti1012 )

Sempervivum Habe es geändert, hat aber keine Wirkung gezeigt.

Sempervivum · 1. November 2018

Dann poste am besten noch Mal den neuen Code. Ich hatte meinen Vorschlag getestet und er hat funktioniert.

basti1012 · 1. November 2018

quhxl schrieb:

Tut mir leid hätte ich genauer beschreiben sollen. ( basti1012 )

Sempervivum Habe es geändert, hat aber keine Wirkung gezeigt.

wenn du den Beitrag von sempervivum richtig gelesen hast ,sollte es gehen . Du kopierst die Css die er gepostet hat an Ende deiner Css und löscht alle float:left und float:right Einträge.

Fals du nicht noch anderen Code ( css und js ) auf deiner Seite hast läuft der Code auch von ihn.

quhxl · 2. November 2018

Code

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);
}
.nav-main{
width: 100%;
background-color: #333;
height: 70px;
color: #fff;
display: flex;
}
.nav-main .logo{
font-family: "Acme",sans-serif;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul{
margin: 0;
padding: 0;
display: flex;
list-style-type: none;
}
.nav-main > ul > li{
}
.nav-item{
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: white;
text-decoration: none;
}
.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;
}
.nav-main>ul>li:last-child {
margin-left: auto;

Alles anzeigen

Sempervivum · 2. November 2018

Da fehlt das flex:1

Code

.nav-main > ul{
margin: 0;
padding: 0;
flex: 1; /* <-- hier */
display: flex;
list-style-type: none;
}

quhxl · 2. November 2018

Ok, jetzt hats geklappt! Dankeschön!

Tags