|
|||
Ö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 |
Sponsored Links |
|
|||
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> Code:
.oeffnungszeiten01 { width: 18rem; padding: 0.5rem; border: 2px solid gray; } .oeffnungszeiten01 p { display: flex; justify-content: space-between; margin: 0.3rem 0; } 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> MrMurphy Geändert von MrMurphy (10.07.2016 um 12:19 Uhr) |
Sponsored Links |
|
|||
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) |
|
|||
Hallo
Zitat:
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> 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> Code:
<section class="oeffnungszeiten01"> <p><p>Montag <span>9:00 Uhr bis 17:00 Uhr</span></p> Gruss MrMurphy |
|
|||
Hallo
Zitat:
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 |
|
||||
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? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |