zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsives Menü -Überlappung und Auswählbarkeit Hilfe benötigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.10.2015, 18:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2015
Beiträge: 3
OMC Mering befindet sich auf einem aufstrebenden Ast
Standard Responsives Menü -Überlappung und Auswählbarkeit Hilfe benötigt

Hallo zusammen,
folgendes Problem auf Oldtimer und Motorrad Club (OMC) Mering: Startseite
Horizontales/vertikales Menü, welches sich responsiv an die Auflösung anpasst. Dabei treten folgende Probleme auf:
1.
Wenn das vertikale Untermenü ausklappt, überdeckt dieses nicht etwaige andere Menübestandteile Beispiel: http://www.omc-mering.de/images/webs...usgeklappt.jpg
Dadurch sind die Einträge nicht lesbar.
2. Wenn das Menü wie gewollt ab einer bestimmten Auflösung komplett vertikal dargestellt wird, können die ausklappenden Punkte der Untermenüs nicht mehr angewählt werden. Auch überdecken die untermenüpunkte wieder nicht den Hintergrund. Beispiel: http://www.omc-mering.de/images/webs...anz_schmal.jpg
Verhalten ist bei allen Browsern gleich: IE, FF, Chrome, Android, Blackberry

Da ich schon einiges hin und und her geschmissen habe, sehe ich wahrscheinlich den Wald vor lauter Bäumen nicht. Könnt ihr mal draufschauen und mir den richtigen Weg weisen?

Danke

HTML:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<html>
<head>
<title>Oldtimer und Motorrad Club (OMC) Mering: Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
...
<link rel="stylesheet" href="/css/version2.css" type="text/css"/>
</head>
<body alink="#999999" background="http://www.omc-mering.de/images/back.jpg" bgcolor="#000000" link="#999999" text="#eeeeee" vlink="#999999">

<div id="welcome">
	<table border="0" width="99%">
		<tbody>
			<tr>
				<td colspan="3" align="center" width="80%">
					<img src="http://www.omc-mering.de/images/logo_trans_280.gif" width="300">
				</td>
				<td class="text" align="center" width="20%">
					Wir sind<br>
					<a href="http://www.avd.de" target="avd">
						<img src="http://www.omc-mering.de/images/avd_koop.gif" border="0" width="125">
					</a>
					<br>
					Korporativclub<BR><br>
	...
				</td>
			</tr>
			<tr>
				<td colspan="2" width="50%">Nächster Stammtisch:<BR>19.10.2015 19:00<BR>Offener Stammtisch für jedermann<BR>Kirchenwirt Mering</td>
				<td colspan="2" width="50%">
					<table>
						<tr>
							<td>Unser Oldtimertreffen<BR>05.08.2016<BR><BR>Mering</td>
							<td><a href="show_info_db.php?inh_id=126" target=""><img src="data:image/png;base64" width="100px" alt=""/></a></td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="nav-open">
<a href="#nav" title="Menü anzeigen">Navigation anzeigen &darr;</a>
</div>
<div id="nav" style="text-align: justify;">
	<ul>
		<li><a href="logged_on_home_resp.php" title="Hauptseite">Home</a></li>
		<li><a href="mem_mitgl.php">Unsere Mitglieder</a></li>
		<li class="submenu"><a href="#News">Veranstaltungen / News</a>
		<ul>
			<li><a href="show_terms_db.php">Kalender</a></li>
			<li><a href="inhalt_edit.php?Art=News/Termin">Termin anlegen</a></li>
			<li><a href="inhalt_edit.php?Art=Tagesordnung">Tagesordnung anlegen</a></li>
			<li><a href="inhalt_edit.php?Art=Info">Infoseite anlegen</a></li>
		</ul>
		</li>
		<li>
		<a href="direktinfo.php?inh_id=90">Clubheim</a>
		</li>
		<li><a href="../mitglied_neu_db.php?inh_id=97">Mitglied werden?</a></li>
		<li class="submenu"><a href="#Chronik" title="Unsere Chronik">Chronik</a>
			<ul>
				<li class="submenu"><a href="#Alphabetisch">Alphabetisch</a>
					<ul>
						<li class="submenu"><a class="jahr" href="#1">1</a>
							<ul>
								<li><a href="show_chronik_db.php?inh_id=119" target="crinhalt">10 Jahre Schlepperfreunde Kissing</a></li>
							</ul>
						</li>
		...
					</ul>
				</li>
				<li class="submenu"><a href="#Chronologisch">Chronologisch</a>
					<ul>
						<li class="submenu"><a class="jahr" href="#2015">2015</a>
							<ul>
								<li><a href="show_chronik_db.php?inh_id=124" target="crinhalt">Benfitzkonzert beim Kirchenwirt</a></li>
		...
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="submenu"><a href="#Ansichtssachen">Ansichts-Sachen</a>
			<ul>
				<li><a class="jahr" href="#Bedienungsanleitung">Bedienungsanleitung</a>
					<ul>
						<li><a href="show_ansicht_pdf.php?inh_id=1" target="crinhalt">Bedienungsanleitung Magirus Deutz Mercur 150</a></li>
					</ul>
				</li>
				<li><a class="jahr" href="#Fun">Fun</a>
					<ul>
						<li><a href="show_ansicht_db.php?inh_id=77" target="crinhalt">Armes Deutschland</a></li>
					</ul>
				</li>
			</ul>
		</li>
		...
		<li class="close">
		<a href="#header">&uarr; Navigation ausblenden</a>
		</li>
	 </ul>
</div>
</body>
</html>

CSS:
Code:
.nav-open {
	display: none;	
}

#nav {
	position: fixed;
	top: 0px;
	float: none;
	width: 100%;
	margin: 20px auto;
	background: #333;
	font-family: Arial, sans-serif;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 5px #888;
	-moz-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav ul li {
	position: relative;
	float: left;
}

#nav ul li.close {
	display: none;
}


#nav ul li a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-decoration: none;
}

#nav ul li a:hover {
	background: #111;
	color: #aaa;
}

#nav ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

#nav ul ul li.submenu > a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

#nav ul li:hover {
  background: #4096ee;
}

#nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}

#nav ul ul li a {
  padding: 10px 20px;
}

#nav ul ul li:last-child {
  border-bottom: none;
}

#nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

#nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}


@media screen and (max-width: 800px) {
	
.nav-open {
	position: fixed;
	top: 0;
	left: 0;
	background: #333;
	font-family: Arial, sans-serif;
	display: block;
	width: 100%;
}

.nav-open a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;	
}
	
#nav {
	position: absolute;
	top: -200%;
	left: 0;
	float: center;
	width: 100%;
	margin: 0;
	padding: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#nav:target {
	top: 0;
}

#nav ul li {
	float: none;
	text-align: center;
	border-bottom: 1px solid #555;
}

#nav ul li.close {
	display: block;
}

#nav ul li:last-child {
	border-bottom: none;
}

}
#welcome{  font-size:14px;  font-family:Verdana;  position:relative;    font-weight:normal;  color:#005FA9;left:20px; top:60px;  }
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.10.2015, 22:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.050
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

ich möchte dir mal die folgenden Überlegungen unterbreiten:

Responsive Design dient dazu die Benutzerfreundlichkeit einer Webseite zu erhöhen.

Aufklappmenüs sind für die Besucher Hindernisse und demnach grade nicht benutzerfreundlich. Von daher sollte auf sie verzichtet werden.

Zum einen kennen die Besucher die Menüs nicht, müssen sich nach dem Trail-and-Error-Prinzip immer wieder durchklicken und finden für sie interessante Infos häufig doch nicht.

