zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Öffnungszeiten mit Abständen gestalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.07.2016, 11:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2016
Beiträge: 4
Arya befindet sich auf einem aufstrebenden Ast
Standard Öffnungszeiten mit Abständen gestalten

Hallo

ich möchte gerne auf einer Webseite die Öffnungszeiten auflisten, sodass die Uhrzeiten der einzelnen Tage schön untereinander stehen.

Da mein Beispiel hier leider genauso aussieht wie auf der Webseite und die Uhrzeiten direkt hinter den Tagen stehen, folgt eben ein Beispiel des Problems:
Montag 9:00 Uhr bis 17:00 Uhr
Dienstag 9:00 Uhr bis 17:00 Uhr
Mittwoch 9:00 Uhr bis 17:00 Uhr
Donnerstag 9:00 Uhr bis 17:00 Uhr
Freitag 9:00 Uhr bis 17:00 Uhr

Ich habe leider absolut keine Ahnung, wie ich das vernünftig hinkriegen kann Habe nun schon nach einigen Lösungsansätzen gegoogelt (Tab einfügen, absolute Positionierung und eine durchsichtige Tabelle), aber entweder wird der dazugehörige Code von Wordpress geschluckt und/oder ich bin einfach zu doof dafür.

Es würde mich sehr freuen, wenn ihr mir Tipps geben könntet
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.07.2016, 12:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Am sinnvollsten wäre ein Link zu der Seite. Zu Wordpress gibt es viele Themes, die jeweils ihr eigenes CSS mitbringen.

Da Öffnungszeiten keine Tabellendaten sind wäre eine HTML-Tabelle (table-Element) sachlich falsch.

Es gibt unterschiedliche Lösungen, zum Beispiel mit dem dl-Element oder eine Tabellendarstellung mittels CSS.

Mit deinen Angaben würde ich einfach die Öffnungszeiten in span-Elemente setzen und das ganze per Flexbox formatieren. Die Breite und damit der Abstand von Tagen und Zeiten wird über die Breite (width) des umgebenden Elements gesteuert. In meinem Beispiel das section-Element.

Also HTML:

Code:
<section class="oeffnungszeiten01">
   <p>Montag <span>9:00 Uhr bis 17:00 Uhr</span></p>
   <p>Dienstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
   <p>Mittwoch <span>9:00 Uhr bis 17:00 Uhr</span></p>
   <p>Donnerstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
   <p>Freitag <span>9:00 Uhr bis 17:00 Uhr</span></p>
</section>
und CSS:

Code:
.oeffnungszeiten01 {
   width: 18rem;
   padding: 0.5rem;
   border: 2px solid gray;
}
.oeffnungszeiten01 p {
   display: flex;
   justify-content: space-between;
   margin: 0.3rem 0;
}
Statt der Einheit rem kannst du natürlich auch em oder px verwenden.

Eine gesamte Seite würde zum Beispiel folgendermaßen aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Öffnungszeigen 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      .oeffnungszeiten01 {
         width: 18rem;
         padding: 0.5rem;
         border: 2px solid gray;
      }
      .oeffnungszeiten01 p {
         display: flex;
         justify-content: space-between;
         margin: 0.3rem 0;
      }
   }

   </style>
