CINXE.COM

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="description" content="Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML "> <meta name="keywords" content="SELFHTML, Forum, SELF-Forum, self"> <meta name="DC.Publisher" content="SELFHTML Forum"> <meta name="DC.Identifier" content="message/show"> <meta name="DC.Language" content="de"> <meta name="application-name" content="SELFHTML | F"> <meta name="msapplication-TileImage" content="/images/s-Logo_kachel_144-60ee68b7173b95bf9b9f20bf731cc2f4.png?vsn=d"> <meta name="msapplication-TileColor" content="#3983ab"> <meta charset="UTF-8" content="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL" csrf-param="_csrf_token" method-param="_method" name="csrf-token"> <link rel="author" href="/humans.txt"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" title="SELFHTML Icon"> <link rel="apple-touch-icon" href="/images/s-Logo_60-e32184c74b1d2be9081b4e73162a21ef.png?vsn=d"> <link rel="apple-touch-icon-precomposed" href="/images/s-Logo_60-e32184c74b1d2be9081b4e73162a21ef.png?vsn=d"> <link rel="apple-touch-icon" sizes="76x76" href="/images/s-Logo_76-dc58e3a62d671479accf6a44d0e074dc.png?vsn=d"> <link rel="apple-touch-icon" sizes="120x120" href="/images/s-Logo_120-dbd2a36328e6341491c4a2e286b16e54.png?vsn=d"> <link rel="apple-touch-icon" sizes="152x152" href="/images/s-Logo_152-d7ac893e07c6a36d6c028f659583aa09.png?vsn=d"> <link rel="help" href="/help" title="Hilfe"> <link rel="search" href="https://forum.selfhtml.org/search" title="SELFHTML-Suche"> <link rel="stylesheet" href="/css/app-cfa00d0ae3b0d2d6c08d6aeadb3c1564.css?vsn=d" media="all" title="SELFHTML Forum Stylesheet"> <link rel="alternate" title="Atom-Feed (SELFHTML-Forum)" type="application/atom+xml" href="https://forum.selfhtml.org/self/feeds/atom"> <link rel="alternate" title="RSS-Feed (SELFHTML-Forum)" type="application/rss+xml" href="https://forum.selfhtml.org/self/feeds/rss"> <title>Verfügbare tag-Namen von MrMurphy, 07.03.2025 13:25 – SELFHTML Forum</title> </head> <body data-moderator="false" data-current-forum="self" data-controller="MessageController" data-action="show" class="messages nested-view forum-self show anonymous " id="message-nested"> <script nonce="_TyCdyseRSvPUtNrAtQCBwNL7wWfa6DC4SZNKD1H_k4">document.body.classList.add("js");</script> <header class="cf-top-bar"> <ul class="selflinks"> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein">SELFHTML</a></li> <li><a href="//wiki.selfhtml.org/">Wiki</a></li> <li><a href="https://forum.selfhtml.org/">Forum</a></li> <li><a href="https://blog.selfhtml.org/">Blog</a></li> </ul> </header> <ul class="cf-personallinks"> <li id="user-not-signed-in"><img src="/uploads/default_avatar/thumb/missing.png"> nicht angemeldet</li> <li id="optionen-help"> <a href="/help"> <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1008 1200v160q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-160q0-14 9-23t23-9h160q14 0 23 9t9 23zm256-496q0 50-15 90t-45.5 69-52 44-59.5 36q-32 18-46.5 28t-26 24-11.5 29v32q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-68q0-35 10.5-64.5t24-47.5 39-35.5 41-25.5 44.5-21q53-25 75-43t22-49q0-42-43.5-71.5t-95.5-29.5q-56 0-95 27-29 20-80 83-9 12-25 12-11 0-19-6l-108-82q-10-7-12-20t5-23q122-192 349-192 129 0 238.5 89.5t109.5 214.5zm-368-448q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5-51-248.5-136.5-204-204-136.5-248.5-51zm768 640q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg> <span class="desc">Hilfe</span> </a> </li> <li id="optionen-my"> <a href="/login?return_to=1819102" rel="nofollow"> <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1312 896q0 26-19 45l-544 544q-19 19-45 19t-45-19-19-45v-288h-448q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h448v-288q0-26 19-45t45-19 45 19l544 544q19 19 19 45zm352-352v704q0 119-84.5 203.5t-203.5 84.5h-320q-13 0-22.5-9.5t-9.5-22.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q66 0 113-47t47-113v-704q0-66-47-113t-113-47h-312l-11.5-1-11.5-3-8-5.5-7-9-2-13.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q119 0 203.5 84.5t84.5 203.5z"/></svg> <span class="desc">anmelden</span> </a> </li> <li id="optionen-myadmin"> <a href="/registrations/new" rel="nofollow"> <svg width="2048" height="1792" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 896q-159 0-271.5-112.5t-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5-112.5 271.5-271.5 112.5zm960 128h352q13 0 22.5 9.5t9.5 22.5v192q0 13-9.5 22.5t-22.5 9.5h-352v352q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-352h-352q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h352v-352q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5v352zm-736 224q0 52 38 90t90 38h256v238q-68 50-171 50h-874q-121 0-194-69t-73-190q0-53 3.5-103.5t14-109 26.5-108.5 43-97.5 62-81 85.5-53.5 111.5-20q19 0 39 17 79 61 154.5 91.5t164.5 30.5 164.5-30.5 154.5-91.5q20-17 39-17 132 0 217 96h-223q-52 0-90 38t-38 90v192z"/></svg> <span class="desc">Benutzerkonto erstellen</span> </a> </li> </ul> <header class="cf-page-header"> <div class="logo"> <h1> <span>SELFHTML Forum - Ergänzung zur <a href="https://wiki.selfhtml.org">Dokumentation</a></span> <a class="home" href="/"><span>Übersicht</span></a> </h1> <a class="atom" href="https://forum.selfhtml.org/self/feeds/atom" title="Atom-Feed (SELFHTML-Forum)"><img alt="Atom-Feed (SELFHTML-Forum)" src="/images/feed-atom-597d8984f4b7e65486cb1bf0119cb3a1.svg?vsn=d"></a> <a class="rss" href="https://forum.selfhtml.org/self/feeds/rss" title="RSS-Feed (SELFHTML-Forum)"><img alt="RSS-Feed (SELFHTML-Forum)" src="/images/feed-rss-c704218f0d6f5cf652025a2349785fc7.svg?vsn=d"></a> <a class="donate" href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Spenden" title="Spenden"><img alt="Spenden" src="/images/donate-545b877a6cf7c3012754feafecb05137.svg?vsn=d"></a> </div> <nav class="quicklinks"> <ul> <li><a href="/self/new">neuer Beitrag</a></li> <li><a href="/">Übersicht</a></li> <li class="cf-dropdown" data-dropdown="yes"> <span class="anchor">Foren</span> <ul class="menu"> <li> <a href="/all">alle Foren</a> <a class="stats" href="/all/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/self">SELFHTML-Forum</a> <a class="stats" href="/self/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/weblog">SELFHTML-Blog</a> <a class="stats" href="/weblog/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/meta">Meta-Forum (read only)</a> <a class="stats" href="/meta/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> </ul> </li> <li class="cites"> <a href="/cites">Zitatesammlung</a> </li> <li><a href="/search">suchen</a></li> <li><a href="/help">Hilfe</a></li> <li class="search"> <form action="/search" method="get" rel="nofollow"> <input type="hidden" name="search[sections][]" value="1"> <label class="visually-hidden" for="search-term-nav">Suchbegriff</label> <input type="search" id="search-term-nav" placeholder="suchen" name="search[term]"> </form> </li> </ul> </nav> <nav class="subnav cf-button-nav-list"> <ul> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/self/2025/mar/07/verfugbare-tag-namen/1819102?rm=thread#m1819102">Thread-Ansicht</a></li> <li id="nachricht-feed-atom"><a href="/self/feeds/atom/264623">Atom-Feed</a></li> <li id="nachricht-feed-rss"><a href="/self/feeds/rss/264623">RSS-Feed</a></li> <li id="link-archiv"><a href="/self/archive">archivierte Beiträge</a></li> </ul> </nav> </header> <aside class="cf-motd-list"> <div class="cf-motd"><h3>noch 58 Tage: SELF-Treffen in Mannheim 2025</h3><p>SELFHTML wird <strong>30</strong>! Das wollen wir feiern!<br> <a href="https://forum.selfhtml.org/events/12" rel="nofollow noopener noreferrer">→ Information und Anmeldemöglichkeit</a>.</p> </div> </aside> <main> <div id="alerts-container"> </div> <div id="content"> <h1> <span class="author block" id="posting-author">Dieter N.:</span> <span class="title" id="posting-title">Verfügbare tag-Namen</span> </h1> <div class="cf-thread-list"> <article class="cf-thread posting tree " id="264623"> <header class="cf-message-header " id="tree-m1819088"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <span class="num-infos"><span class="num-msgs" title="16 Beiträge">16</span> </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819088#m1819088"> <h2> Verfügbare tag-Namen </h2> <div class="details"> <span class="author"> Dieter N. </span> <time datetime="2025-03-07T09:49:18"> 07.03.2025 10:49 </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> css <li class="cf-tag"> html </ul> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819089"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819089#m1819089"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span> </span> <time datetime="2025-03-07T10:01:00"> 07.03.2025 11:01 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819090"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819090#m1819090"> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T10:26:48"> 07.03.2025 11:26 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819092"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819092#m1819092"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span> </span> <time datetime="2025-03-07T10:31:32"> 07.03.2025 11:31 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819093"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819093#m1819093"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span> </span> <time datetime="2025-03-07T10:34:01"> 07.03.2025 11:34 </time> </div> </a> <div class="details"> </div> </header> </li><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819098"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819098#m1819098"> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T11:34:38"> 07.03.2025 12:34 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819103"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819103#m1819103"> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T13:01:00"> 07.03.2025 14:01 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819104"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819104#m1819104"> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T13:33:02"> 07.03.2025 14:33 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819105"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819105#m1819105"> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T14:48:39"> 07.03.2025 15:48 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819106"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819106#m1819106"> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T15:16:52"> 07.03.2025 16:16 </time> </div> </a> <div class="details"> </div> </header> </li><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819107"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819107#m1819107"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/006/547/thumb/ThePoeppel_crop.jpg"> Rolf B</span> </span> <time datetime="2025-03-07T15:29:57"> 07.03.2025 16:29 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819108"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819108#m1819108"> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T16:29:34"> 07.03.2025 17:29 </time> </div> </a> <div class="details"> </div> </header> <ol><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819114"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819114#m1819114"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span> </span> <time datetime="2025-03-08T08:10:19"> 08.03.2025 09:10 </time> </div> </a> <div class="details"> </div> </header> </li></ol></li></ol></li></ol></li></ol></li></ol></li></ol></li></ol></li><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819099"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819099#m1819099"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/000/475/thumb/Martin.png?v=63783229758"> Der Martin</span> </span> <time datetime="2025-03-07T11:35:31"> 07.03.2025 12:35 </time> </div> </a> <div class="details"> </div> </header> </li><li class="cf-message-answers"><header class="cf-message-header " id="tree-m1819101"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819101#m1819101"> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/006/547/thumb/ThePoeppel_crop.jpg"> Rolf B</span> </span> <time datetime="2025-03-07T12:24:54"> 07.03.2025 13:24 </time> </div> </a> <div class="details"> </div> </header> </li></ol></li></ol></li><li class="cf-message-answers"><header class="cf-message-header active " id="tree-m1819102"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819102#m1819102"> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T12:25:11"> 07.03.2025 13:25 </time> </div> </a> <div class="details"> </div> </header> </li></ol> </article> </div> <div> <article class="cf-thread-nested cf-thread-nested-root "> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819088"> <a class="cf-thread-forum-plate" href="/self">SELF-Forum</a> <h2> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819088#m1819088">Verfügbare tag-Namen</a> </h2> <div class="details"> <span class="author"> Dieter N. </span> <time datetime="2025-03-07T09:49:18"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819088#m1819088">07.03.2025 10:49</a> </time> <span class="versions"> (<a class="version-link" href="/self/2025/mar/07/verfugbare-tag-namen/1819088/versions" rel="nofollow">Versionen</a>) </span> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Moin,</p> <p>bisher habe ich für die Aufteilung einer Seite die Begriffe (tags?) main und aside gefunden.</p> <p>Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?</p> <p>Insbesondere wenn ich den Head-Bereich in drei Spalten, den Main-Bereich in 4 Spalten aufteilen möchte.</p> <p>Dann wären ja schon 7 Namen sinnvoll.</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819088/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819088/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819088/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819088/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819088/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819088" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819088">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819089"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819089#m1819089">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/3833" title="Benutzer Matthias Scharwies"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span></a> </span> <span class="author-infos"> <a class="author-email" href="mailto:mscharwies@selfhtml.org"> <span>E-Mail-Adresse des Autors</span> <svg width="22" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-email"></use></svg> </a> </span> <time datetime="2025-03-07T10:01:00"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819089#m1819089">07.03.2025 11:01</a> </time> <span class="versions"> (<a class="version-link" href="/self/2025/mar/07/verfugbare-tag-namen/1819089/versions" rel="nofollow">Versionen</a>) </span> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Servus!</p> <blockquote> <p>Moin,</p> <p>bisher habe ich für die Aufteilung einer Seite die Begriffe (tags?) main und aside gefunden.</p> </blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut" rel="nofollow noopener noreferrer"><strong>Elemente</strong></a></p> <blockquote> <p>Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?</p> </blockquote> <p>Ja, siehe hier: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung" rel="nofollow noopener noreferrer">HTML/Tutorials/<strong>Seitenstrukturierung</strong></a></p> <blockquote> <p>Insbesondere wenn ich den Head-Bereich in drei Spalten, den Main-Bereich in 4 Spalten aufteilen möchte.</p> <p>Dann wären ja schon 5 Namen sinnvoll.</p> </blockquote> <p>Auch bei schmalen Viewports?</p> <p><strong>Tipp</strong>: Gliedere deine Webseite nach dem Inhalt. HTML zeichnet den Inhalt aus!<br> Ob der Inhalt dann unter- oder nebeneinander steht, regelt CSS.</p> <p>Und dort kannst du</p> <ol> <li>die Elementnamen ansprechen;</li> <li>gleiche Elemente über Klassen unterscheiden oder</li> <li>mit <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/first-of-type" rel="nofollow noopener noreferrer">CSS/Selektoren/first-of-type</a> oder <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/nth-of-type" rel="nofollow noopener noreferrer">CSS/Selektoren/nth-of-type</a> Elemente nach ihrer Position selektieren.</li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">bildung.social/@selfhtml</a> </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819089/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819089/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819089/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819089/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819089/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819089" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819089">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819090"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819090#m1819090">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T10:26:48"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819090#m1819090">07.03.2025 11:26</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Danke Matthias für die rasche Antwort,</p> <p>gefunden habe ich aber nur die zusätzlichen Elemente article und section. Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> <p>Gruß</p> <p>Diddi</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819090/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819090/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819090/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819090/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819090/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819090" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819090">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819092"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819092#m1819092">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/3833" title="Benutzer Matthias Scharwies"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span></a> </span> <span class="author-infos"> <a class="author-email" href="mailto:mscharwies@selfhtml.org"> <span>E-Mail-Adresse des Autors</span> <svg width="22" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-email"></use></svg> </a> </span> <time datetime="2025-03-07T10:31:32"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819092#m1819092">07.03.2025 11:31</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Servus!</p> <blockquote> <p>Danke Matthias für die rasche Antwort,</p> <p>gefunden habe ich aber nur die zusätzlichen Elemente article und section.</p> </blockquote> <p>Du könntest auch ein bedeutungsleeres div verwenden.</p> <blockquote> <p>Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> </blockquote> <p>Nur, wenn du alles fest verschraubst, was dem Grundsatz des responsiven Webdesigns wiederspricht.</p> <p>Schau Dir mal dieses Beispiel hier an:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#Implizite_Erzeugung" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung</a></p> <p>Wenn du ein Element in der Mitte einfügst, rutschen die anderen flexibel nach unten. Ist doch gut, oder?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">bildung.social/@selfhtml</a> </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819092/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819092/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819092/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819092/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819092/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819092" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819092">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819093"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819093#m1819093">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/3833" title="Benutzer Matthias Scharwies"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span></a> </span> <span class="author-infos"> <a class="author-email" href="mailto:mscharwies@selfhtml.org"> <span>E-Mail-Adresse des Autors</span> <svg width="22" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-email"></use></svg> </a> </span> <time datetime="2025-03-07T10:34:01"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819093#m1819093">07.03.2025 11:34</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Servus!</p> <blockquote> <p>Servus!</p> <blockquote> <p>Danke Matthias für die rasche Antwort,</p> <p>gefunden habe ich aber nur die zusätzlichen Elemente article und section.</p> </blockquote> </blockquote> <p>section ist doch gut. Wenn ein Buch 20 Kapitel hat, heißen alle Kapitel eben Kapitel und unterscheiden sich nicht durch den Namen, sondern die Nummererierung.</p> <blockquote> <p>Du könntest auch ein bedeutungsleeres div verwenden.</p> <blockquote> <p>Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> </blockquote> <p>Nur, wenn du alles fest verschraubst, was dem Grundsatz des responsiven Webdesigns wiederspricht.</p> <p>Schau Dir mal dieses Beispiel hier an:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#Implizite_Erzeugung" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung</a></p> <p>Wenn du ein Element in der Mitte einfügst, rutschen die anderen flexibel nach unten. Ist doch gut, oder?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">bildung.social/@selfhtml</a> </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819093/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819093/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819093/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819093/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819093/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819093" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819093">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819098"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819098#m1819098">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T11:34:38"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819098#m1819098">07.03.2025 12:34</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hi,</p> <blockquote> <p>Schau Dir mal dieses Beispiel hier an:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#Implizite_Erzeugung" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung</a></p> </blockquote> <p>Wie kann ich das Ergebnis des Beispiels auf der gesamten Seite ansehen (und dann die Seite verkleinern)? <a href="/images/22e01986-fb48-11ef-ae39-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/22e01986-fb48-11ef-ae39-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a></p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819098/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819098/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819098/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819098/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819098/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819098" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819098">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819103"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819103#m1819103">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T13:01:00"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819103#m1819103">07.03.2025 14:01</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hi!</p> <p>Zunächst würde ich mir das Beispiel genauer ansehen. Daher war auch meine obenstehende Frage, wie ich das Ergebnis, das im Beispiel auf der rechten Seite angezeigt wird im Vollbild auf meinem PC ansehen kann.</p> <p>Gruß</p> <p>Diddi</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819103/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819103/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819103/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819103/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819103/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819103" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819103">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819104"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819104#m1819104">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T13:33:02"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819104#m1819104">07.03.2025 14:33</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Ich würde in einem Editor eine HTML-Grundstruktur erstellen und dann das gezeigte HTMl und CSS dort hineinkopieren. Die Seite kannst du dann in deinem Browser öffnen, aber auch bequem Änderungen vornehmen.</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819104/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819104/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819104/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819104/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819104/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819104" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819104">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819105"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819105#m1819105">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T14:48:39"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819105#m1819105">07.03.2025 15:48</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hallo,</p> <p>ich habe mir jetzt das Beispiel</p> <p><a href="/images/4b334d58-fb62-11ef-9f7f-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/4b334d58-fb62-11ef-9f7f-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a> angeschaut.</p> <p>Was mich stört, ist dass beide Zeilen gleich in Spalten unterteilt sind.</p> <p>Ich denke, die 1. Zeile ist die Kopfzeile/der Titelbereich (header) und in der zweiten Zeile der Inhalt (body). Die Kopfzeilen unterscheiden sich doch i.a. von dem restlichen Teil.<br> Kennt Ihr zufällig in selhtml ein Beispiel mit dieser Unterscheidung?</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819105/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819105/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819105/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819105/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819105/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819105" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819105">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819106"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819106#m1819106">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T15:16:52"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819106#m1819106">07.03.2025 16:16</a> </time> <span class="versions"> (<a class="version-link" href="/self/2025/mar/07/verfugbare-tag-namen/1819106/versions" rel="nofollow">Versionen</a>) </span> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Das ist ein einfaches Beispiel um die Möglichkeiten von CSS-Grid überhaupt kennenzulernen.</p> <p>Wie bereits in einem anderen Beitrag von mir geschrieben könnten wir dir wahrscheinlich konkreter helfen wenn wir wüssten, was du im Endeffekt überhaupt erreichen willst.</p> <p>Vielleicht hilft dir das Beispiel eines sogenannten Holy-Grail-Layouts weiter. Stör dich nicht an der Bezeichnung. Es geht darum eine flexible grundsätzliche Seitenstruktur nach bestimmten Regeln zu erstellen. Früher waren die Anforderungen nur sehr schwer umzusetzen, CSS-Grid hat das stark vereinfacht.</p> <p>Nachfolgend meine Umsetzung, die du einfach mal bei verschiedenen Fensterbreiten ausprobieren kannst:</p> <pre><code class="block language-html"> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Holy Grail Layout mit CSS-Grid<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token comment">/* Basisangaben */</span> <span class="token atrule"><span class="token rule">@media</span> all</span> <span class="token punctuation">{</span> <span class="token selector">*</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">/* Schriften */</span> <span class="token atrule"><span class="token rule">@media</span> all</span> <span class="token punctuation">{</span> <span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 120%<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2rem<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1rem<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5rem 0rem 0.5rem 0rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5rem 0rem 0.5rem 0rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p, li, dl, dt, address</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5rem 0rem 0.5rem 0rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">/* Grundlayout */</span> <span class="token atrule"><span class="token rule">@media</span> all</span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 0.5rem 0.5rem 0.5rem<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0rem auto 0rem auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.pageheader, .navigation, .content, .sidebar, .pagefooter</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 0.5rem 0.5rem 0.5rem<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.sidebar a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5rem 0rem 0.5rem 0rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 0px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/*Holy Grail Layout*/</span> <span class="token atrule"><span class="token rule">@media</span> all</span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto 1fr auto<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.pageheader</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.pagefooter</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 900px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 250px 1fr 250px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.pageheader</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.navigation</span> <span class="token punctuation">{</span> <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.pagefooter</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 1fr 300px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pageheader<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pageheader<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Holy Grail Layout - CSS-Grid<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Beschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The Holy Grail Layout is a web page layout that consists of four sections - a header, footer, and a main content area with two sidebars, one on each side. The layout also adheres to the following rules<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Has a fluid center column width fixed-width sidebars<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The center column should appear first in the markup, before the two sidebars (but after the header)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>All three columns should be the same height, regardless of the content within them<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The footer should always be at the bottom of the browser viewport, even when the content doesn't fill up the height of the viewport (sticky footer)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The layout should be responsive, all the sections should collapse into one column on smaller viewports<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>.navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Links zum <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>Holy Grail Layout<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://alistapart.com/article/holygrail/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A List Apart (2006, noch gar nix mit Flexbox oder CSS-Grid)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://bitsofco.de/holy-grail-layout-css-grid/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>bitsofco<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://webkrauts.de/artikel/2015/rasterfahndung-auf-der-suche-nach-der-besten-layouttechnik<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Webkrauts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Matthew James Taylor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>SelfHTML - CSS / Tutorials / Einführung / CSS-Grid<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagefooter<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagefooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>.pagefooter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819106/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819106/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819106/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819106/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819106/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819106" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819106">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819107"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819107#m1819107">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/6547" title="Benutzer Rolf B"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/006/547/thumb/ThePoeppel_crop.jpg"> Rolf B</span></a> </span> <time datetime="2025-03-07T15:29:57"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819107#m1819107">07.03.2025 16:29</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hallo Dieter,</p> <p>wenn Du im head-Bereich 3 Spalten und im main-Bereich 4 Spalten haben willst, geht das mit einem Grid im Allgemeinen nicht, du brauchst 2 Grids.</p> <p>Es sei denn, du WILLST UNBEDINGT eine Beziehung zwischen den Spaltenaufteilungen von head und main haben. Dann kann das mit einem Grid sinnvoll sein. Ich meine – von der Idee her – so etwas. Man kann das Grid-Item HEAD1 so einstellen, dass es die Spalten 1 und 2 einnimmt.</p> <pre><code class="block"> +----------------------------------------+--------+--------+ | HEAD1 | HEAD2 | HEAD3 | +---------+------------------------------+--------+--------+ | | | | | | MAIN1 | MAIN2 | MAIN3 | MAIN4 | | | | | | +---------+------------------------------+--------+--------+ </code></pre> <p>Aber wie MrMurphy schon sagte: das ist Spökenkiekerei. Hast Du ein konkretes Problem, das Du lösen willst, oder beschäftigst Du Dich abstrakt mit dem Thema?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819107/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819107/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819107/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819107/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819107/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819107" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819107">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819108"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819108#m1819108">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <span class="icon-message original-poster" title="Thread-Ersteller"> </span> Dieter N. </span> <time datetime="2025-03-07T16:29:34"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819108#m1819108">07.03.2025 17:29</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hallo, ich habe viele Internetseiten angeschaut und will jetzt selbst eine erstellen. Es war also bisher eher abstrakt. Aber jetzt bin ich am Suchen, wie sie Seite aussehen soll.</p> <p>Ich bedanke mich bei allen für ihre Beiträge.</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819108/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819108/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819108/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819108/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819108/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819108" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819108">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> <ol class="answers"> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819114"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819114#m1819114">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/3833" title="Benutzer Matthias Scharwies"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span></a> </span> <span class="author-infos"> <a class="author-email" href="mailto:mscharwies@selfhtml.org"> <span>E-Mail-Adresse des Autors</span> <svg width="22" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-email"></use></svg> </a> </span> <time datetime="2025-03-08T08:10:19"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819114#m1819114">08.03.2025 09:10</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Guten Morgen,</p> <blockquote> <p>ich habe viele Internetseiten angeschaut und will jetzt selbst eine erstellen.</p> </blockquote> <p>Sehr gut! Eine eigene Seite ist wie ein eigener Garten. Man kann seine Vorstellungen umsetzen und immer wieder umgestalten.<br> In einem öffentlichen Park wie Twitter und Facebook gibt es zwar auch die Möglichkeit Inhalte zu präsentieren. Die Gestaltung ist aber engen Grenzen ausgesetzt.</p> <blockquote> <p>Es war also bisher eher abstrakt. Aber jetzt bin ich am Suchen, wie sie Seite aussehen soll.</p> </blockquote> <p>Das ist gut - von den Farben (<a href="https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept" rel="nofollow noopener noreferrer">Farbe/Farbkonzept</a> über die Gestaltung.</p> <p>Hier musst du aber aufpassen: Eine Webseite soll für alle sein, deshalb richtet sich das HTML nach dem Inhalt. Dann kann es vorgelesen werden - aber auch auf Bildschirmen angezeigt werden. Dabei ist mittlerweile die Hälfte mobil unterwegs, die anderen haben immer größere Bildschirme. (Ein Kumpel von mir hat 40'' (102cm) - Diagonale)</p> <p>Deshalb empfehle ich Dir erst einmal das Studium einiger Tutorials:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg" rel="nofollow noopener noreferrer">Einstieg in HTML</a></li> <li><a href="https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign)" rel="nofollow noopener noreferrer">Responsiv(es_Webdesign)</a></li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid</a></li> </ul> <p>Du schriebst:</p> <blockquote> <p>Was mich stört, ist dass beide Zeilen gleich in Spalten unterteilt sind.</p> </blockquote> <p>Mr Murphy schrieb:</p> <blockquote> <p>Das ist ein einfaches Beispiel um die Möglichkeiten von CSS-Grid überhaupt kennenzulernen.</p> </blockquote> <p>Es ging um Deinen Einwand:</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> </blockquote> </blockquote> </blockquote> </blockquote> <p>Genau, deshalb ist es besser ein flexibles Grid zu verwenden und Elemente <strong>nicht</strong> fest irgendwo zu positionieren.</p> <p>Das heißt <strong>nicht</strong>, das völliges Chaoos herrschen muss. Du kannst den header und dann die Navi oben haben.<br> Inhalte wandern automatisch nach unten, wenn der Bildschirm schmal ist.<br> Bei breiteren Bildschirmen legst du fest, was nebeneinander platziert werden soll.</p> <blockquote> <p>Vielleicht hilft dir das Beispiel eines sogenannten Holy-Grail-Layouts weiter. Stör dich nicht an der Bezeichnung. Es geht darum eine flexible grundsätzliche Seitenstruktur nach bestimmten Regeln zu erstellen.</p> </blockquote> <p>Das wird im 1. Kapitel des Grid-Tutorials gezeigt.</p> <p>Viel Spaß!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">bildung.social/@selfhtml</a> </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819114/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819114/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819114/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819114/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819114/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819114" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819114">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819099"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819099#m1819099">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/475" title="Benutzer Der Martin"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/000/475/thumb/Martin.png?v=63783229758"> Der Martin</span></a> </span> <time datetime="2025-03-07T11:35:31"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819099#m1819099">07.03.2025 12:35</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hallo,</p> <blockquote> <p>Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> </blockquote> <p>mit "Position" meinst du hier die Reihenfolge? Also sowas wie section:nth-of-type?</p> <p>Das ist in der Tat problematisch, weil sich - wie du schon feststellst - die ganze Numerierung ändert, wenn ein Element dazukommt. Besser ist es, den Elementen eine ID zu geben, die knapp den Inhalt beschreibt, und dann damit zu selektieren. Also sowas wie section#disclaimer.</p> <p>Einen schönen Tag noch<br> Martin</p> <div class="signature">-- <br> Manchmal kann man gar nicht so viel fühlen, wie man denkt.<br> Und manchmal fühlt man so viel, dass man gar nicht denken kann. </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819099/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819099/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819099/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819099/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819099/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819099" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819099">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> <li> <div class="posting-nested cf-thread-message h-entry "> <div class="posting-header"> <header class="cf-message-header " id="m1819101"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819101#m1819101">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> <a class="user-link" href="/users/6547" title="Benutzer Rolf B"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/006/547/thumb/ThePoeppel_crop.jpg"> Rolf B</span></a> </span> <time datetime="2025-03-07T12:24:54"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819101#m1819101">07.03.2025 13:24</a> </time> <span class="versions"> (<a class="version-link" href="/self/2025/mar/07/verfugbare-tag-namen/1819101/versions" rel="nofollow">Versionen</a>) </span> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <p>Hallo Dieter N.,</p> <blockquote> <p>Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.</p> </blockquote> <p>Heißt: Das solltest Du nicht tun, wenn Du gezielt eins mit bestimmtem Inhalt ansprechen willst.</p> <p>Positionsgesteuert selektiert man dann, wenn die Position und nicht der Inhalt der relevante Kriterium ist (z.B. erstes oder letztes oder jedes ungerade Element oder oder oder)</p> <p>Wenn deine head- oder main-Spalten für bestimmte Inhalte vorgesehen sind, dann gib ihnen eine id oder eine Klasse und selektiere sie darüber. Dann kannst Du sie beliebig umsortieren oder etwas einfügen oder entfernen.</p> <p><em>Edit</em> Verflixt, Martins Antwort übersehen…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819101/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819101/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819101/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819101/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819101/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819101" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819101">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> </ol> </li> </ol> </li> <li> <div class="posting-nested cf-thread-message h-entry active"> <div class="posting-header"> <header class="cf-message-header " id="m1819102"> <h3> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819102#m1819102">Verfügbare tag-Namen</a> </h3> <div class="details"> <span class="author"> MrMurphy </span> <time datetime="2025-03-07T12:25:11"> <a href="/self/2025/mar/07/verfugbare-tag-namen/1819102#m1819102">07.03.2025 13:25</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <div class="cf-posting-content e-content"> <blockquote> <p>Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?</p> </blockquote> <p>Das ist eine falsche Herangehensweise. Bei HTML geht es nicht darum, was du willst, sondern was HTML ermöglicht.</p> <p>Bei HTML ist es sinnvoll an konkreten Beispielen zu arbeiten / zu lernen. Grade Anfänger erfinden sonst gerne Probleme, die überhaupt nicht existieren.</p> <p>So können viele Elemente mehrfach vorkommen und auch ineinander verschachtelt sein. Um das zu verstehen wirst du um das Lernen nicht herumkommen.</p> <p>HTML in Verbindung mit CSS ist eine künstliche Seitenbeschreibungssprache, die sich aus der Erfahrung oder mit Logik nicht erschließt.</p> <p>Ich meine zu Verstehen, das du die Vorstellung hast, das für die Grundstruktur einer Webseite viele vollkommen unterschiedliche Elemente erforderlich sind. Das ist falsch. Es sind nur einige wenige erforderlich, die natürlich korrekt verwendet werden sollten.</p> <p>Warum du für die Grundstruktur einer Webseite überhaupt so viele unterschiedliche Elemente verwenden willst erschließt sich mir überhaupt noch nicht.</p> <p>Oder meinst du die "innere" Struktur? Dann ist die Verwendung von gleichen Elementen sinnvoll und erlaubt. Dadurch wird die Webseite für Dritte überhaupt lesbar / aufnehmbar.</p> <p>Aktuell ist deinen Fragen und den bislang darauf erfolgten Antworten zu entnehmen, das dein Problem noch nicht richtig erkannt wurde und deshalb die Antworten eventuell überhaupt nicht dazu passen.</p> <p>Damit wir verstehen was du im Endeffekt willst und wie wir dir dann auch helfen können wäre deshalb ein konkretes Beispiel sinnvoll, was du überhaupt erreichen willst. Dann können wir dir auch mit Beispielen zum Ausprobieren helfen.</p> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/mar/07/verfugbare-tag-namen/1819102/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/mar/07/verfugbare-tag-namen/1819102/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/mar/07/verfugbare-tag-namen/1819102/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819102/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/mar/07/verfugbare-tag-namen/1819102/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="DCkjVxYVFSIGAAJkXQQqXRJFQQMIIiItIeJ9sFPRAHSRpRzdzssrrWPL"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1819102" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1819102">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </li> </ol> </article> </div> </div> </main> <footer class="cf-footer"> <ul> <li>Seit 1995 – <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein">Die Energie des Verstehens</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Impressum">Impressum</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Impressum#Datenschutzbestimmungen">Datenschutz</a></li> <li>Software: <a href="https://github.com/ckruse/cforum_ex">Classic Forum</a> V5.7.23</li> <li class="sponsor"><a href="https://termitel.de/"><img alt="Termitel - Customer Care & Sales" src="/images/termitel-customer-care-and-sales-639585ae6087c14fa099c4e0e2e1660f.svg?vsn=d"></a></li> <li class="sponsor"><a href="https://www.appsignal.com/"><img alt="AppSignal" src="/images/appsignal-e3045e28946f0657d47096a4faf0e32c.svg?vsn=d"></a></li> </ul> </footer> <script nonce="_TyCdyseRSvPUtNrAtQCBwNL7wWfa6DC4SZNKD1H_k4"> window.MathJax = { displayAlign: "left", messageStyle: "none", showMathMenu: false, menuSettings: { CHTMLpreview: false }, tex2jax: { inlineMath: [['$$', '$$']], displayMath: [], preview: "none", processEscapes: true } }; </script> <script src="https://forum.selfhtml.org/mathjax/MathJax.js?config=TeX-MML-AM_CHTML" async></script> <script nonce="_TyCdyseRSvPUtNrAtQCBwNL7wWfa6DC4SZNKD1H_k4">window.userToken = "";</script> <script src="/js/app-8872306ecbaeb167e05bafc1840844c0.js?vsn=d"></script> </body> </html>