Test, ob user agent ein mobiles Device ist, Update?

[netzgestaltung]

Ich hab das HTML sortiert und kommentiert sowie eines geschrieben, wie ich es machen würde.

sieh es als denk anstoß und veranschaulichung, nicht unbedingt als vorlage.

bitte beachte, das hier natürlich kein CSS deiner Seiter mehr greift, hab bitte noch geduld, dann werde ich es morgen oder samstag nachreichen.

Bitte beachte, das erst mit dem passenden CSS das layout zustande kommt, aber das HTML konzentriert vom layout unabhängig auf den Inhalt und dessen struktur.

<div id="content">

  <!-- <div id="autotable">
   * "autotable" darf als id nur einmal vorkommen "autotable" hat keinen inhaltsbezug
   * als class ist es aber akzeptabel - wobei hier  "container" zutreffender ist.
   * man könnte auch mit "poetry-container" weiter spezifizieren -->
  <div id="poetry" class="container">
  
    <!-- <div id="autotable div">
     * id darf keine leerzeichen haben, ich suche mir eine neue werte aus -->
    <div id="poetry-songs" class="content">
    
      <!-- <b>Neue Songtexte:</b> 
       * bold hat keine bedeutung, strong könnte korrekt sein, aber es ist eigentlich eine überschrift -->
      <h3>Neue Songtexte:</h3>
      
      <!-- 
       * hier sieht es eher nach einer liste aus
      <p><a href="m_poesie_gedicht01_de.php" class="class1">Genug</a><br>
        <a href="m_poesie_gedicht02_de.php" class="class1">Meer der Einsamkeit</a><br>
        <a href="m_poesie_gedicht03_de.php" class="class1">Eine Reise ins Ich</a><br>
        <a href="m_poesie_gedicht04_de.php" class="class1">Farbenfluss</a><br>
        <a href="m_poesie_gedicht05_de.php" class="class1">Tiefer</a><br>
        <a href="m_poesie_gedicht06_de.php" class="class1">Mutter Natur</a><br>
        <a href="m_poesie_gedicht07_de.php" class="class1">Frucht und Fäulnis</a><br>
        <a href="m_poesie_gedicht08_de.php" class="class1">Kalt</a><br>
        <a href="m_poesie_gedicht09_de.php" class="class1">SeelenPuls</a><br>
        <a href="m_poesie_gedicht10_de.php" class="class1">Auf den Moment</a><br>
        <a href="m_poesie_gedicht11_de.php" class="class1">Feuertanz</a> -->
      <!-- </p> schließendens p ist nicht vorgeschrieben, aber schafft ordnung -->
      <ul class="poetry-list">
        <li><a href="m_poesie_gedicht01_de.php">Genug</a></li>
        <li><a href="m_poesie_gedicht02_de.php">Meer der Einsamkeit</a></li>
        <li><a href="m_poesie_gedicht03_de.php">Eine Reise ins Ich</a></li>
        <li><a href="m_poesie_gedicht04_de.php">Farbenfluss</a></li>
        <li><a href="m_poesie_gedicht05_de.php">Tiefer</a></li>
        <li><a href="m_poesie_gedicht06_de.php">Mutter Natur</a></li>
        <li><a href="m_poesie_gedicht07_de.php">Frucht und Fäulnis</a></li>
        <li><a href="m_poesie_gedicht08_de.php">Kalt</a></li>
        <li><a href="m_poesie_gedicht09_de.php">SeelenPuls</a></li>
        <li><a href="m_poesie_gedicht10_de.php">Auf den Moment</a></li>
        <li><a href="m_poesie_gedicht11_de.php">Feuertanz</a></li>
      </ul>
    </div>
    
    <!--
     * ich suche mir eine neue werte aus
     * bei class nehme ich das gleiche wie oben -->
    <div id="poetry-selected" class="content">
      <h3>Ausgesuchte Gedichte:</h3>
      <ul class="poetry-list">
        <li><a href="m_poesie_gedicht22_de.php">Versickernd</a></li>
        <li><a href="m_poesie_gedicht25_de.php">Küche</a></li>             
        <li><a href="m_poesie_gedicht31_de.php">Zedernholz</a></li>
        <li><a href="m_poesie_gedicht30_de.php">Lange Sommertage</a></li>
        <li><a href="m_poesie_gedicht34_de.php">Keine Angst</a></li>
        <li><a href="m_poesie_gedicht33_de.php">Was lange währt</a></li>
        <li><a href="m_poesie_gedicht32_de.php">Narben der Vergangenheit</a></li>
        <li><a href="m_poesie_gedicht24_de.php">An die Ferne</a></li>
        <li><a href="m_poesie_gedicht21_de.php">Mit Feder und Wein</a></li>
        <li><a href="m_poesie_gedicht23_de.php">Ein Stern</a></li>
        <li><a href="m_poesie_gedicht26_de.php">Mit all' dem...</a></li>
        <li><a href="m_poesie_gedicht27_de.php">Das leblose Landhaus</a></li>
        <li><a href="m_poesie_gedicht28_de.php">He che suna mielo</a></li>
        <li><a href="m_poesie_gedicht29_de.php">Meine Welt?</a></li>
      </ul>
    </div>
    
    <!--
     * ich suche mir eine neue werte aus
     * bei class nehme ich das gleiche wie oben -->
    <div id="poetry-album" class="content">
      <h3>Album Nebelleben:</h3>
      <ul class="poetry-list">
        <li><a href="m_poesie_gedicht12_de.php">Hinaus in die Kälte</a></li>
        <li><a href="m_poesie_gedicht13_de.php">Schatten der Vergangenheit</a></li>
        <li><a href="m_poesie_gedicht14_de.php">Den Moment, halt' ihn fest</a></li>
        <li><a href="m_poesie_gedicht15_de.php">Auf der Bühne</a></li>
        <li><a href="m_poesie_gedicht16_de.php">Leben</a></li>
        <li><a href="m_poesie_gedicht17_de.php">Du, der Ozean</a></li>
        <li><a href="m_poesie_gedicht18_de.php">Freigeist</a></li>
        <li><a href="m_poesie_gedicht19_de.php">Kunst Unsterblichkeit</a></li>
        <li><a href="m_poesie_gedicht20_de.php">Long live Tartosgardh</a></li>
      </ul>
    </div>
  </div>
  <p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" id="toparrow" border="0"></a>
</div><!--Ende content-->

 

[LeanderAT]

Vielen Dank!

Wieso hat bold keine Bedeutung? Es funktionert aber ganz normal. Und wieso machst du für die unterschiedlichen Gedichtspalten eine eigene ID? Wenn eh keine spezifischen Werte (Schriftgröße usw.) benötigt werden.

Ich habe jetzt rausgefunden, wie ich mein Problem mit den Tabelle und dem <P> löse. Statt ein <P> voranzustellen, füge ich einfach ein <BR>&nbsp; am Ende hinzu...sodass, wenn eine Spalte nach unten wandert, die darüber den Abstand mit dem <BR>&nbsp; erzeugt. Funktioniert jedenfalls.

https://www.seelenpuls.at/disk_nebelleben_de.php z.B., drei Spalten oder nur zwei oder gar eine bei wenig Breite in einem mobilen Device.

 

[netzgestaltung]

Wieso hat bold keine Bedeutung?

Keine Bedeutung = "There is no semantic meaning."
Hier gibts eine ordentliche Erklärung: https://lyrik.antikoerperchen.de/bl...h-logischen-und-physisch-visuellen-elementen/

Und wieso machst du für die unterschiedlichen Gedichtspalten eine eigene ID?

Das versuche ich in mittlerweile 4 Posts zu erklären: Es ist schlicht nicht erlaubt, IDs mehrfach im Dokument zu vergeben. Jedes ID Attribut muß in HTML einzigartig sein. Es ist schlicht das Wesen einer ID. Ich hätte sie im Beispiel auch wegfallen lassen können, weil sie nicht unbedingt benötigt werden (außer die würden sich zb optisch unterscheiden, aber auch da könnte eine weitere Klasse reichen), wollte aber genau zeigen wo der Unterschied liegt.

Als Alternative und so wie du es gerne nutzen würdest ist das "class" Attribut da. Genau hier kannst du alle Elemente gleich benennen, die ähnliche Eigenschaften haben. Dadurch werden sie "klassifiziert". Layout-Eigenschaften zählen auch dazu! Der unterschied im CSS ist lediglich, dass du die "#" am Anfang durch einen "." ersetzt im HTML kannst du, wenn es class= noch nicht gibt, id= mit class= ersetzen.

Du mußt das alles nicht machen, wenn es so auch funktioniert. Es gibt aber Situationen wo dann etwas nicht funktioniert, zb Javascript oder auch teilweise CSS. Dann willst du, das diese Dinge korrekt sind, da du sonst sehr, sehr lange an unerklärbaren Fehlern sitzt.

Funktioniert jedenfalls.

OK, das finde ich super!