Beiträge von MrMurphy

Hallo

Grundsätzlich solltest du HTML5 und CSS3 verwenden.

Dann sollte der viewport für hochauflösende Displays vorgegeben werden, zum Beispiel

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dazu gehört unter anderem auf Inline-CSS, veraltete HTML-Attribute und unnötige Elemente zu verzichten. Also

<h1><Willkommen</h1>

Das Styling wird dann per CSS erledigt. Du lieferst leider zu wenig Informationen um dir eine konkrete Lösung bieten zu können. Am besten wäre ein Link zu der Seite.

Wenn die Seite besucherfreundlich daherkommen soll, sollte die Schrift mindestens 20px groß sein. 16px ist zwar die übliche von den Browsern vorgegebene Größe, wird aber von vielen Besuchern als zu klein empfunden. Dies gilt speziell auch für Smartphones und Tablets die häufig zum Lesen nicht stabil justiert werden können, zum Beispiel in Bus und Bahn oder im Auto.

Die Wortbreite kann durch verschiedene Maßnahmen beeinflußt werden, wobei auch Responsive Design mit Media Queries verwendet werden sollte. Beispielsweise

• Anpassen der Außenabstände (padding, border, margin)
• durch Anpassung der Buchstabenabstände
• Ändern der Schriftart
• Stufenweises Ändern der Schriftgröße
• Flexibles Ändern der Schriftgröße

Was davon am sinnvollsten ist hängt von deiner restlichen Webseite ab.

Gruss

MrMurphy

Hallo

Zitat

Wie hast du das gemacht?

Das ist eine einfache Grafik. Ich habe dein drittes Beispiel genommen, davon ein Bildschirmfoto gemacht und im Bildbearbeitungsprogramm Gimp bearbeitet.

Ich wollte damit nur den Leuten, die sich mit Tabellen unter XHTML auskennen, zeigen, wie das Ergebnis deiner Ansicht nach wohl aussehen soll. Das ging auch für mich aus deiner Frage nicht eindeutig hervor. Damit scheine ich richtig zu liegen und jetzt können die Leute loslegen, die sich mit Tabellen auskennen.

Gruss

MrMurphy

Hallo

Ich vermute das es so aussehen soll:

Gruss

MrMurphy

Hallo

Ich habe deinen Quelltext mal korrigiert:

<p class="text1" style="color: violet">hier soll der Text durchgängig über die rechte Hälfte der Website gehen ... macht sie auch</p>
<table width="500" border="0" cellpadding="0" cellspacing="0">
   <tr class="text3">
      <td width="250" style="vertical-align: top; color: violet">
         <p class="text2"><span class="header">Überschrift 1</span>
            <br> Adressexy
            <br> 12345 woauchimmer
            <br> Telefon 0800303942
            <br>
            <a href="Inetadresse1" target="_blank" title="Website xy" alt="Website von y" style="color: violet">www.xyyxxy.de</a>
         </p>
      </td>
      <td width="250" style="vertical-align: top; color: violet;">
         <p class="text2"><span class="header">Überschrift 2</span>
            <br> Adresse2
            <br> 54321 woauchimmer2
            <br> Telefon 08002482352
            <br>
            <a href="Inetadresse2" target="_blank" title="Website der yx" alt="Website der xy" style="color: violet">wwwyxyxyxyx.de</a>
            <br><em>weitere Info</em>
         </p>
         <p>&nbsp;</p>
      </td>
   </tr>
</table>

Gruss

MrMurphy

Hallo

Zitat

Ist für mich interessant zu wissen, wenn das irgendwo geregelt ist...

Ja, das ist geregelt. Und zwar in den HTML5-Regeln, genannt Living Standard:

https://html.spec.whatwg.org/multipage/

Deine Frage deutet aber darauf hin dass du die Regeln nicht verstehen wirst.

Ich versuche das Verständnisproblem mal allgemeinverständlich zu darzustellen:

In der Straßenverkehrsordnung (StVO) sind verschiedene Vorfahrtregeln festgelegt. Die Vorfahrtregeln haben unterschiedliche Rangfolgen:

1. Rechts vor Links
2. Vorfahrt- / Vorfahrt achten-Schilder
3. Ampeln
4. Regelungen durch Polizeibeamte

Die Regeln sind eindeutig. Jeder der Fahrzeuge führt sollte sie kennen und auch bei unbekannten Kreuzungen oder Einmündungen problemlos anwenden können.

Atze Blaumann überlegt nun wie die Vorfahrt für eine bestimmte Kreuzung in ABC-Stadt geregelt ist. Dort gibt es keine Beschilderung, keine Ampel und erst recht keinen Polizeibeamten, der den Verkehr regelt. In der StVO steht zwar dass in solchen Fällen rechts vor links gilt. Dort steht aber nicht, dass diese Regelung auch auf diese bestimmte Kreuzung zutrifft. Deshalb bezweifelt Atze, dass dort rechts vor links gilt.

Wenn ihm die StVO vorgelegt wird sucht er nach der Kreuzung und findet sie nicht. Deshalb behauptet er nun dass die StVO die Vorfahrt für diese bestimmte Kreuzung überhaupt nicht regelt.

Wie willst du ihn überzeugen, dass dort rechts vor links gilt? In der StVO ist das zwar eindeutig geregelt, aber Atze hat insoweit recht, dass diese spezielle Kreuzung in der StVO nicht aufgeführt ist. Oder würdest du sogar sagen, dass Atze Recht hat? Ich denke mal eher nicht.

Die HTML-Regeln sind ähnlich eindeutig wie die StVO, auch wenn dort wie in der StVO natürlich nicht jeder Einzelfall aufgeführt werden kann. Nur weil in dem Living Standard keine Elemente für Öffnungszeiten erwähnt sind heißt dass also noch lange nicht, das sie dort nicht geregelt sind.

Genau so wenig wie ich Atze in einem Gesetz zeigen kann, dass für die bestimmte Kreuzung rechts vor links geht kann ich dir in einer Regelung zeigen mit welchen HTML-Elementen Öffnungszeiten ausgezeichnet werden sollen. Trotzdem ist beides geregelt.

Gruss

MrMurphy

Hallo

Zitat

So dürfen die Tag's wie, <pre>, <Table>,<span>, u.s.w. für Öffnungzeiten durchaus verwendetet werden

Das kommt auf den Zusammenhang an.

Das jeder seine Webseite selbst nach eigenen Regeln erstellen kann und darf habe ich schon oft geschrieben. Er kann Tabellen und andere Elemente nach Lust und Laune verwenden.

Wenn der Webseitenersteller jedoch seine Webseite als Qualitäsmerkmal als mit HTML5 und CSS3 erstellt ausweisen will muss er sich auch an die Regeln von HTML5 und CSS3 halten. In dem Zusammenhang ist die Verwendung des table-Elements oder des ul- und ol-Elements für Öffnungszeiten sachlich falsch. Nach den Regeln von HTML5 sind das dl-Element mit den dt- und dd-Elementen oder das p-Element mit dem span-Element zulässig. Das pre-Element ist auch nicht ausgeschlossen, wird aber in der Regel nichts ins Layout passen. Es darf, sollte aber nicht, verwendet werden. Es kann auch noch andere zulässige Elemente geben, die ich zur Zeit nicht auf dem Radar habe.

Sofern der Fragende keine anderweitigen Angaben macht gehe ich aktuell davon aus, dass er als Grundlage HTML5 und CSS3 verwenden möchte und antworte entsprechend.

Gruss

MrMurphy

Hallo

Öffnungszeiten sind keine Tabellendaten.

Zitat

Das Prinzip, die Uhrzeiten untereinander zu formatieren ist vom Prinzip her ähnlich, wie wenn man das mit Span's macht.

Bei Tabellendaten kommt es nicht auf das Layout an. Hier muss zwischen Tabellendaten und Tabellendarstellung unterschieden werden.

Bei vielen Daten ist eine Tabellendarstellung sinnvoll und schafft Übersicht. Das trifft auf viele Listen zu. Das ist aber keine Entscheidung ob es sich um Tabellendaten handelt.

Echte Tabellendaten, für die das table-Element gedacht ist, kommen in freier Wildbahn sehr selten vor. In den letzten Jahren gibt es für Webseiten viele neue Möglichkeiten Daten in Tabellendarstellung anzuzeigen. In aktuellen HTML- und CSS-Büchern wird deshalb kaum noch auf das table-Element eingegangen. Für normale Webseitenersteller ist es bereits mehr oder weniger überflüssig geworden.

In der Umgangsprache werden viele Listen und andere Tabellendarstellungen als Tabellen bezeichnet. Davon lassen sich leider viele Webseitenersteller täuschen. Ein Beispiel ist zum Beispiel die Bundesligatabelle. Sachlich handelt es sich aber schlicht um eine Liste. Gleiches gilt für Datenbanken. Deren Inhalt ist nicht auf Tabellen sondern auf Listen aufgeteilt. Da die in der Regel sinnvoll in Tabellendarstellung angezeigt werden können werden die Listen fälschlicherweise als Tabellen bezeichnet. Genau so wenig ist Excel sachlich eine Tabellenkalkulation.

Durch diesen Mißbrauch der Bezeichnung "Tabelle" sind viele User falsch geimpft und können zwischen Tabellen und Tabellendarstellung nicht unterscheiden.

Gruss

MrMurphy

Hallo

Der Link zu der Seite fehlt.

Hast du mal

<link type="text/css" rel="stylesheet" media="screen and (max-width:800px)" href="CSS/mobile.css">

probiert?

Wobei dein Vorgehen sich bereits als Irrweg erwiesen hat. Warum gehst du ihn trotzdem?

Gruss

MrMurphy

Hallo

Zitat

Manche bootstrap erstellte seiten sehen echt voll mager aus...

Und das ist auch gut so. Grade Anfänger machen gerne den Fehler die Darstellung ihrer Seite so zu überfrachten, dass die Besucher Schwierigkeiten haben das Entscheidende zu finden - die wirklichen Informationen.

Ich findes es immer wieder lustig, wenn Webseitenersteller ihre eigenen Seiten durch "innovative" Farbgebung, Showgrafiken, Kinderschriften, Blinki und ähnliche Effekte mehr oder weniger unleserlich machen, sich aber bei eigenen Suchen nach Informationen im Internet genau über solche Seiten aufregen ("Da findet man ja gar nichts").

Zitat

Was ist besser ?

Keine der beiden Möglichkeiten.

Grundlagenwissen von HTML und CSS erfordern beide Wege.

Bootstrap ist für Leute sinnvoll, die schnell Ergebnisse erreichen möchten und bei HTML / CSS nicht ständig den neusten Entwicklungen hinterherlaufen wollen. Der Nachteil ist, dass (ohne eigenes CSS) die Möglichkeiten von Bootstrap eingeschränkt sind und der Quelltext mit eigentlich unnötigen Containern überladen und entsprechend unübersichtlich ist.

Ein weiterer Nachteil ist, dass der Inhalt den Bootstrap-Möglichkeiten mit dem 12-Grid-Raster angepasst werden muss. Grade Anfänger sind dann immer wieder enttäuscht, dass sie ihre Vorstellungen nicht direkt umsetzen können. Sie müssen dann doch mühsam eigene CSS-Lösungen finden und so in Bootstrap einbinden, dass Bootstrap nicht gestört wird.

Die Lebenszeit von Bootstrap 3 neigt sich dem Ende entgegen. Von daher sollten grade private User überlegen gleich mit Bootstrap 4 zu beginnen, obwohl es noch entwickelt wird. Für den privaten Einsatz erscheint es mir bereits hinreichend stabil zu sein und man hat nicht bereits in einem, zwei Jahren eine veraltete Seite.

Mit eigenen HTML / CSS kann und sollte die Seite dem Inhalt angepasst werden. Damit kann das Design ansprechender gestaltet werden, grade was die Anpassung an unterschiedliche Bildschirmgrößen angeht. Allerdings muss sich der Webseitenersteller um jede "Kleinigkeit" selbst kümmern, die in Bootstrap bereits berücksichtigt ist. Zum Beispiel die Anpassung an das teilweise unterschiedliche Verhalten der Browser.

Die Frage kann also nicht lauten, welche der beiden Möglichkeiten besser ist. Sondern: Welche Möglichkeiten / welches Vorwissen hat der Webseitenersteller und was will er / sie erreichen.

Für Ebay-Angebote und -Vorlagen ist Bootstrap zum Beispiel nicht geeignet. Wer hingegen eine Website über seine Familie, sein Hobby oder seinen Verein erstellen möchte erreicht mit Bootstrap schnell Ergebnisse und kann sich auf das Entscheidende konzentrieren: Die Informationen für seine Besucher.

Gruss

MrMurphy

Hallo

Deine Fragestellung ist leider nicht deutlich genug um sie zu beantworten.

Vielleicht hilft dir der folgende Artikel weiter:

https://www.drweb.de/magazin/respon…hne-javascript/

Gruss

MrMurphy

Hallo

Zitat

Wie kann ich es machen, dass diese span-elemente auch beim verlassen langsam zurück rotieren/moven?

Wenn eine Transition beim Hovern und beim Verlassen aktiv werden soll muss sie im Ausgangszustand stehen.

Also statt

span.zusatz
{
    position: relative;
    display: block;
    top: -15px;
    left: 50px;
    color: white;
    padding-left: 5px;
}


.top:hover .zusatz 
{
    transition: all 0.5s ease-in;
    transform: rotate(90deg);
    color: red;
}

folgendermaßen

span.zusatz
{
    position: relative;
    display: block;
    top: -15px;
    left: 50px;
    color: white;
    padding-left: 5px;
    transition: all 0.5s ease-in;
}


.top:hover .zusatz 
{
    transform: rotate(90deg);
    color: red;
}

Gruss

MrMurphy

Hallo

Ja. Aber es ist sinnvoller die Breite der inneren Container zu begrenzen.

Gruss

MrMurphy

Hallo

Erweitere in der easy-style.css die Anweisung

.easy-tabs-nav.tabs-nav li:nth-child(n+2) a::before {
    content: "⦁";
    margin-right: 15px;
}

zu

.easy-tabs-nav.tabs-nav li:nth-child(n+2) a::before {
    content: "⦁";
    margin-right: 15px;
    color: black;
}

Gruss

MrMurphy

Hallo

Es kann sein dass der Umweg über den Quellcode des Forums nicht funktioniert.

Ich habe von der folgenden Seite das dritte Zeichen in der dritten Seite direkt markiert und kopiert:

https://www.key-shortcut.com/zeichentabelle…-tabelle-2.html

Mit einem Windows-Rechner kannst du auch die Alt-Taste gedrückt halten und dabei gleichzeitig auf dem Ziffernblock 0149 tippen (Windows-Shortcut). Dann erscheint auch ein Punkt. Wenn er dir nicht gefällt kannst du auch nach anderen suchen, es gibt verschiedene.

Mögliche Windows-Shortcuts findest du unter

https://www.key-shortcut.com/html-entities/alle-entitaeten/

Windows-Shortcuts eignen sich auch für Zeichen, die über die Tastatur nicht erreichbar sind und häufiger benötigt werden. Ich verwende zum Beispiel häufig das geschützte Leerzeichen (Alt+255) damit Einheiten wie Euro oder kg immer in der gleichen Zeile bleiben.

Gruss

MrMurphy

Hallo

Du kannst folgendes CSS hinzufügen:

.easy-tabs-nav.tabs-nav li:nth-child(1n+2) a {
   padding-left: 0;
}
.easy-tabs-nav.tabs-nav li:nth-child(1n+2) a:before {
   content: "•";
   margin-right: 10px;
}

Zum Testen am Besten zunächst am Ende des Internen-CSS.

Gruss

MrMurphy

Hallo

Mein HTML hast du aber schon gelesen? Listen sind für die Navigation überflüssig.

Gruss

MrMurphy

Hallo

Flexbox ist dein Freund. Float kann derweil Pause machen und Aufgaben übernehmen für die es gedacht ist.

Also

HTML:

<nav>
   <a href="">Startseite</a>
   <a href="">Regeln</a>
   <a href="">Tippen</a>
   <a href="">Punktestand</a>
</nav>

und das CSS:

* {
   box-sizing: border-box;
}
nav {
   display: flex;
   justify-content: space-around;
}
nav a {
   background-color: #8c6429;
   color: #e7f3ef;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   padding: 0.5rem 0.3rem;
   border: 1px solid #73726D;
   flex: 1 1 auto;
}
nav a:hover,
nav a:active,
nav a:focus {
   background-color: #e7f3ef;
   color: #8c6429;
}

Gruss

MrMurphy

Hallo

Ich würde dir gerne helfen verstehe aber nicht was du erreichen willst.

Gruss

MrMurphy

Hallo

Keine Ahnung. Zur Beantwortung der Frage benötigen wir deinen HTML-Quelltext und deine Bilder. Am besten wäre ein Link zu der Seite.

Aus ein paar Quellcodeschnipseln können Probleme nicht erkannt werden. Die Ursachen liegen häufig an ganz anderer Stelle.

Gruss

MrMurphy

Hallo

Zitat

Kann mir da jemand sagen, warum das so ist?

Ja, das orientiert sich an der Praxis und ist für Anfänger nicht unbedingt nachvollziehbar.

Wenn sich padding-top/-bottom mit Prozentangaben an der Fensterhöhe orientieren würden würde das Layout schnell unansehnlich werden. Deshalb richten sie sich nach der Fensterbreite.

Du kannst das folgendermaßen ausprobieren:

Ändere mal

#topbar{
...
    padding-top:1%;
...
}

auf 10%.

Dann verkleinere und vergrößere mal die Fensterhöhe. Am padding-top wird sich nichts ändern.

Anschließend verkleinere mal die Fensterbreite. Das padding-top wird kleiner werden und bei einer Vergrößerung der Fensterbreite entsprechend größer. Laß dich nicht durch das Umspringen der roten Container irritieren oder lösch testweise mal drei der Container.

Das Verhalten ist so gewollt.

Gruss

MrMurphy