Wir übernehmen keine Gewähr, dass die aufgelisteten Hilfestellungen in jedem Falle funktionieren.
- PHP MySQL: Neue Schreibweise PHP 8
- CSS-Elemente mit gleichem Namen unterschiedlich designen, Pseudoklassen, child
CSS-Tipps & Tricks
.beispielbild {
background-image: url("photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: 25% 75%; |top center
background-repeat: no-repeat;
background-size: cover; |contain | 3em 25%
}Beispiel Formulareingabe Attribute
<!--HTML->
<details><summary>Farbe</summary>
<input class="chkbx" name="farbe[]" type="checkbox" value="1">rot<br>
<input class="chkbx" name="farbe[]" type="checkbox" value="2">blau<br>
<input class="chkbx" name="farbe[]" type="checkbox" value="3">grün<br>
</details>
<details><summary>Größe</summary>
<input class="chkbx" name="groesse[]" type="checkbox" value="1">38<br>
<input class="chkbx" name="groesse[]" type="checkbox" value="2">40<br>
<input class="chkbx" name="groesse[]" type="checkbox" value="3">42<br>
</details>
<details><summary>Variante</summary>
<input class="chkbx" name="variante[]" type="checkbox" value="1">Baumwolle<br>
<input class="chkbx" name="variante[]" type="checkbox" value="2">Naturfaser<br>
<input class="chkbx" name="variante[]" type="checkbox" value="3">Polyester<br>
</details>
<!--CSS-->
details {
width: 50%;
margin: 0 auto ;
background: #FFF;
margin-bottom: .5rem;
box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
border-radius: 5px;
overflow: hidden;
}
summary {
padding: 1rem;
display: block;
background: #FFF;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
summary:before {
content: '';
border-width: .4rem;
border-style: solid;
border-color: transparent transparent transparent #333;
position: absolute;
top: 1.3rem;
left: 1rem;
transform: rotate(0);
transform-origin: .2rem 50%;
transition: .25s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
}
details summary::-webkit-details-marker {
display:none;
}
details > ul {
padding-bottom: 1rem;
margin-bottom: 0;
}Ausgabe:
img{height: 300px; width: 100% !important; object-fit: cover; object-position: top center;}Beispiel (getestet): Anzeige eines Siegels am rechten unteren Rand
HTML:
<div class="adzs"><a href="Pfad Bilddatei"><img src="Pfad Bild-Thumbnail"></a></div>CSS:
@media screen and (min-width: 800px) {
div.adzs{
position:fixed;
width:200px;height:290px;
right:0%;top:70%;
z-index:1;
}
}Beispiel:
table.teilnehmer_innen{border-collapse:separate !important;border-spacing: 8px 8px !important;}
table.hersteller td{background:#fdfdfd;padding:4px;vertical-align:top;border:1px solid #ccc;}
Wichtig: Der Tabellenzelle eine Hintergrundfarbe geben.Allgemeine Schreibweise:
selector::before { content: "string" attr(x) attr(y) "string"; }
selector::after { content: url(…) attr(x) attr(y) "string"; }
Beispiel:
<div class="anzeige">4kg Äpfel für 3,49 Euro</div>
.anzeige::before {
content: "Sonderangebot: ";
font-size: larger;
color: red;
}
Ergebnis:
Sonderangebot:
4 kg Äpfel für 3,49 Euro
Einfügen eines Bildes
.entry-title::before{
content:url("https://domain.info/wp-content/uploads/2022/06/header.jpg");
display:block;
vertical-align:middle;
width:100%;
height:auto;
overflow:hidden;
}Die !important-Regel in CSS wird verwendet, um einer Eigenschaft/einem Wert mehr Bedeutung als normal zu verleihen.
Wenn Sie die !important-Regel verwenden, überschreibt sie sogar ALLE vorherigen Stilregeln für diese bestimmte Eigenschaft in diesem Element!
#inhalt ul li {
color : #00FF00;
}
ul li {
color : #FF0000 !important;
}Erläuterung: Normalerweise hat #content ul li die höchste Priorität, d. h. die Listenpunkte würden hellgrün dargestellt. Das !important gibt der zweiten Anweisung eine höhere Wertigkeit, so dass die Listenpunkte tatsächlich rot dargestellt werden.
Beispiel
.bereich1 {
border: 5px solid green;
}
.bereich2{
color: red;
font-weight: bold;
background: yellow;
font-size: 1.5em;
}
bereichneu{
color:initial;
font-size: initial;
background: initial;
font-weight: initial;
border: inherit;
}
/*initial - Standardeinstellungen, ansonten ausprobieren*/Beispiel
div.bereich{position:absolute;top:40%;left:90%;z-index:1;}
/*"z-index:1" sorgt dafür, dass das Element auf der obersten Ebene liegt.*/Linear von oben nach unten:
background: linear-gradient(to bottom, blue, white);Linear von links nach rechts:
background: linear-gradient(to right, blue, white);Radial:
background: radial-gradient(red, yellow, rgb(30, 144, 255));Mehrere Farben:
background: linear-gradient(to right, red, orange, yellow, green, blue);background-attachment:fixed;
Beispiel:
body{
background-image:url("../wp-content/uploads/2022/11/testbild.jpg);
background-attachment:fixed;
}.flt1 { float: left; width: 20%;height:200px;background:red; }
.flt2 { float: right; width: 80%; height:200px;background:blue;}mit Abständen
.flt1 { float: left; width: 20%;height:200px;background:red;margin-left:10px"}
.flt2 { float: right; width: 77%; height:200px;background:blue;margin-right:10px}
Wenn man* Abstände links oder rechts verwendet, muss die Breite des Divs entsprechend verringert werden!Float beenden oder unterbrechen, damit die folgenden Elemente nicht ebenfalls umflossen werden:
.setclear { clear: both; }<form action="" method="post" enctype="multipart/form-data">
<p>Dokumente:
<input type="file" name="documents[]" />
<input type="file" name="documents[]" />
<input type="file" name="documents[]" />
<input type="submit" value="Send" />
</p>
</form>input[type=text]
input[type="text"]
Nach Feldname:
textarea[name="adresse"]Mögliche Attribute
date
file
checkbox
radio
number
datetime-local
text
submit
button
background-size:contain; oder
background-size:cover;
//Andere Beispiele
background-size: 15%;
background-size: 35px 50px;<iframe src="https://www.tytschkowski-webdesign.de/kontakt" width="90%" height="100" name="ifrm1">
<p>Ihr Browser kann keine eingebetteten Frames anzeigen: <br> Sie können die eingebettete Seite über den folgenden Link aufrufen: https://www.tytschkowski-webdesign.de/kontakt</p>
</iframe>Parameter
scrolling="yes/no/auto" - Bildlaufleisten erzwingen/unterdrücken/automatisch nach Bedarf (voreingestellt)
frameborder="1/0" - Rahmen sichtbar/nicht sichtbarBeispiel Fensterhöhe
<iframe id="frm" src="https://www.tytschkowski-webdesign.de" style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no"></iframe>
<script type="text/javascript">
function resizeIframe(iframe) {
if(iframe) {
iframe.height = '';
iframe.height = self.innerHeight + 'px';
}
}
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="info">
<style type="text/css">
<!--
#frmbsp{width:100%;height:650px;}
=-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="frmbsp" class="main-class"> <iframe id="frm" src="https://www.tytschkowski-webdesign.de" style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no"></iframe></div>
<script type="text/javascript">
function resizeIframe(iframe) {
if(iframe) {
iframe.height = '';
var cltHght = document.getElementById('frmbsp').clientHeight;
iframe.height = cltHght + 'px';
}
}
</script>
</body>
</html>Beispiel:
ul{list-style-type:none;}
ul li::before {
content: '';
display: inline-block;
width: 24px;
height: 20px;
background-image: url("../images/li_image.png");
background-size: contain;
background-repeat: no-repeat;
margin-left: -10px;
margin-right: 10px;
background-position: right center;
float: left;
}
.klasse1 { opacity:0%; } /* Jedes Element der Klasse "klasse1" ist sichtbar (transparent). */
.klasse2 { opacity:100%; } /* Jedes Element der Klasse "klasse2" ist sichtbar */
Beispiel transparenter farbiger Hintergrund:
background: rgba(220,160,140,0.5);- iframe in einen Container (Spalte) packen.
/*container*/
.frmbox {height: 2000px;overflow:scroll;}
.frmbox::-webkit-scrollbar {-webkit-appearance: none; width: 5px; height:5px;}
.frmbox::-webkit-scrollbar-thumb {border-radius: 4px; background-color: #F00;}
.frmbox::-webkit-scrollbar-corner {background-color:transparent;}
/*iFrame*/
.ifrm9{width: 100%; height: 60000px;border: none; border: hidden;overflow:yes !important;
border-collapse: collapse; overflow: scroll !important;}overflow: visible | hidden | scroll | auto | inherit
visible
- Inhalt wird nicht beschnitten
- Element kann hinausragen
hidden
- Inhalt wird beschnitten
- keine Scrollbalken
scroll
- Scrollbalken, auch wenn Inhalt nicht überläuft.
auto
- browserabhängig: Firefox: Scrollbalken, wenn der Inhalt überläuft
inherit
- Vererbung des Wertes des Elternelements
Weitere Varianten:
div.bsp1 {overflow: scroll;}
div.bsp2 {overflow: hidden;}
div.bsp3 {overflow: auto;}
div.bsp4 {overflow: clip;}
div.bsp5 {overflow: visible;}.kasten{
border-radius: 3px 15px 5px 30px; /* links oben - rechts oben - rechts unten - links unten */
/* CSS3 */
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
}Beispiel Kreis
div.circle{
width: 200px;
padding: 100px;
box-sizing: border-box;
border-radius: 100px;
background: green;
}Ansicht
@media (max-width: 767px) {
.hidden-xs { display: none !important; }
}
@media screen and (min-width: 767px) and (max-width: 1200px) {
/* STYLES HERE */
}
ab einer Breite unter 767px wird das div .hidden-xs nicht mehr angezeigt
table.a {
table-layout:auto;
width: 150px;
}
/*Breite der Spalten passt sich der jeweiligen Textbreite an.*/
table.b {
table-layout:fixed;
width: 150px;
}
/*Breite der Spalten gleich unabhängig von der jeweiligen Textbreite.*/img.stimg{border:1px solid #ccc;padding:15px;}
Beispiel:
