Schlagwort-Archive: CSS

Rechnen mit CSS oder die „calc()“ Funktion

In CSS kann man zum Beispiel die Breite oder die Höhe eines Objektes auch berechnen lassen. Dies ist sehr nützlich bei variablen Größen der Objekte, oder dem berühmten Problem mit „width:100%“ und einer „margin“ oder „padding“ Angabe. Das „Margin“ bzw. „Padding“ wird ja leider nicht mit in die Breite oder Höhe mit eingerechnet. So sind Objekte mit einer Breite oder Höhe von 100 Prozent und einem Margin oder Padding von 10 Pixel immer 20 Pixel zu Hoch bzw. zu Breit. Diese Probleme kann man durch berechnen der Größen perfekt umgehen. Man verwendet dazu die „calc()“ Funktion. Ich zeige Euch einfach einige Beispiele dazu.
 
Beispiel: die Breite eines Objektes berechnen.
#TestBox {
    /* Es gilt Punkt vor Strich */
    width: calc(100% / 4 - 2 * 5px);
}

Die Breite beträgt hier ein viertel des gesamt zur Verfügung stehenden Raumes minus 10 Pixel. Ihr kennt es ja aus der Schule, euer Mathe Lehrer hat es bestimmt 1000 mal gepredigt. Es gilt auch hier immer „Punkt vor Strich“ genau wie in der Schule.
 
Beispiel: Breite und Höhe eines Objektes berechnen mit einem „Padding“ von 10 Pixel.
#TestBox {
    /* Das Padding muss von der gesamt Breite abgezogen werden */
    padding: 10px;
    width: calc(100% - 2 * 10px);
    height: calc(100% - 2 * 10px);
}

In diesem Fall füllt das Objekt exakt den zur Verfügung stehenden Raum zu 100 Prozent aus weil wir die 20 Pixel Padding von den 100 Prozent abziehen und wir so keine „Übergröße“ des Objektes bekommen.
 
Beispiel: einen Text vertikal zentrieren bei einer Box mit variabler Höhe.
#TestBox:before {
    /* Wir platzieren den Text auch via CSS */
    content: "Dummy Text";
    font-size: 18px;
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(50% - 9px);
    width: 100%;
}

Die Box ist absolut positioniert und füllt von der Breite her gesehen den ganzen ihr zur Verfügung stehenden Raum aus. Sie beginnt ganz links und der Text wird horizontal zentriert ausgegeben. Die vertikale Position des Textes wird durch den „top“ Wert angegeben, und genau diesen lassen wir berechnen (50% der gesamt zur Verfügung stehenden Höhe minus halbe Font Größe). Damit haben wir den Text genau vertikal zentriert, egal welche Höhe die Box bekommt.

Responsive Webdesign mit CSS Media Queries

Damit eine Webseite auf jedem Endgerät gut lesbar bzw. benutzbar ist solle man heutzutage ein „Responsive Design“ für seine Webseite benutzen. So ein Resonsive Design setzt man am besten mit „CSS Media Queries“ um. Mit diesen Media Queries kann man via CSS festlegen was bei verschiedenen Bildschirmgrössen mit der Webseite passieren soll. Man verschachtelt sozusagen seinen CSS Code in mehrere Bereiche. Als erstes schreibt man die allgemeinen Formate welche immer gelten und danach erstellt man die Media Queries wobei jedes Query für ein Endgerät bzw. eine Bildschirmgrösse. Man muss nicht unbedingt alle Queries anwenden, wie und in welchem Umfang man das macht muss jeder für sich selbst bzw. für seine Webseite herausfinden.

Es gibt folgende Arten von Media Queries:

