Wie wird so etwas gelöst, bin nicht dahinter gekommen

[besi]

Hallo,

auf folgender Seite:dieses Beispiel ist unten im Footer eine horizontale Linie. Ich bin leider noch nicht dahinter gekommen wie das gelöst ist. Es sind drei Spalten die beim Verkleinern die horizontale Linie mit der Überschrift umbrechen. Wie bekomme ich das hin wenn ich drei Boxen erstelle und die Überschrift unterschiedlich goß ist damit die horizontale Linie auf gleicher Höhe durchgehend ist.

In jede Box eine Linie erstellen geht nicht da der Text unterschiedlich groß ist.

lg Stefan

[Matthias Scharwies]

Servus!

Hallo,

auf folgender Seite:dieses Beispiel ist unten im Footer eine horizontale Linie. Ich bin leider noch nicht dahinter gekommen wie das gelöst ist. Es sind drei Spalten die beim Verkleinern die horizontale Linie mit der Überschrift umbrechen. Wie bekomme ich das hin wenn ich drei Boxen erstelle und die Überschrift unterschiedlich goß ist damit die horizontale Linie auf gleicher Höhe durchgehend ist.

In jede Box eine Linie erstellen geht nicht da der Text unterschiedlich groß ist.

Das ist ein Pseudoelement des Footers:

.footer::after {
    content: '\00a0';
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,.5);
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;

Ich bin mit F12 in den Seiteninspektor gegangen und habe jedes Element aufgemacht. Unter den Kindelementen werden auch Pseudoelemente wie :after angezeigt:

Dort anklicken, dann erscheinen die CSS-Regelsätze.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo besi,

danach war zwar nicht gefragt, aber die div-Suppe ist schon ganz schön übel.

<div class="footer-wrapper">
  <footer class="footer">
    <div class="footer-box footer-box-1">
      <div class="footer-box-heading footer-box-logo"></div>
      <div class="footer-box-content">
        <div class="footer-box-name">Familie Mustermann</div>
        <div class="footer-box-address">Str. 3 | D-00000 Dorf</div>
        <div class="footer-box-phone">[phone] und 12346</div>
        <div class="footer-box-contact"><a class="button button-1" href="/service-kontakt/kontakt">E-Mail Kontakt</a></div>
      </div>
    </div>
    <div class="footer-box footer-box-2">
      <div class="footer-box-heading">Text</div>
      <div class="footer-box-content sprite-before">Text</div>
    </div>
    <div class="footer-box footer-box-3">
      <div class="footer-box-heading">Quicklinks</div>
      <div class="footer-box-content">
        <ul class="footer-box-list">
          <li class="footer-box-list-item footer-box-list-item-kontakt"><a class="sprite-before" href="/service-kontakt/kontakt">Kontaktanfrage</a></li>
          <li class="footer-box-list-item footer-box-list-item-anfahrt"><a class="sprite-before" href="/service-kontakt/anfahrt">Lage &amp; Anfahrt</a></li>
          <li class="footer-box-list-item footer-box-list-item-video"><a class="sprite-before" href="/freizeit/videos">Videos</a></li>
        </ul>
      </div>
    </div>    
  </footer>
</div>

Daran solltest du dir kein Beispiel nehmen.

Bis demnächst
Matthias

[klawischnigg]

Hi there,

danach war zwar nicht gefragt, aber die div-Suppe ist schon ganz schön übel.

<div class="footer-wrapper">
  <footer class="footer">
.....…

Daran solltest du dir kein Beispiel nehmen.

Jede Wette, daß das aus einem CMS wie Drupal, Joomla oder ähnlichem kommt. Alle "großen" CM-Systeme generieren div-Suppe als HTML-Source. Was ja idR auch komplett egal ist, weil es ohnehin niemand bearbeitet. Aber schön, daß wir jetzt wieder einmal gesehen haben, daß Du es besser weißt…

[Gunnar Bittersmann]

@@klawischnigg

… div-Suppe als HTML-Source. Was ja idR auch komplett egal ist, weil es ohnehin niemand bearbeitet.

Du erzählst mal wieder Bullshit.

<div class="footer-box-heading">Quicklinks</div> ist keine Überschrift.

<h2 class="footer-box-heading">Quicklinks</h2> ist eine Überschrift.

Wenn du ausschließlich die visuelle Präsentation im Kopf hast, hast du Webdesign nicht verstanden und solltest beim Print bleiben.

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