Zum anderen klappen die Menüs bei einem falschen Zucken mit der Mouse wieder zu und müssen wieder von vorne angegangen werden. Grade bei Unter-Untermenüs ist das einfach nur nervig.

Hinzu kommt, das Aufklappmenüs auf Touchscreens schwierig zu bedienen sind. Es gibt keinen Hover-Effekt und die Finger sind zwangsweise immer im Weg.

Es gibt auch keine technische Möglichkeit bei kleinen Bildschirmen / Fenstern ein Menü mit so vielen Unterpunkten benutzerfreundlich als Aufklappmenü zu gestalten. Du kannst dir zwar was zurechtzimmern, aber das wird nicht überzeugen.

Es ist deshalb sinnvoller die Navigation einer Webseite immer sichtbar zu belassen und Menüpunkte besser auf Unterseiten oder andere Stellen der Webseite zu verschieben.

Zum Beispiel können die Menüpunkte Unsere Mitglieder, Clubheim, Chronik, Impressum, Links und Kontakt in einen Footer verschoben werden. Dafür ist der Footer schließlich gedacht. Die werden eher selten aufgerufen oder interessieren nur die Besucher, deren Interesse bereits geweckt wurde.

Oder die Unterpunkte von Gastro-Tipps (Chronologisch, Alphabetisch, nach PLZ) sind viel besser auf einer Unterseite Gastro-Tipps aufgehoben, und dann ständig sichtbar.

Und so weiter.

Wenn du trotzdem bei den Aufklappmenüs bleiben willst und Hilfe benötigst ist es sinnvoller, wenn du dir eines heraussuchst, welches deinen Vorstellungen nahekommt, das responsive funktioniert und das hier verlinkst. Falls das Aufklappmenü ohne JavaScript funktionieren soll suche ein entsprechendes Beispiel.

Dann können wir dir eventuell weiterhelfen das in deine Seite einzubauen.

Gruss

MrMurphy

Geändert von MrMurphy (16.10.2015 um 22:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.10.2015, 08:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2015
Beiträge: 3
OMC Mering befindet sich auf einem aufstrebenden Ast
Standard Würde es gerne als "eine" Navigation beibehalten

Hallo MrMurphy,

vielen Dank für die Antwort.

Ich würde gerne das jetzige Design beibehalten. Aus folgenden Gründen:
Durch die Aufklapp-Untermenüs Sieht der Nutzer auf den ersten Blick was sich alles hinter diesem Punkt noch alles versteckt und muss sich nicht durch die weiteren Seiten hangeln.

Ebenso würde ich gerne auf einen Footer verzichten. Wenn der Inhalt der Seite sehr groß ist oder je nach Auflösung sehr lang, muss der Nutzer immer bis zum Seitenende scrollen um dorthin zu kommen. Mich persönlich regt das bei vielen anderen Seiten auf.

Auf den Hover kann ich verzichten, wenn die Menüs nur bei Anklicken angezeigt werden fände ich das sogar besser.

Vielleicht finden sich ja Lösungsansätze.

Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 17.10.2015, 12:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.050
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Könnt ihr mal draufschauen und mir den richtigen Weg weisen?
Schwierig. Aufklappmenüs und Responsive Design vertragen sich wie schon geschrieben nicht, sind sogar Gegensätze.

Siehe zum Beispiel

Einfaches Dropdown oder elegantes Styling | Webkrauts

Probier es selbst mal aus, indem du bei den folgenden Demoseiten das Browserfenster schmal zusammenziehst.

Von den folgenden Dropdown-Menüs ist keins responsive:

Dropdown-Menüs: 20 Demos von simpel bis schick ? inklusive Download und Tutorials | t3n

So simpel wie du es wahrscheinlich erhoffst ist das Thema also nicht.

Ich habe zum Beispiel folgende Anleitung gefunden

[CSS] Ein horizontales Dropdown-Menü responsive gestalten | olivergast.de

oder diese

Dropdown-Menü in reinem CSS, ohne JavaScript | DR. WEB

Die helfen dir hoffentlich weiter.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 18.10.2015, 06:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2015
Beiträge: 3
OMC Mering befindet sich auf einem aufstrebenden Ast
Standard Eine Lösung umgesetzt

Hallo ,

habe jetzt mit kleinen Änderungen eine Lösung (
[CSS] Ein horizontales Dropdown-Menü responsive gestalten | olivergast.de) umgesetzt. Darin wären noch kleine Änderungen notwendig:

1. Die Menüs sollen erst bein Draufklicken öffen, nicht bei "hover"

2. In Mobiler (Vertikaler) Ausrichtung sollen die Untermenüs erst bei Auswahl geöffnet werden.

3. Warum erscheint in vertikaler Anzeige die Checkbox?

Code:
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

#nav {
	position: absolute;
top: 0px;
  float: left;
  width: 100%;
  background: #3a3a3a;
  font-size: 16px;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}

#nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #fff;
  transition: 0.5s;
}

#nav ul li a {
  padding: 20px;
}

#nav ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

#nav ul ul li.submenu > a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

#nav ul li:hover {
  background: #4096ee;
}

#nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}

#nav ul ul li a {
  padding: 10px 20px;
}

#nav ul ul li:last-child {
  border-bottom: none;
}

#nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

#nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}
@media screen and (max-width: 1680px) {
  
* {
  font-size: 18px;
}
  
label.responsive-nav-label {
    position: absolute;
  display: block;
  padding: 20px;
  background: #222;
  cursor: pointer;
  color: #fff;
}
  
label.responsive-nav-label span {
  margin-right: 10px;  
}

#nav {
  position: absolute;
  top: -9999px;
  padding: 10px;
}

input#responsive-nav[type=checkbox]:checked ~ #nav {
  position: absolute;
  top: 0;
}

#nav a:after {
  display: none;
}

#nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important; 
}
  
#nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
  background: #4a4a4a;
}
  
#nav ul li:hover {
  background: none;
}
  
#nav ul li a:hover {
  background: #4096ee;
}
  
#nav ul ul {
  position: relative !important;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  background: none !important;
  box-shadow: none;
}
  
#nav ul ul li {
  padding-left: 20px;
}

}

#welcome{  font-size:14px;  font-family:Verdana;  position:relative;    font-weight:normal;  color:#005FA9;left:20px; top:60px; }
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<html>
<head>
<title>Oldtimer und Motorrad Club (OMC) Mering: Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META content="Mon, 19 Aug 1999 00:00:01 GMT" http-equiv=expires>
<META content="Copyright 2014 Lothar Haupt" name=author>
<META content="Homepage des Oldtimer & Motorrad Club (OMC) Mering/Bayern" name=description>
<META content="OMC, Mering, Bayern, Oldtimer, Oldie, Automobil, Automobilgeschichte, Pkw, Personenwagen, Zweirad, Motorrad, Moped, Biker, Lkw, Lastwagen, Nutzfahrzeug, Tracker, Bulldog, Motorclub" name=keywords>
<META content=de name=content-language>
<META content=robots name=follow>
<META content="30 days" name=revisit-after>
<link rel="stylesheet" href="/css/olivergast.css" type="text/css"/>
</head>
<body alink="#999999" background="http://www.omc-mering.de/images/back.jpg" bgcolor="#000000" link="#999999" text="#eeeeee" vlink="#999999">
    <input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label"><span></span> Navigation</label>
<div id="welcome">
<table border="0" width="99%">
	<tbody>
		<tr>
			<td colspan="3" align="center" width="80%">
				<img src="http://www.omc-mering.de/images/logo_trans_280.gif" width="300">
			</td>
			<td class="text" align="center" width="20%">
				Wir sind<br>
				<a href="http://www.avd.de" target="avd">
					<img src="http://www.omc-mering.de/images/avd_koop.gif" border="0" width="125">
				</a>
				<br>
				Korporativclub<BR><br>
				<a href="https://www.betterplace.org/de/projects/27490-spender-fur-neubau-vereinsheim-oldtimer-motorrad-club-mering-e-v" target="better">
					<img src="http://www.omc-mering.de/images/betterplace_dunkl.png">
				</a>