device-width:
/* Breite des Bildschirms eines Endgerätes */
@media screen and (device-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

device-height:
/* Höhe des Bildschirms eines Endgerätes */
@media screen and (device-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

width:
/* Breite des Browserfensters eines Endgerätes */
@media screen and (min-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

height:
/* Höhe des Browserfensters eines Endgerätes */
@media screen and (max-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

orientation:
/* Haltung des Endgerätes, Querformat (landscape) oder Hochformat (portrait) */
@media all and (orientation: landscape) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

print:
/* Dieses Media Query ist für die Formatierung der Druckansicht */
@media print {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt natürlich noch jede Menge andere verschiedene Queries aber ich denke dies sind die wichtigsten die Ihr braucht. Ich persöhnlich verwende lediglich zwei von den oben angezeigten Media Queries, aber wie schon gesagt, dies muss jeder für sich selbst herausfinden. Hier habt ihr eine Liste aller Queries, es wird euch bei dieser Liste auch gleich angezeigt ob der Browser den Ihr gerade verwendet die Queries unterstützt oder nicht.
Übersicht CSS Media Queries
 
Man kann die Queries auch miteinander sozusagen Verknüpfen mit Hilfe einer „and“ Anweisung.
Folgendes Beispiel steht für ein iPad im „Landscape“ Modus:
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: landscape){
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt bei GitHub eine schöne Template Vorlage wo einige Endgeräte sozusagen vordefiniert sind. Natürlich müsst ihr die Formate selbst passend für eure Webseite in die Queries einfügen aber wenigstens müsst Ihr euch dann um die definition der Queries für die einzelnen Endgeräte nicht mehr kümmern.
GitHub CSS3 Media Queries Template
 
So das reicht erstmal denke ich, ich hoffe Ihr konntet alles verstehen und umsetzen. Bei Fragen oder Anregungen zu diesem Tutorial hinterlasst einfach unten unter dem Tutorial einen Kommentar oder eröffnet ein Thema im Forum wenn Ihr eine Diskussion darüber starten wollt.
Viel Spass beim nachmachen und austesten.

Mit dem HTML Blockelement „div“ arbeiten

Ein HTML „div“ ist wie die Überschrift schon sagt ein Blockelement. Das „div“ steht für Division und wird von allen gängigen Browsern unterstützt. Alles was zwischen dem Start-Tag und dem End-Tag des Div’s steht wird als ein Teil dieses Bereiches angesehen. Man benutzt dieses Element um Bereiche einzugrenzen welche man zum Beispiel mit CSS formatieren möchte. Dazu teilt man dem Element dann eine „Klasse (class)“ oder eine „ID (id)“ zu.
 
So wird ein „div“ erstellt:
<div id="div_01" class="header">
    Hier stehen dann alle Elemente welche man durch den "div" eingrenzen möchte.
</div>

Die id kann nur einmalig vergeben werden, muss also eindeutig sein, der Klasse können mehrere Elemente angehören, bzw. mehrere „div’s“ können die selbe Klasse haben, aber nur eine id.
 
Jetzt kann man den „div“ mit CSS formatieren, das sieht so aus:
<style type="text/css">
    .header {
        /* Element wird relativ positioniert */
        position: relative;
        /* Element steht links und weitere Elemente umfliessen es von rechts her */
        float: left;
        /* Äusserer Randabstand = 0 */
        margin: 0;
        /* Innerer Randabstand = 0 */
        padding: 0;
    }
 
    #div_01 {
        /* Hintergrundfarbe des Elements wird festgelegt */
        background: #BCBCBC;
        /* Schriftfarbe des Elements wird festgelegt */
        color: #333333;
    }
</style>

Ihr könnt in den „div“ reinpacken was Ihr wollt, da sind eigentlich keine Grenzen gesetzt. Und er akzeptiert die globalen HTML Attribute wie z.B. „align=“center“, width=“100%“, height=“200″ und noch viele mehr. Man sollte dies aber soweit möglich komplett über CSS regeln, das macht einen wesentlich übersichtlicheren Code und hat sich im Prinzip schon Standart durchgesetzt. Ich regle auch soweit es geht alles über CSS.
 
Ich hoffe dieser Beitrag hilft euch weiter, viel Spass beim Testen.

Horizontales Menü mit HTML und CSS erstellen

Um eine einfache horizontale Navigation in HTML und CSS zu erstellen gibt einen recht einfachen Weg. Man nimmt dazu die HTML Listen Tags, also eine „ul“ und „li“ Konstellation. Diese kann man mit CSS formatieren um ziemlich schnell ein schönes Ergebniss zu erzielen.
So sieht das ganze aus, zuerst der HTML Teil:
<!DOCTYPE html>
<html>
    <head>
        <title>Horizontale Navigation</title>
    </head>
<body>
<h2>Horizontale Navigation:</h2>
<ul>
    <li><a href="#">Button1</a></li>
    <li><a href="#">Button2</a></li>
    <li><a href="#">Button3</a></li>
    <li><a href="#">Button4</a></li>
    <li><a href="#">Button5</a></li>
</ul>
</body>
</html>

Und jetzt der CSS Teil, welcher am besten genau als letztes Element im HTML Head eingefügt wird:
<style type="text/css">
    body {
        color: #000000;
        font-family: verdana;
        font-size: 12px;
    }
    h2 {
        text-align: center;
        text-decoration: underline;
        width: 100%;
    }
    ul {
        float: none;
        list-style: none outside none;
        margin: 0 auto;
        padding: 0;
        position: relative;
        width: 50%;
    }
    li {
        background: none repeat scroll 0 0 #868686;
        border: 1px solid #464646;
        border-radius: 3px;
        float: left;
        margin: 0 0 10px 10px;
        padding: 0;
        position: relative;
        width: 60px;
    }
    li:first-child {
        margin: 0 0 10px 10px;
    }
    li:hover {
        background: none repeat scroll 0 0 #757575;
        border: 1px solid #464646;
    }
    a {
        color: #FFFFFF;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }
</style>

Ihr könnt euch das Ergebnis hier ansehen:
Wenn Ihr den Quelltext am Stück sehen wollt einfach einen Rechtsklick in den Iframe machen und auf „Frame-Quelltext anzeigen“ gehen. Dann seht Ihr auch genau wie der Stylesheet im Header eingebaut ist.

Ich hoffe Ihr könnt mit dieser Information etwas anfangen.
Viel Erfolg weiterhin bei eurer eigenen Seite.

Mit CSS Content erstellen

Man kann mit CSS auch Inhalt bzw. Content erstellen. Das kann manchmal sehr nützlich sein da es wirklich sehr einfach ist.
Was man dazu braucht sind die CSS Pseudoklassen „:before“ und „:after“.
 
Wir denken uns einfach ein „div“ Element aus und geben ihm eine Klasse die wir „Dummy_Class“ nennen. In diese Klasse fügen wir am Anfang den String „Dummy Text“ ein.
Das ganze machen wir so:
<style type="text/css">
Dummy_Class:before {
    content: "Dummy Text "
}
</style>

Wenn Wir den Text in das Ende des Elements einfügen wollen sieht das so aus:
<style type="text/css">
Dummy_Class:after {
    content: " Dummy Text."
}
</style>

Ich hoffe das konnte euch weiterhelfen.
Viel Spass beim Testen.