zurck zur Startseite
  


Zurck 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, 16:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Was verstehst du unter 'aus EINEM GUSS
Dass ich mir bei der Media Queries spter keinen Kopf ber eine Breitanpassung machen mchte. Ist das verstndliche genug?
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 23.02.2020, 17:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Die zweite Version hab ich nun fr 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%;	
	
		 }

Gendert von Iago2 (23.02.2020 um 17:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 24.02.2020, 15:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
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 spter keinen Kopf ber eine Breitanpassung machen mchte. Ist das verstndliche 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 hinzufgt. Zugegeben, es schaut dann nicht schn aus, aber es ist "aus einem Guss" und funktioniert.

Du musst definieren wie dein Men auf Touch-Gerten funktionieren soll. Soll es einzelne Unterpunkte per touch auf- und zuklappen? Soll es dafr einen eigenen Pfeil geben damit der Hauptmenpunkt verlinkt werden kann? Sollen alle Menpunkte 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, 09:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
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 wrde ich gerne.

Und flexbox soll die Dinge vereinfachen. Wo? Mit float bekomme ich die Dropdownmens mttelerweile ganz gut hin, Aber man soll jetzt flexbox verwenden.

Ich wrde gerene mal die WISSENSCHAFTLICHE Arbeit sehen, die flexbox rechtfertigt.
Mit Zitat antworten
  #15 (permalink)  
Alt 26.02.2020, 09:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
Genau das wrde ich gerne.

Und flexbox soll die Dinge vereinfachen. Wo? Mit float bekomme ich die Dropdownmens mttelerweile ganz gut hin, Aber man soll jetzt flexbox verwenden.

Ich wrde 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 bezglich floats findest.

flexbox wurde entwickelt weil gefhlt 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 folgendermaen:
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 dafr 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, 10:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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

Der Code unten funktioniert (ausser fr Smartphones) Die Beiten passen sich schn an auch von der Drop-Down Box, keine Verschiebungen. Aber warum?

Erst wenn ich "ungefhlt" verstehe warum, kann ich eine Lsung fr 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, 11:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.058
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
Richtig, Philosphiestunde braut tatschlich niemand.
Sehe ich anders, die knnen 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 fr Smartphones) Die Beiten passen sich schn an auch von der Drop-Down Box, keine Verschiebungen. Aber warum?
Weil das so ist wie flexbox funktioniert. Es teilt sich auf dem zur verfgung 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 erklren.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beitrge zu antworten.
Es ist Ihnen nicht erlaubt, Anhnge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beitrge 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 18:53
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
CSS Menue Browserkompatibel! ICH DREH DURCH! haSta CSS 24 02.03.2006 18:42
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:38 Uhr.