...
			</td>
		</tr>
		<tr>
			<td colspan="2" width="50%">
<Div class="term_text_schwarz">N�chster Stammtisch:<BR>19.10.2015 19:00<BR>Offener Stammtisch für jedermann<BR>Kirchenwirt Mering</div></td><td colspan="2" width="50%"><table><tr><td><Div class="term_text_schwarz">Unser Oldtimertreffen<BR>05.08.2016<BR><BR>Mering</div></td><td><a href="show_info_db.php?inh_id=126" target=""><img src="data:image/png;base64," width="100px" alt=""/></a></td></tr></table></td></tr></tbody></table>
</div>
<!--<div class="nav-open">
			<a href="#nav" title="Men� anzeigen">Navigation anzeigen &darr;</a>
</div>-->

<div id="nav" style="text-align: justify;">

  <ul>
    <li><a href="logged_on_home_resp.php" title="Hauptseite">Home</a>
</li>
 <li>
<a href="mem_mitgl.php">Unsere Mitglieder</a>
</li>
<li>
<a href="direktinfo.php?inh_id=90">Clubheim</a>
</li>
<li>
<a href="../mitglied_neu_db.php?inh_id=97">Mitglied werden?</a>
</li>
<li><a href="direktshow_terms_db.php">Veranstaltungen / News</a> <li class="submenu"><a href="#Chronik" title="Unsere Chronik">Chronik</a><ul>
<li class="submenu"><a href="#Alphabetisch">Alphabetisch</a><ul>
<li class="submenu"><a class="jahr" href="#1">1</a><ul><li><a href="show_chronik_db.php?inh_id=119" target="crinhalt">10 Jahre Schlepperfreunde Kissing</a></li></ul></li><li><a class="jahr" href="#A">A</a><ul><li><a href="show_chronik_db.php?inh_id=115" target="crinhalt">Anfängertour</a></li></ul></li><li><a class="jahr" href="#B">B</a><ul><li><a href="show_chronik_db.php?inh_id=124" target="crinhalt">Benfitzkonzert beim Kirchenwirt</a></li></ul></li><li><a class="jahr" href="#C">C</a><ul><li><a href="show_chronik_db.php?inh_id=121" target="crinhalt">Clubausflug Berchtesgaden</a></li></ul></li>...

<li class="submenu">
<a href="#Gastro">Gastro-Tipps</a>
<ul>
<li><a href="#Gastochr">Chronologisch</a></li>
<li><a href="#Gastochr">Alphabetisch</a></li>
<li><a href="#Gastochr">nach PLZ</a></li>
</ul>
</li>

<li>
<a href="#">Impressum</a>
</li>
 <li>
<a href="#">Links</a>
</li>
 <li>
<a href="#">Kontakt</a>
</li>
 <li>
<a href="/secure/logged_on_home.php?logtype="></a></li>
<!--<li class="close">
<a href="#header">&uarr; Navigation ausblenden</a>
</li>-->
 </ul>

</div>

</body>
</html>
Mit Zitat antworten
Antwort

Stichwörter
responsive menu, überdeckung

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 Menü - Anfänger benötigt Hilfe mauricen CSS 2 24.01.2013 12:44
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Hilfe bei CSS Menue gesucht CSS_Beginner CSS 2 21.09.2009 18:03
css menü - bitte schnell um hilfe :please costfree CSS 2 16.01.2009 13:55
hilfe: problem bei java script menü peppi Javascript & Ajax 0 24.07.2007 19:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:57 Uhr.