Probleme mit Nav
liebewinter
- css
hallo , ich habe meine Links spalte die bevor auf meine Linke seite war , nach nav gebracht.. , das Probleme ist , wenn der Maus auf Computer , der Hover , tut etwas komische... , wie sie aussiehst...
mein Html Code;
<body>
<header></header>
<nav id="navs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</nav>
<aside></aside>
<main>
<h4>Das letzte von Windows 8</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam .
</p>
<a style="text-decoration: none;" href="windows8.php">Read more...</a>
<br>
<br>
<br>
<br>
<br>
</main>
<aside id="furtherInformation"></aside>
<footer id="copry" >
<p>My Website: Computer and More © 2018. All Rights Reserved.</p>
<a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/">
<picture>
<source media='(max-width: 30em)' srcset='/Bilder/copry-kleine.png'>
<source media='(max-width: 35.5em) and (orientation: landscape)' srcset='/Bilder/copry-kleine.png'>
<source media='(min-width: 80em)' srcset='/Bilder/f601296864.png'>
<img alt="Creative Commons License" src="/Bilder/copry.png" style="width:auto;"></a>
</picture>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Content of this site cannot be republished either online or offline without our permissions. </p>
</footer>
Der Css code:
/* Nav */
nav {background-color: #d2f5c4;}
nav a{
color: black;
text-decoration: none;
display: inline;
padding: 0px 8px;
font-size: 16px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
margin: 10px;
}
nav ul {list-style-type: none;}
nav li {display: block; display:inline-block;}
/* arbeit */
.dropdown a {
display: block;
padding: 0px 0px 0px 500px;
color: #000;
font-size: 17px;
}
/* arbeit */
li a:hover, .dropdown:hover .dropbtn {
background-color: #f1ebeb;
}
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 10px; /* macht größer die Inneren Links */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
.dropdown-content {
color: black;
padding: 8px 10px 8px 1px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
}
.dropdown-content a:hover {
background-color: #9f9e9e;
}
/* Offnen die Innere Links */
.dropdown:hover .dropdown-content {
display: block;
left: 1px; /* zeigt wo dem innere link fenster gezeigt wird */
top: 10px; /* zeigt wo dem innere link fenster gezeigt wird */
}
/* Main */
input, textarea{
background:rgba(220,220,220,0.75);
border:1px solid rgba(220,220,220,0.75);
font:inherit;
border-radius:0.2941em;/*5px;*/
padding:0.4118em;/*7px;*/
/*farbigen Rahmen in Chrome und Safari abschalten.*/
outline:none;
}
input:focus, textarea:focus{
background:#fff;
border:1px solid #000;
outline: none; /* einige Browser add line auf input , das verhindert es... */
}
input[type=submit]{
background:#be633c;
border:none;
color:#fff;
border-radius:50% 50%;
box-shadow:inset 0 0 1em #fb9d23;
padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{
background-color:#A33202;
}
/* Footer */
#copry {
overflow: auto;
font-size: 10px;
list-style-type: none;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#img1 {float: left; margin: 5px; }
#copry a {text-decoration: none; margin-bottom: 3px;}
#copry p {font-size: 10px; margin-bottom: 0px; }
/* Getting your footer under control */
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
/* Komment Button */
#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#comment {font-size: 11px;} /* Button from comment */
#form {font-size: 14px;} /* size from comment window */
kann Bitte jemand hilfe... , Viel Danke !
Hallo Joseba,
ich weiß nicht warum es funktioniert hat als das Computer-Menü links war. Vielleicht hast Du etwas nicht übernommen.
Wenn ein Element position:absolute
ist, dann beziehen sich left, top, right und bottom nicht auf sein direktes Parent-Element, sondern der Browser sucht in der Parent-Hierarchie so lange, bis er ein Element findet, das nicht position:static
ist (static ist der Default-Value). Gibt es keins, wird das <html> Element als Bezugspunkt genommen. Deswegen erscheint dein Menü oben links am Bildschirmrand. Du brauchst die CSS Regel
.dropdown {
position: relative;
}
und dann musst Du die Eigenschaften left
und top
von .dropdown-content
so setzen, dass das Menü an der richtigen Stelle erscheint. Das kannst Du in der .dropdown-content
Regel machen; in der .dropdown:hover .dropdown-content
Regel brauchst Du nur das display:block
Dann noch ein paar Tipps:
.dropdown a
ein padding-left von 500px gibst, um den Abstand zwischen den Menüs zu erhalten. Das macht man mit zwei Listen und einer Flexbox für das nav Element:<nav id="navs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</nav>
Dazu diese CSS Änderungen. Die Kommentare sind nur zum Markieren der Änderung :)
display:block und font-size: 17px musst Du von .dropdown a entfernen. Der display:block führt dazu, dass die Menüs nicht auf gleicher Höhe sind. Es sind jetzt 2 ul, deswegen setzt der Browser die Texte nicht mehr automatisch auf gleiche Höhe.
nav { background-color: #d2f5c4; display: flex; }
/* ^^^^^^^^^^^^^^ */
nav ul {list-style-type: none; flex: 1 0 1em;}
/* ^^^^^^^^^^^^^^ */
.dropdown a {
/* LÖSCHEN: */ display: block;
padding: 0; /* <--- */
color: #000;
/* LÖSCHEN: */ font-size: 17px;
}
Rolf
Hallo Rolf, viel dank für deine bemüht !
ich weiß nicht warum es funktioniert hat als das Computer-Menü links war. Vielleicht hast Du etwas nicht übernommen.
es ist funzioniert alles gut wie auf meine Website zeigt , aber habe mich entschieden zu wechsel damit möchte ich mehr Platz an main und infoBox geben.. . ich möchte auf meine Website Werbung hängen und der linke Spalte nehmt Platz , der ich brauche...
Noch eine frage... um das Fenster von innerem in Computer in Block geöffnet wird , habe so gemacht…
.dropdown-content {
color: black;
padding: 8px 10px 8px 1px;
text-decoration: none;
}
und....
/* Offnen die Innere Links */
.dropdown:hover .dropdown-content {
display: block;
right: 180px; /* zeigt wo dem innere link fenster gezeigt wird */
top: 170px; /* zeigt wo dem innere link fenster gezeigt wird */
}
aber die inneren Linken werden nicht in Block geöffnet sondern in innline , wie auf codepen zeigt .... , was kann mache um die inneren Linken in Block geöffnet werden...
Hallo Joseba,
du hast meinen Hinweis am Anfang übersehen. Lies nochmal die drei Absätze ab „Wenn ein Element position:absolute...“
Rolf
ich habe jetzt besser gelesen was du frühr geschrieben hast and jetzt bekomme es ☺️…
Jetzt versuche bauen das Fenster wie auf meine Website ..mit
.dropdown-content {
color: black;
padding: 5px 1px 1px 1px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
}
aber Windows , Link2 ,... werden nicht getrent wie auf meine Website...
ich weiss warum nicht bekomme habe, ich habe der css der das macht , lösen..
ist dieser..
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
display: block;
}
das Problema habe jetzt dass die Hover Farbe , wird nicht gut verteilt bei den Links...
Hallo Joseba,
du musst mit deinen margins und paddings aufräumen. Die a Elemente im nav haben nur padding, die a Elemente im Dropdown haben auch margin. Deswegen ist im Dropdown ein Abstand zum Rand.
Tipp: Wenn Du mit den Entwicklerwerkzeugen des Browsers einen Teil deiner Seite anschauen willst, der nur bei :hover sichtbar ist, kannst Du den Hover-Zustand einschalten. Firefox und Chrome haben eine Funktion dafür.
Wähle zuerst im DOM Inspektor (Chrome: Elements Ansicht) das div mit Klasse "dropdown" aus. Dann setze die Checkbox für :hover. Das Dropdown öffnet sich und bleibt offen, auch wenn Du mit der Maus woandershin zeigst.
Rolf
hattest du recht..es war einiger sache zu viel..
Bei nav a {
habe margin lösen…
Bei .dropdown-content {
habe Padding lösen..
Ein Screenshot wie meine Hover auf Computer jetzt bekomme..
und auf codepen...........
Ich wünsche dir eine Schöne Wochenende !
Hallo Joseba,
es ist besser, Fragen im Forum zu besprechen. Aus zwei Gründen: Andere könnten die gleiche Frage haben. Und ich könnte einen Fehler machen, dann kann das jemand anderes korrigieren.
Deine Frage per Privatnachricht war:
ich versuche die neue Linker (Computer, News und Bucher) die auf nav sind , nach rechte Seite zu bewegeng , aber kann nicht mit
.dropbtn a {
text-align: right;
}
Ich hatte Dir das nav Element zur Flexbox gemacht, und die ul Elemente zu Flex-Items mit flex: 1 0 1em
; Das bewirkt: Die ul werden so vergrößert, dass jedes die Hälfte von nav belegt. Innerhalb der ul werden die li dann linksbündig gemacht (weil sie inline-block sind).
Es gibt zwei mögliche Lösungen:
1. Die ul lassen wie sie sind und die Menüpunkte verschieben
+--nav--------------------------------------------------------------------+
| +--ul-----------------------------+ +--ul-----------------------------+ |
| | ITEM ITEM ITEM | | ITEM ITEM ITEM | |
| +---------------------------------+ +---------------------------------+ |
+--nav--------------------------------------------------------------------+
Um das so zu machen, musst Du der rechten Liste ein text-align:right geben. Nicht den a Elementen. Also so:
nav ul:nth-of-type(2) { text-align:right; }
2. Die ul nur so breit wie nötig machen, und sie von Flexbox verteilen lassen
+--nav--------------------------------------------------------------------+
| +--ul--------------+ +--ul------------+ |
| | ITEM ITEM ITEM | | ITEM ITEM ITEM | |
| +------------------+ +----------------+ |
+--nav--------------------------------------------------------------------+
Dazu musst Du zwei Dinge tun: dem nav Element eine justify-content Eigenschaft geben (space-between heißt: Freien Platz zwischen die Flexitems schieben) und den ul Elemente die automatische Vergrößerung wegnehmen (die 1 in flex:1 0 1em). Es kann den Defaultwert behalten, der flex: 0 0 auto;
lautet (nicht vergrößern, nicht verkleinern, so groß wie nötig).
Mit dem padding-left und padding-right im nav kannst Du den Abstand der Menüs vom Bildschirmrand einstellen. Und dem ul gibst Du padding:0, weil das ul Element vom Browser ein padding bekommt, das dann nur stört.
nav {
display:flex; justify-content: space-between;
padding-left: …
padding-right: …
}
nav ul {
/* LÖSCHEN: */flex: 1 0 1em;
padding: 0;
}
Beides geht. Die Sache mit dem Padding kannst Du auch in Lösung 1 verwenden.
Viel Spaß, und Alaaf, wie wir in Köln dieses Wochenende sagen :)
Rolf
Viele danke !
mit ;
nav {background-color: #d2f5c4; display: flex; }
nav ul {list-style-type: none; flex: 1 0 auto;}
nav ul:nth-of-type(2) {
text-align:right;
padding-right:90px;
}
habe geschafft !
Ich wünsche dir vielllll Spaß beim Carnaval !
Moin,
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute;
^^^^^^^^^^^^^^^^^^^
das Submenü wird damit absolut positioniert. Das heißt am nächsten relativen Element ausgerichtet.
nav li {display: block; display:inline-block; position:relative}
Damit gibst du dem übergeordneten Element die Eigenschaft relativ positioniert zu werden und schon richtet sich das Untermenü nach diesem aus.
Nun kannst du weiter positionieren
Gruß Bobby
Hallo bobby,
nav li {display: block; display:inline-block; position:relative}
hier fehlt ein display: -moz-inline-block
für den Firefox 2.
Bis demnächst
Matthias
@@ liebewinter
das Probleme ist , wenn der Maus auf Computer , der Hover , tut etwas komische... , wie sie aussiehst...
Das Problem ist, dass es ohne Maus gar nicht aussieht. Bei Navigation mit Tastatur (Tab-Taste) öffnet sich kein Untermenü – das Menü ist nicht bedienbar. Schade, dass bobby und Rolf das übersehen haben.
Um ein Menü tastaturbedienbar zu machen, genügt :hover
nicht! Für den Nutzer muss erkennbar sein, wo sich der Tastaturfokus gerade befindet. Das geht mit :focus
. Ein einfaches Aufklapp-Menü ließe sich mit :focus-within
realisieren – allerdings funktioniert das nicht in Edge und IE.
Außerdem hat solch ein Menü den Nachteil, dass man sich durch alle Unterpunkte durchtabben muss, was bei langen Menüs eine Qual ist.
Deshalb ist es sinnvoller, das Öffnen des Untermenüs per Click auf einen Button mit JavaScript zu realisieren – jedenfalls bei Tastaturbedienung. Ich hab da mal vier Gänge angerichtet. Zweimal mit :focus-within
(meh) und zweimal mit JavaScript und entsprechenden Änderungen von ARIA-Attributen.
Jeweils einmal so, dass der Menüpunkt „Hauptgericht“ ein Link ist, und einmal so, dass er keiner ist. Was bei dir der Fall ist, ist aus href="#"
nicht ersichtlich. Soll "#"
ein Platzhalter sein oder ist es ein Fehler, nämlich die falsche Verwendung eines a
-Elements anstatt eines button
s?
Was in meinem Beispiel noch nicht auf der Speisekarte steht, ist die Überlegung, wie man zu den Unterpunkten kommt, wenn kein JavaScript ausgeführt wird. Zwei Möglichkeiten:
Welcher Weg für dich der beste ist, hängt von deinem Projekt ab. Aber mach bitte das Menü irgendwie bedienbar!
LLAP 🖖
Moin,
Das Problem ist, dass es ohne Maus gar nicht aussieht. Bei Navigation mit Tastatur (Tab-Taste) öffnet sich kein Untermenü – das Menü ist nicht bedienbar. Schade, dass bobby und Rolf das übersehen haben.
Hut ab Herr Mütze, du kannst ja doch nett sein! Muss man jetzt auch mal positiv bemerken, nachdem ich letztens so rum gemeckert habe. Schön dass du deine Verhaltensweise evaluierst und Kritik einfließen lässt.
Zum Thema, hast du natürlich vollkommen recht!
Gruß Bobby
Hallo Gunnar,
Schade, dass bobby und Rolf das übersehen haben.
Was heißt übersehen? Du bist viel qualifzierter, dabei zu beraten!
😉 Rolf
ist aus href="#" nicht ersichtlich. Soll "#" ein Platzhalter sein oder ist es ein Fehler, nämlich die falsche Verwendung eines a-Elements anstatt eines buttons?
Ein Platzhalter, weil jetzt benutze dieser Website als Probe.…
ich bedanke mich dich für deinen bemühst , aber das probleme habe schon gelöscht...
<nav id="navs">
<ul>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<ul>
<li><a href="index.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</nav>
und wie der Scrennshot von meinem Desktop zeigt...
Das Problem ist, dass es ohne Maus gar nicht aussieht.
ich habe keine Tablet und Smartphone deshalb habe nicht gesehen was du sagst..
so wie sagtet habe keine Tablet und smarphone , aber habe Virtual Box…
ich habe Android OS auf dem Virtual Box , dann bin nach Ändern + System , beim Zeigergerät nehme USB-Multitouch-Tablet , der emulate a Touchscreen… und dieser ist der screenshot von meine Android…
Villeicht das probleme war , das ich nicht meine Code auf codepen update gemacht habe... jetzt habe es...
Hallo liebewinter,
jetzt habe es...
Nein. Das Menü ist nicht mit der Tastatur bedienbar.
Bis demnächst
Matthias