nicht angemeldet
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
Matthias Apsel
Der Martin
Gunnar Bittersmann