Ein flexibles zweispaltiges Grid/eine flexible Tabelle erstellen

Von b_funke |

HTML

<div class="grid-container">
      <div class="item1"><img src="bild1.jpg" alt="" /></div>
      <div class="item2"><img src="bild1.jpg" alt="" /><br/><img src="bild2.jpg" alt="" /><img src="bild3.jpg" alt="" /></div>  
</div>

CSS

.item1
 { grid-area: menu; } 
.item2
 { grid-area: main; } 
.grid-container 
{ display: grid;
 grid-template-areas: 'menu main';

Farbangaben in CSS

Von b_funke |

Folgende Angaben sind möglich

div
{color:#000000;
background-color:#f1f1f1;}
//* alternativ bei gleichen Zahlen #000;*//

Zusätzlich kann hexadezimal die Deckkraft angegeben werden:
00 = transparent, FF = volle Deckkraft.

Oder

div
{color:rgb(00,00,00);
background-color:rgb(241,241,241);}
//*alternativ Prozentangaben:0% entspricht Schwarz, 100% Weiß*//

Mit rgba kann ein Transparenzwert hinzugefügt werden von 0-1
div
{color:rgba(00,00,00,0.5);
background-color:rgb(241,241,241,1);}

Unterschied HTML-/CSS statische Webseiten zu Content-Management

Von b_funke |

Statische Webseiten (HTML/CSS/Javascript) laufen im Browser des 
Benutzers ab. HTML und CSS wird 1:1 beim Aufruf einer Webadresse vom Server übertragen. Zwischen einzelnen Seitenaufrufen ist keine Verbindung (lediglich in den Logfiles über die IP-Adresse oder mit Javascript über den Browser des Benutzers), der Benutzer kann sich nicht anmelden und wird nicht wiedererkannt.
Beim Erstellen müssen die Seiten auf den Server vollständig hochgeladen werden. Es können nicht mehrere Redakteure gleichzeitig Inhalte bearbeiten.

CSS - Responsive Design

Von b_funke |

CSS – Responsive Design

Beispiel: Bis zu einer Bildschirmbreite von 600px werden HTML-Elemente mit der Klasse Titel nicht angezeigt

 @media (max-width: 600px)
{

.titel {display:none;}

}

Achtung: Im <head> des HTML-Dokuments muss die Angabe

<meta name="viewport" content="width=device-width, initial-scale=1.0">

eingefügt sein, damit der Gerätebrowser nicht selbstständig die gesamte Breite verkleinert.

CSS - Linkstyles

Von b_funke |

Link-Styles

a:link – ein Link, das ein Benutzer innerhalb einer Browser-
Sitzung noch nicht angeklickt hat
a:visited – ein Link, das ein Benutzer bereits angeklickt hat
(innerhalb der Browser-Sitzung)
a:hover – das Link während des Überfahrens mit der Maus
a:active – das Link im kurzen Moment des Anklickens

:hover funktioniert bei jedem HTML-Element

weitere Informationen
CSS abonnieren