|
|||
Die zweite Version hab ich nun für die Desktop Version zum laufen gebracht, (sieh code unten.) Die Anpassung an das Tablet/smartphone muss nun erfolgen.
Gerne melden, wer CSS wirklich versteht. HTML-Code:
.nav-area a { display:flex; align-items:center; justify-content:center; color:#fff; background-color:#0e618a; height:50px; text-decoration:none; font-weight:bold; text-transform:uppercase; } .nav-area a:hover { background:#d0dbe0; color:#000; } .nav-area ul { list-style:none; display:flex; } .nav-area ul li { position:relative; width:100%; text-align:center; } .nav-area li:hover .dropdown > li { top:0px; display:block; } .dropdown li { display:none; poistion:relative; } .dropdown { position:absolute; display:none; flex-direction:column; width:100%; } Geändert von Iago2 (23.02.2020 um 18:29 Uhr) |
Sponsored Links |
|
|||
Zitat:
Geheimtipp: Jede Website ist von Haus aus responsive, so lange man kein eigenes CSS hinzufügt. Zugegeben, es schaut dann nicht schön aus, aber es ist "aus einem Guss" und funktioniert. Du musst definieren wie dein Menü auf Touch-Geräten funktionieren soll. Soll es einzelne Unterpunkte per touch auf- und zuklappen? Soll es dafür einen eigenen Pfeil geben damit der Hauptmenüpunkt verlinkt werden kann? Sollen alle Menüpunkte immer angezeigt werden? Soll so ein Hamburger-Menü verwendet werden welches das eigentliche Menü in den Bildchirm rutscht? Soll das Menü immer sichtbar sein oder nur wenn man ganz oben auf der Seite ist? Alles davon erfordert eine eigene HTML Struktur um die man sich vorher Gedanken machen muss. Auch wirkt davon dann alles "aus einem Guss." wenn es ordentlich umgesetzt ist. |
|
|||
Zitat:
Und flexbox soll die Dinge vereinfachen. Wo? Mit float bekomme ich die Dropdownmenüs mttelerweile ganz gut hin, Aber man soll jetzt flexbox verwenden. Ich würde gerene mal die WISSENSCHAFTLICHE Arbeit sehen, die flexbox rechtfertigt. |
|
|||
Zitat:
Aber ich beantworte sie dir gerne: Du wirst keinerlei wissenschaftliche Arbeit dazu finden, auch deshalb nicht weil du keine wissenschaftliche Arbeit bezüglich floats findest. flexbox wurde entwickelt weil gefühlt 99% der Webentwickler es haben wollten. Es ist um einfach Elemente in einer Dimension (horizontal oder vertikal) anzuordnen und auszurichten. Nebeneinander anordnen geht mit float auch recht einfach, aber richte sie mal aneinander aus. zB zentriert wenn du die Breite eines Elements nicht kennst. Das geht mit float dann schon nicht mehr. Mit flexbox geht es folgendermaßen: Zitat:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
|
|||
Zitat:
Der Code unten funktioniert (ausser für Smartphones) Die Beiten passen sich schön an auch von der Drop-Down Box, keine Verschiebungen. Aber warum? Erst wenn ich "ungefühlt" verstehe warum, kann ich eine Lösung für kleine Bildschirme finden. Die media query habe ich symbolisch ausgespart. HTML-Code:
<style type="text/css"> * { font-family:Helvetica,Arial,sans-serif; margin:0; padding:0; box-sizing:border-box; } .nav-area a { display:flex; align-items:center; justify-content:center; color:#fff; background-color:#0e618a; height:50px; text-decoration:none; font-weight:bold; text-transform:uppercase; padding: 10px 10px; } .nav-area a:hover { background:#d0dbe0; color:#000; } .nav-area ul { list-style:none; display:flex; } .nav-area ul li { position:relative; width:100%; text-align:center; } .nav-area li:hover .dropdown > li { top:0px; display:block; } .dropdown li { display:none; poistion:relative; } .dropdown { position:absolute; flex-direction:column; width:100%; } @media(max-width:700px) { { } } </style> <nav class="nav-area"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Space travel</a> <ul class="dropdown"> <li><a href="#">Baikonur</a></li> <li><a href="#">KSC</a></li> <li><a href="#">Guiana Space Centre</a></li> </ul> </li> <li><a href="#">Astronomy</a> <ul class="dropdown"> <li><a href="#">Very Large Array</a></li> <li><a href="#"> Royal O., London</a></li> <li><a href="#">Cerro Paranal</a></li> <li><a href="#">Kitt Peak National O.</a></li> </ul> </li> <li><a href="#">Biology</a></li> <li><a href="#">Science & Arts</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> |
|
|||
Sehe ich anders, die können sehr interessant sein.
Aber wenn dann bitte doch so dass sie zum Thema passen Zitat:
Wo genau sollte sich denn da was verschieben? Bzw. was genau verstehst du da nicht? Tue mir schwer etwas ohne spezifische Fragen zu erklären. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Buchtipp Eric A. Meyer | vistahr | Ressourcen | 2 | 01.11.2006 19:53 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
CSS Menue Browserkompatibel! ICH DREH DURCH! | haSta | CSS | 24 | 02.03.2006 19:42 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |