5 Wörter in eine Reihe

[Jnnbox]

Guten Abend,

ich optimiere gerade mein HTML und CSS Code. Folgende Darstellung habe ich im Admin Bereich

Mein passende HTML sieht so aus:

<div style="width:100%; line-height:2em; color:#625c58;">
      <span style="display:inline-block; width:250px;">Druckpakete</span>
      <span style="display:inline-block; width:270px;">druckpakete.html</span>
      <span style="display:inline-block; width:65px;"></span>
      <span style="display:inline-block; width:135px;" class="link"><a href="1650659372.jpg" target="_blank" class="single_1">1650659372.jpg</a></span>
      <span style="display:inline-block; width:200px; text-align:right;" class="link"><a href="hinzufuegen?lID=40">Bearbeiten</a> - <a href="uebersicht?delete=40" onclick="return confirm('Wollen Sie diese Leistung wirklich löschen?')">Löschen</a></span>
</div>

Die Frage dazu, ist dieser Code so ok, oder könnte man diesen noch einfacher / kompackter schreiben? Ich dachte auch schon eine "richtig" Tabelle, würde hier passen?

Das inline CSS fleigt raus, sollte ich mich für diesen Code entscheiden.

[MrMurphy]

Hallo

Die Frage dazu, ist dieser Code so ok

Nein, der ist grausam.

oder könnte man diesen noch einfacher / kompackter schreiben?

Problemlos. Ich sehe entweder eine ul-Liste oder Absätze. Die style-Angaben ersatzlos streichen. HTML5 und CSS3 nutzen.

Und mit Tabellendaten hat den Quelltext nix zu tun.

Gruss

MrMurphy

[Jnnbox]

Hallo,

Problemlos. Ich sehe entweder eine ul-Liste oder Absätze. Die style-Angaben ersatzlos streichen. HTML5 und CSS3 nutzen.

Hast du gelesen was ich geschrieben habe? Das CSS ist NUR zum testen drin, da ich NICHT immer zwischen zwei Fenstern hin und her schalten möchte

Und mit Tabellendaten hat den Quelltext nix zu tun.

Das sehe ich etwas anderes, warum denn hier keine Tabelle? Es sind Zeilen die zusammen hängen?

[Jnnbo]

Hallo,

Problemlos. Ich sehe entweder eine ul-Liste oder Absätze. Die style-Angaben ersatzlos streichen. HTML5 und CSS3 nutzen.

meinst du so?

<ul>
  <li>Druckpakete</li>
  <li>druckpakete.html</li>
  <li>1650659372.jpg</li>
  <li>Bearbeiten</li>
  <li>-</li>
  <li>Löschen</li>
</ul>

Würdest du jetzt für die Abstände Klassen einfügen also in etwa so?

<ul>
  <li class="titel">Druckpakete</li>
  <li class="url">druckpakete.html</li>
  <li class="bild">1650659372.jpg</li>
  <li class="edit">Bearbeiten</li>
  <li class="trenner">-</li>
  <li class="del">Löschen</li>
</ul>

Und wie würde es dann aussehen, wenn ich jetzt mehrere Einträge habe? Müsste ich dann die <ul> immer wieder von Neuem aufbauen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

<ul>

>   <li>Druckpakete</li>
>   <li>druckpakete.html</li>
>   <li>1650659372.jpg</li>
>   <li>Bearbeiten</li>
>   <li>-</li>


>   <li class="trenner">-</li>
>   <li class="del">Löschen</li>
> </ul>
> 

Der Trenner ist kein Listenelement.

Matthias

[Jnnbo]

Hallo Matthias,

Der Trenner ist kein Listenelement.

dann lieber so?

<ul>
  <li class="titel">Druckpakete</li>
  <li class="url">druckpakete.html</li>
  <li class="bild">1650659372.jpg</li>
  <li class="optionen">Bearbeiten - Löschen</li>
</ul>

oder so?

<ul>
  <li class="titel">Druckpakete</li>
  <li class="url">druckpakete.html</li>
  <li class="bild">1650659372.jpg</li>
  <li class="edit">Bearbeiten</li>
  <span>-</span>
  <li class="del">Löschen</li>
</ul>

[Der Martin]

Hallo,

Der Trenner ist kein Listenelement. dann lieber so?

<ul>

>   <li class="titel">Druckpakete</li>
>   <li class="url">druckpakete.html</li>
>   <li class="bild">1650659372.jpg</li>
>   <li class="optionen">Bearbeiten - Löschen</li>
> </ul>

wenn Bearbeiten und Löschen nur unterschiedliche Bezeichnungen für dieselbe Aktion sein sollen, ja. Das wäre aber IMO sprachlich etwas unglücklich.

oder so?

<ul>

>   <li class="titel">Druckpakete</li>
>   <li class="url">druckpakete.html</li>
>   <li class="bild">1650659372.jpg</li>
>   <li class="edit">Bearbeiten</li>
>   <span>-</span>
>   <li class="del">Löschen</li>
> </ul>

Nein. Das ist ungültiges Markup. Ein ol- oder ul-Element darf nur li als Kindelemente haben.

Richtig wäre nach meinem Empfinden, den Trenner als Pseudoelement per CSS einzufügen. Entwerder als .edit::after, oder als .del::before.

So long,  Martin

[Jnnbo]

Hallo Martin,

Nein. Das ist ungültiges Markup. Ein ol- oder ul-Element darf nur li als Kindelemente haben.

Richtig wäre nach meinem Empfinden, den Trenner als Pseudoelement per CSS einzufügen. Entwerder als .edit::after, oder als .del::before.

ok, dann ändere ich meine Liste so ab

<ul>
  <li class="titel">Druckpakete</li>
  <li class="url">druckpakete.html</li>
  <li class="bild">1650659372.jpg</li>
  <li class="edit">Bearbeiten</li>
  <li class="del">Löschen</li>
</ul>

und füge den Strich mit .del::before ein. Danke für die Hilfe. Jetzt habe ich noch eine Frage, wenn ich mehrere Einträge habe, dann wiederhole ich den kompletten <ul></ul> Bereich?

[Jnnbo]

Hallo Martin,

hier meine Idee, wie ich es nun umsetzten würde:

<ul>
  <li class="titel">Druckpakete</li>
  <li class="url">druckpakete.html</li>
  <li class="bild">1650659372.jpg</li>
  <li class="edit">Bearbeiten</li>
  <li class="del">Löschen</li>
</ul>

ul {list-style:none; width:700px;}
ul li { display:inline-block;}
.titel { width:20%;}
.url { width:20%;}
.bild { width:20%;}
.edit { width:11%;}
.del::before {content:"-"; padding-right:11px;}
.del { width:11%;}

Aber ganz ehrlich, weniger Code im Gegensatz zu meiner ersten Version habe ich nun nicht nur dass aus meinen <span> nun eine Liste geworden ist. Hat dieses nun Vorteile? Ich persönlich finde nicht.

[MrMurphy]

Hallo

meinst du so?

Im Prinzip ja. Der Bindestrich gehört da aber nicht hin, der sollte ersatzlos gestrichen werden.

"Im Prinzip" weil mir nicht klar ist, was du erreichen willst. Ich vermute das du in der Zeile zwei Navigationen mit unterschiedlichen Aufgaben hast. Wenn die auch unterschiedlich dargestellt werden sollen (z.B. bei den Abständen) solltest du die natürlich auch im Quelltext trennen.

Starre Breitenangaben solltest du nur nutzen, wenn du auch eine starre Seite erstellen willst. Bei flexiblen Seiten oder Responsive Design sind starre Breiten unsinnig und stören nur.

Würdest du jetzt für die Abstände Klassen einfügen also in etwa so?

Nein, ich würde da überhaupt keine Klassen oder ID einfügen. Da sich an der Navigation kaum etwas verändern wird sind die nicht erforderlich.

Insgesamt stehst du dir selbst im Weg, da du gedanklich bei der Erstellung einer Webseite immer noch dem Papierdenken mit festen Größen und voller Kontrolle des Aussehens verhaftet bist. Im Web gibt es aber weder festen Größen noch kannst du über das Aussehen der Webseite entscheiden. Auch wenn du dir das ganz doll wünschst. Das scheint bei dir noch nicht angekommen zu sein.

Lies dir mal dazu den folgenden Beitrag durch, vielleicht hilft der dir ja weiter:

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Gruss

MrMurphy

[Jnnbox]

Hallo,

Nein, ich würde da überhaupt keine Klassen oder ID einfügen. Da sich an der Navigation kaum etwas verändern wird sind die nicht erforderlich.

Was würdest du dann mit dem "-"

Das soll ja auch keine Navigation sein, das sind Datensätze die aus der Datenbank kommen die ich einfach Aufgelistet haben möchte um diese gegebenenfalls zu bearbeiten bzw. zu löschen. Wenn du aber keine IDs oder Klassen nehmen würdest, wie würdest du dann die Abstände rein bekommen, da der erste schmaler sein sollte wie der zweite z.B.

Insgesamt stehst du dir selbst im Weg, da du gedanklich bei der Erstellung einer Webseite immer noch dem Papierdenken mit festen Größen und voller Kontrolle des Aussehens verhaftet bist. Im Web gibt es aber weder festen Größen noch kannst du über das Aussehen der Webseite entscheiden. Auch wenn du dir das ganz doll wünschst. Das scheint bei dir noch nicht angekommen zu sein.

Nein, ich stehe mir selber nicht im Weg. Ein Admin Bereich der nur für mich ist, darf so aussehen wie ich ihn vorgebe. Wenn ich eine feste Breite von z.B. 800px vorgebe, dann mache ich dieses, weil mein Bildschirm so groß ist. Eine Webseite wird von Unterwegs nie bearbeitet. Anderes wäre es, wenn es eine Art Blog wäre.

[MrMurphy]

Hallo,

Was würdest du dann mit dem "-"

Der hat keine Funktion. Einfach weglassen.

Ein Admin Bereich der nur für mich ist

Noch ein Grund den Bindestrich wegzulassen. Oder wozu brauchst du den?

Wenn du aber keine IDs oder Klassen nehmen würdest, wie würdest du dann die Abstände rein bekommen, da der erste schmaler sein sollte wie der zweite z.B.

display: inline-block;

oder

nth-child() mit %-Angaben

Gruss

MrMurphy

[Jnnbo]

Hallo,

Noch ein Grund den Bindestrich wegzulassen. Oder wozu brauchst du den?

ich könnte diesen natürlich weg lassen, aber ich persönlich finde es einfach angenehmer wenn zwei Funktionen mit einem - getrennt sind, aber ich denken mal, das sieht jeder anderes. Vielleicht verwende ich hier auch einfach zwei Grafiken, dann hat sich dieses eh erledigt.

Wenn du aber keine IDs oder Klassen nehmen würdest, wie würdest du dann die Abstände rein bekommen, da der erste schmaler sein sollte wie der zweite z.B.

display: inline-block;

diese Angaben habe ich ja bereits in meinem Code stehen, deine Aussage von heute Nacht war, alles scheiße, weg damit :) Jetzt soll ich diese doch wieder einfügen? Aber nochmals zu meiner Frage, wenn ich keine Klassen nehmen soll, wie bekomme ich dann unterschiedliche Breiten in meine Übersicht?

oder nth-child() mit %-Angaben

ok, das heißt das erste <li> würde ich dann mit

ul li:nth-child(1) {
	width:10%;
}

ansprechen, richtig?

[MrMurphy]

Hallo

um dir konkret helfen zu können müsstest du erst mal genauer beschreiben, was du überhaupt erreichen willst.

nth-child() ist nur ein Beispiel für eine mögliche Lösung. Damit jedes Element einzeln anzusprechen erscheint mir in deinem Zusammenhang aber nicht sinnvoll.

Gruss

MrMurphy

[Jnnbo]

Hallo,

um dir konkret helfen zu können müsstest du erst mal genauer beschreiben, was du überhaupt erreichen willst.

Ich habe jede Menge Datensätze in meiner Datenbank. Auf meiner Seite gibt es ein kleinen Admin Bereich wo ich diese bearbeiten kann. Derzeit sieht meine Anordnung so aus, wie auf dem Bild von gestern Abend. Diese Darstellung möchte ich auch weiterhin beibehalten.

Meine Frage war, ob dieses mit dem HTML so Ok ist, daraufhin meintest du ja, nein das ist absoluter misst, weg mit dem scheiß. Letztendlich interessiert es keine Sau wie der Code im Hintergrund geschrieben ist, lass ich mein Code von Google und dem validator prüfen, sagen beide es ist vollkommen OK. Auch das inline CSS wird von keinem bemängelt. Ich möchte einfach mal noch andere Meinungen hören, was man besser machen könnte um später nicht so viel Code zu haben.

nth-child() ist nur ein Beispiel für eine mögliche Lösung. Damit jedes Element einzeln anzusprechen erscheint mir in deinem Zusammenhang aber nicht sinnvoll.

Da aber jedes Element eine andere Breite hat, denke ich mir, dass Klassen doch die beste alternative ist?

[MrMurphy]

Hallo

Da aber jedes Element eine andere Breite hat, denke ich mir, dass Klassen doch die beste alternative ist?

Nein, die beste Alternative ist ein möglichst flexibles Layout, das dann noch darauf vorbereitet ist, mit Responsive Design noch flexibler zu werden. So sollten ein oder zwei zusätzliche Links ohne Änderung (oder zumindest ohne große Änderung) des Layouts hinzugefügt werden können.

Wenn du wie beim Papierlayout über jedes Element die Kontrolle behalten willst funktioniert das nicht.

lass ich mein Code von Google und dem validator prüfen, sagen beide es ist vollkommen OK.

Die prüfen die Rechtschreibung, nicht die Sinnhaftigkeit. Wenn ich folgenden Text schreibe:

grün Auto Kartei die Dach klingt ich ultimativ

usw. wird eine Rechtschreibprüfung auch nicht meckern. Ein positives Ergebnis im Validator ist also nur die alleralleruntereste Grundlage, mit einer sinnvollen Anwendung von HTML hat das aber noch überhaupt nichts zu tun.

Nach deinen bisherigen Informationen würde meine Lösung mit aktuellem HTML5 und CSS3 folgendermaßen aussehen, die Praxis soll ja nun auch nicht zu kurz kommen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navigation</title>
   <meta name="description" content="Navigation">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 80%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         width: 98%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 1rem auto;
      }
   }
   /* Meine persönlichen Grundeinstellungen und Leerangaben*/
   @media all {
      ul {
         padding-left: 0;
      }
      li {
         list-style-type: none;
      }
   }
   /* Seitenspezifische Angaben - jetzt wird's lustig */
   @media all {
      section {
         padding: 0;
         border: 2px solid blue;
         border-radius: 0.5rem;
         display: flex;
      }
      ul {
         padding: 0.3rem;
         border-radius: 0.5rem;
         margin: 0;
         display: flex;
         flex: 3;
         justify-content: space-between;
      }
      ul:nth-child(2) {
         margin-left: 0.5rem;
         flex: 1;
         justify-content: flex-end;
      }
      ul:nth-child(2) li {
         margin-left: 0.3rem;
      }
      ul:nth-child(2) li:last-child:before {
         content: "-";
         padding-right: 0.5rem;
      }
   }
   </style>
</head>
<body>
   <section>
      <ul>
         <li>Druckpakete</li>
         <li>druckpakete.html</li>
         <li>1650659372.jpg</li>
      </ul>
      <ul>
         <li>Bearbeiten</li>
         <li>Löschen</li>
      </ul>
   </section>
</body>
</html>

Das CSS muss für die praktische Anwendung natürlich noch erweitert werden, zum Beispiel um dem Besucher Schriftarten anzubieten. Und Responsive Design willst du ja auch nicht.

Gruss

MrMurphy

[Jnnbo]

Ich habe gerade mit einem Programmierer gesprochen, dieser meinte umso mehr Klassen ein HTM Code hat, umso rubuster ist dieser. Also bleibe ich bei meinen Klassen, damit bin ich in allem flexibler.

[Gunnar Bittersmann]

@@Jnnbo:

Und wie würde es dann aussehen, wenn ich jetzt mehrere Einträge habe? Müsste ich dann die <ul> immer wieder von Neuem aufbauen?

Nein. Höre die Worte des weisen Cheatah: „alles andere als eine Tabelle falsch.“

Tabelle mit 4 Spalten. Aktionen (Bearbeiten, Löschen) in einer:

<td>
  <button>Bearbeiten</button>
  <button>Löschen</button>
</td>

Mit CSS machst du die Tabelle responsive.

LLAP

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Mit CSS machst du die Tabelle responsive.

Ergänzung: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten

Matthias

[Jnnbox]

Hallo,

Nein. Höre die Worte des weisen Cheatah: „alles andere als eine Tabelle falsch.“

Das heißt also, ich schmeiße meine wieder raus und verwende eine Tabelle

Tabelle mit 4 Spalten. Aktionen (Bearbeiten, Löschen) in einer:

<td>

>   <button>Bearbeiten</button>
>   <button>Löschen</button>
> </td>

Bis jetzt habe ich zum löschen und bearbeiten ein Link. Warum sollte ich deiner Meinung nach dafür ein Button nehmen?