</head>
<body>
   <main role="main">
      <section class="oeffnungszeiten01">
         <p>Montag <span>9:00 Uhr bis 17:00 Uhr</span></p>
         <p>Dienstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
         <p>Mittwoch <span>9:00 Uhr bis 17:00 Uhr</span></p>
         <p>Donnerstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
         <p>Freitag <span>9:00 Uhr bis 17:00 Uhr</span></p>
      </section>
   </main>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (10.07.2016 um 12:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.07.2016, 14:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2016
Beiträge: 4
Arya befindet sich auf einem aufstrebenden Ast
Standard

Erst einmal danke für die Antwort.

Der Link zu der Seite lautet: Ihre Schuldnerberatung vor Ort - Schuldner Insolvenzberatung

Als Theme verwende ich Enfold.

Habe die Schritte von dir umgesetzt, jedoch scheint Enfold dazwischen zu funken. Sobald ich den HTML-Code abspeicher, wird dieser automatisch geändert in:

Code:
<section class="oeffnungszeiten01">Montag 9:00 Uhr bis 17:00 Uhr

Dienstag 9:00 Uhr bis 17:00 Uhr

Mittwoch 9:00 Uhr bis 17:00 Uhr

Donnerstag 9:00 Uhr bis 17:00 Uhr

Freitag 9:00 Uhr bis 17:00 Uhr

</section>

Geändert von Arya (10.07.2016 um 14:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.07.2016, 14:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
wird dieser automatisch geändert in
Das kann ich nicht so ganz nachvollziehen. In der verlinkten Seite wird der Quelltext folgendermaßen angezeigt:

Code:
<section class="oeffnungszeiten01">Montag <span>9:00 Uhr bis 17:00 Uhr</span></p>
<p>Dienstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
<p>Mittwoch <span>9:00 Uhr bis 17:00 Uhr</span></p>
<p>Donnerstag <span>9:00 Uhr bis 17:00 Uhr</span></p>
<p>Freitag <span>9:00 Uhr bis 17:00 Uhr</span></p>
</section>
Es fehlt also nur das erste öffnende p-Tag vor Montag.

Warum das verschwindet kann ich nicht nachvollziehen. Vielleicht hilft etwas tricksen? Hast du mal versucht statt

Code:
      <section class="oeffnungszeiten01">
         <p>Montag <span>9:00 Uhr bis 17:00 Uhr</span></p>
folgendes einzugeben:

Code:
      <section class="oeffnungszeiten01">
         <p><p>Montag <span>9:00 Uhr bis 17:00 Uhr</span></p>
Vielleicht verschwindet dann nur ein p-Tag?

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 10.07.2016, 15:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2016
Beiträge: 4
Arya befindet sich auf einem aufstrebenden Ast
Standard

Beruhigt mich, dass nicht nur ich das nicht nachvollziehen kann x)

Hab's eben ausprobiert, leider mit dem selben Resultat.

Hast du vielleicht noch andere Vorschläge bzw. Ideen?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.07.2016, 16:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Hast du vielleicht noch andere Vorschläge bzw. Ideen?
Nein, leider nicht.

Ich kenne das Enfold-Theme zwar nicht. Es scheint aber eines der beliebtesten kommerziellen Themes zu sein.

Von Problemen durch von Enfold geänderten Quelltexten habe ich aber nichts gelesen. Von daher vermute ich eher dass die Quelltextänderungen eine andere Ursache haben. Wenn durch das Theme Tags gelöscht werden würden wäre es in der Praxis auch unbenutzbar.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 10.07.2016, 16:26
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Würde es eher auf die "autop"-Funktion von Wordpress schieben, und dass sie nicht mit der section klar kommt in gewisser Weise.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #8 (permalink)  
Alt 10.07.2016, 16:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Dann kann Arya ja einfach mal div statt section ausprobieren. Am CSS muss dazu nichts geändert werden.

Gruss

MrMurphy
Mit Zitat antworten
  #9 (permalink)  
Alt 10.07.2016, 17:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2016
Beiträge: 4
Arya befindet sich auf einem aufstrebenden Ast
Standard

Super, es hat geklappt! Vielen lieben Dank für die Hilfe!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.07.2016, 10:12
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Nur mal so nebenbei, das ist der perfekte Anwendungsfall für eine Definitionsliste:
HTML-Code:
<dl>
	<dt>Montag</dt>
	<dd>9:00 Uhr bis 17:00 Uhr</dd>
	<dt>Dienstag</dt>
	<dd>9:00 Uhr bis 17:00 Uhr</dd>
	<dt>Mittwoch</dt>
	<dd>9:00 Uhr bis 17:00 Uhr</dd>
	<dt>Donnerstag</dt>
	<dd>9:00 Uhr bis 17:00 Uhr</dd>
	<dt>Freitag</dt>
	<dd>9:00 Uhr bis 17:00 Uhr</dd>
</dl>
Mit Zitat antworten
Sponsored Links
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
Problem mit CSS Abständen CM-Online CSS 2 27.06.2016 20:51
CSS Layout responsive gestalten? moozastyle CSS 2 10.02.2015 23:20
Litebox zugänglich gestalten Geronimo Barrierefreiheit 24 30.08.2007 16:53
Urls barrierefrei gestalten lal Barrierefreiheit 4 02.03.2007 15:53
(x)html mit xsl/t gestalten schaf (X)HTML 2 30.06.2005 13:52


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