<h2 class="footer-box-heading">Quicklinks</h2> ist eine Überschrift.

richtig. Warum nur diese seltsame Klassenbezeichnung dazu?

<footer>
  <h2>Quicklinks</h2>
</footer>

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo Felix,

ich nehme an, die Templates von den bekannteren CMS sind über die Jahre gewachsen und niemand hat Bock, sie grundzusanieren. Dafür bekommt man nämlich kaum Lob und gar kein Geld, nur Geschrei von Anwendern und Addon-Autoren, die die div-Suppe als „is nu mal so“ hingenommen haben und durch die Sanierung aus der Kurve fliegen. Legacy ist der Feind der Veränderung.

Ich hätte bei der hier genannten Seite dann aber einen meta-Eintrag erwartet der auf das CMS hinweist. Der fehlt, der Autor kann also auch ein ungeschickter Samplekopierer sein.

Rolf

[marctrix]

Hej Rolf,

ich nehme an, die Templates von den bekannteren CMS sind über die Jahre gewachsen und niemand hat Bock, sie grundzusanieren. Dafür bekommt man nämlich kaum Lob und gar kein Geld, nur Geschrei von Anwendern und Addon-Autoren, die die div-Suppe als „is nu mal so“ hingenommen haben und durch die Sanierung aus der Kurve fliegen. Legacy ist der Feind der Veränderung.

Desto wichtiger finde ich es, bei neuen Projekten darauf hinzuweisen, dass das unnötig den Code aufbläht und nicht nur aber besonders bei handgeschriebenen Seiten sehr schnell sehr unübersichtlich wird.

Auch heute darf man vielleicht mal noch ab und zu auf den CSS-Zen-Garden hinweisen 😉

Man braucht nun mal nicht viel HTML (und schon kein umsemantisches / semantisch falsches), um selbst komplexeste Layouts umzusetzen.

Marc

[Gunnar Bittersmann]

@@Felix Riesterer

<h2 class="footer-box-heading">Quicklinks</h2> ist eine Überschrift.

richtig. Warum nur diese seltsame Klassenbezeichnung dazu?

Völlig richtig, aber das Fass wollte ich hier gar nicht aufmachen. Mir ging’s in erster Linie darum, klawischnigg zu widersprechen, dass das Markup völlig egal wäre. Dass der Wust von Klassen bei vernünftigem Markup nicht notwendig ist, ist nochmal eine andere Diskussion.

LLAP 🖖

[klawischnigg]

Hi there,

Völlig richtig, aber das Fass wollte ich hier gar nicht aufmachen. Mir ging’s in erster Linie darum, klawischnigg zu widersprechen, dass das Markup völlig egal wäre.

Du hast mir nicht widersprochen. Du hast auf ein Posting geantwortet, daß so niemand verfasst hat…

[klawischnigg]

Hi there,

… div-Suppe als HTML-Source. Was ja idR auch komplett egal ist, weil es ohnehin niemand bearbeitet.

Du erzählst mal wieder Bullshit.

Ja dann…

<div class="footer-box-heading">Quicklinks</div> ist keine Überschrift.

<h2 class="footer-box-heading">Quicklinks</h2> ist eine Überschrift.

Was Du nicht sagst…

Wenn du ausschließlich die visuelle Präsentation im Kopf hast, hast du Webdesign nicht verstanden und solltest beim Print bleiben.

Offenbar hast Du mein Posting nicht verstanden. Ich habe lediglich darauf hingewiesen, daß der gezeigte HTML-Sourcecode höchstwahrscheinlich von einem CMS stammt und Kritik daran aus diesem Grunde ziemlich entbehrlich ist.

Das hat mit meiner Vorstellung von visueller Präsentation, Webdesign oder gar Print (was immer Du damit gemeint haben könntest) genau so viel zu tun wie Deine lustige Interpretation meines Postings mit dem von mir Beabsichtigten - nämlich nichts…

[besi21]

Danke für die Info, noch kurz zur DIV Suppe. Das ist bei Wordpress auch nicht anderst. Als ich früher vor dem ganzen Content Management Zeitalter alles noch von Hand eingegeben habe hat es gut ausgeschaut aber heute ist das fast nicht mehr möglich so einfach zu erstellen.

Übrigens wollte ich mich anmelden aber es geht nicht. Passwort zurücksetzen ebenso nicht. Wenn ich das Passwort zurücksezten möchte kommt die Meldung Account bestätigen das habe ich aber schon gemacht. Sorry klappt leider nicht deshalb besi21

[Matthias Apsel]

Hallo besi21,

Übrigens wollte ich mich anmelden aber es geht nicht.

Ein Account, der dir zugeordnet werden kann, wurde gestern erstellt. Was passiert denn, wenn du dich mit deinem Benutzernamen und deinem Passwort anmelden möchtest?

Bis demnächst
Matthias

[besi21]

Es kommt ein roter Balken oben dort steht folgendes drin.

Sie müssen Ihren Account bestätigen, bevor Sie fortfahren können!

[Matthias Apsel]

Hallo besi21,

Sie müssen Ihren Account bestätigen, bevor Sie fortfahren können!

Hast du eine Mail bekommen "Anleitung zur Bestätigung Ihres Accounts"? Hast du auch im Spamfilter nachgeschaut?

Bis demnächst
Matthias

[besi21]

Die Meldung zum Bestätigen hatte ich einmal bekommen und dies auch druchgeführt. Wenn ich nun Passwort vergessen klicke kommt immer die Meldung für das neue Passwort. Gebe ich dies ein kommt die zuvor genannte Meldung. Noch nie so was erlebt.

[Matthias Apsel]

Hallo besi21,

Die Meldung zum Bestätigen hatte ich einmal bekommen und dies auch druchgeführt. Wenn ich nun Passwort vergessen klicke kommt immer die Meldung für das neue Passwort. Gebe ich dies ein kommt die zuvor genannte Meldung. Noch nie so was erlebt.

Dann muss sich das der @Christian Kruse mal anschauen.

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

Jede Wette, daß das aus einem CMS wie Drupal, Joomla oder ähnlichem kommt. Alle "großen" CM-Systeme generieren div-Suppe als HTML-Source.

Nein. Das hängt vom Template ab.

Grüße,

RIDER

[klawischnigg]

Aloha ;)

Jede Wette, daß das aus einem CMS wie Drupal, Joomla oder ähnlichem kommt. Alle "großen" CM-Systeme generieren div-Suppe als HTML-Source.

Nein. Das hängt vom Template ab.

Technisch ja. Praktisch ist es eine andere Version des von mir Gesagten. Aber wenn es Dir besser geht, wenn ich die Behauptung aufstelle, daß die meisten CMS Templates verwenden, die DIV-Suppe generieren, dann stehe ich nicht an, dieses Dir zuliebe auch zu tun…

[besi21]

Hangt das mit der DIV Suppe am Template? Als ich füher mit Typo3 gearbeitet hatte konnte man das mit Typo Script abändern und regulieren. Wie das mit Word Press geht hab ich noch nicht nachgelesen.

[Camping_RIDER]

Aloha ;)

Hangt das mit der DIV Suppe am Template?

Ja, in den meisten Fällen. Natürlich kommts auch noch drauf an, wie das CMS gestrickt ist und wie es seine Inhalte zusammenstellt.

Ich will mal am Beispiel Joomla! bleiben, weil ich darüber was sagen kann. In Joomla wird im Grunde genommen der Inhalt von selbstgeschriebenen Artikeln in ein Template eingesetzt.

Das Template ist normalerweise entweder handgestrickt (wie im von mir verlinkten Beispiel) und kann deshalb auch ohne div-Suppe daherkommen, oder von einem Drittanbieter – und da kommts natürlich drauf an, wo der seine Prioritäten liegen hat, aber auch in dem Fall kann es sein, dass keine DIV-Suppe bei rauskommt.

Der selbstgeschriebene Artikel wird in den meisten Fällen wohl in einen WYSIWYG-Editor gehackt, die sind aber meist auch so gut, dass sie keine DIV-Suppe erzeugen. Die erzeugen deshalb nicht immer sinnvolles Markup, aber zumindest keine DIV-Suppe.

Aus meiner Erfahrung heraus wird durch das CMS selbst (abgesehen vom Template, das ich nicht direkt als Teil des CMS sondern als user-generated content betrachte) äußerst wenig Markup bereit gestellt - außer im Backend, und ja, da ist dann tatsächlich leider oft DIV-Suppe oder dieses unsägliche Bootstrap-Klassenwirrwar am Werk.

Grüße,

RIDER