# Webseiten-Spalte • Praxislexikon

Webseiten-Spalte


Definition

Was ist eine Webseiten-Spalte?

  • Die Webseiten-Spalte ist ein Homepageelement.

  • machen

    Wie kann man Webseiten-Spalten machen?

  • Man braucht CSS für 3 Spalten:
  • @media screen: Beim Smartphone gilt das nicht.
  • .content-box {columns: 3 auto;}
    @media screen and (max-width: 767px){.content-box {columns: 1 auto;}}
    
  • Man braucht den Code für die Spalten
  • <p class="content-box">
      Dieser Text wird in drei Spalten aufgeteilt. Man verwendet dafür CSS mit content-box und gibt die Anzahl der Spalten columns mit 3 an. Die Einstellung erfolgt automatisch je nach Browserfenster. Im Smartphone ist es aber nur eine Spalte.
    </p>
    

    Dieser Text wird in drei Spalten aufgeteilt. Man verwendet dafür CSS mit content-box und gibt die Anzahl der Spalten columns mit 3 an. Die Einstellung erfolgt automatisch je nach Browserfenster. Im Smartphone ist es aber nur eine Spalte.


  • Man kann auch statt des Textes Bilder nehmen:
  • bildbildbild


    Wie kann man gleichhohe Spalten machen?

  • Man braucht CSS:
  • .col-container {
      display: table; /* Make the container element behave like a table */
      width: 100%; /* Set full-width to expand the whole page */
    }
    .col {
      display: table-cell;padding: 15px;flex-wrap: wrap;width: 30%; /* Make elements inside the container behave like table cells */
    }
    
  • Man braucht den Code für die Stelle, wo das Bild hin soll:
  • <div class="col-container">
    <div class="col" style="background:yellow">
    <h2>Spalte 1</h2>
    <li>Hallo</li>
    </div>
    
    <div class="col" style="background:#87ceeb">
    <h2>Spalte 2</h2>
    <li>Hallo</li>
    <li>Hallo</li>
    <li>Hallo</li>
    <li>Hello World!</li>
    </div>
    
    <div class="col" style="background:orange">
    <h2>Spalte 3</h2>
    <li>hier etwas Text.</li>
    <li>hier noch mehr Text.</li>
    </div>
    </div> 
    

    Spalte 1

  • Hallo
  • Spalte 2

  • Hallo
  • Hallo
  • Hallo
  • Hallo Welt!
  • Spalte 3

  • hier etwas Text.
  • hier noch mehr Text.

  • verwenden

    Wofür kann man Webseiten-Spalten verwenden?

  • Homepage gliedern.

  • PHP Code Snippets Powered By : XYZScripts.com

      

    Immunsystem stärken
    Immunsystem stärken. Deine Verteidigung.
    Schlafen, Essen, Bewegung, kein Stress, Liebe, Vorbeugung