zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Flexbox Dorpdown Menü, nicht funktionsfähig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 23.02.2020, 17:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Was verstehst du unter 'aus EINEM GUSS
Dass ich mir bei der Media Queries später keinen Kopf über eine Breitanpassung machen möchte. Ist das verständliche genug?
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 23.02.2020, 18:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 24.02.2020, 16:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
Was verstehst du unter 'aus EINEM GUSS'?
Zitat:
Zitat von Iago2 Beitrag anzeigen
Dass ich mir bei der Media Queries später keinen Kopf über eine Breitanpassung machen möchte. Ist das verständliche genug?
Das sind immer so keinerlei Hilfreiche Aussagen. "Aus einem Guss" sagt man aus meiner Erfahrung immer wenn man keine Ahnung hat was man eigentlich will.

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.
Mit Zitat antworten
  #14 (permalink)  
Alt 26.02.2020, 10:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Alles davon erfordert eine eigene HTML Struktur um die man sich vorher Gedanken machen muss.
Genau das würde ich gerne.

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.
Mit Zitat antworten
  #15 (permalink)  
Alt 26.02.2020, 10:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
Genau das würde ich gerne.

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.
Was hat das jetzt damit zu tun was ich geschrieben habe? Auch mit deiner eigentlichen Frage hat es gar nichts zu tun.
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:
<div class="parent">
<p> I'm a block-level-ish element of an unknown width and height, centered vertically within my parent. stolen from https://css-tricks.com/centering-css-complete-guide/ </p>
</div>

.parent {
display: flex;
justify-content: center;
align-items: center;
}
Klar, man muss dafür neues lernen, aber wenn der Knoten einmal aufgegangen ist macht es alles einfacher.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Mit Zitat antworten
  #16 (permalink)  
Alt 26.02.2020, 11:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Auch mit deiner eigentlichen Frage hat es gar nichts zu tun
Richtig, Philosphiestunde braut tatsächlich niemand.

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>	
Mit Zitat antworten
  #17 (permalink)  
Alt 26.02.2020, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
Richtig, Philosphiestunde braut tatsächlich niemand.
Sehe ich anders, die können sehr interessant sein.
Aber wenn dann bitte doch so dass sie zum Thema passen


Zitat:
Zitat von Iago2 Beitrag anzeigen
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?
Weil das so ist wie flexbox funktioniert. Es teilt sich auf dem zur verfügung stehenden Platz auf. deine hauptnavigation ist horizontal, die dropdown Elemente sind in flex-flow column (also vertikal) angeordnet.
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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:56 Uhr.