Kategorie: CSS

HTML, CSS, JavaScript und PHP lernen als Anfänger in nur zwei Wochen

Gr33nbl00d
HTML, CSS, JavaScript und PHP lernen

Als ich anfing mich mit dem Programmieren von Webseiten auseinander zu setzten habe ich schnell erkannt, dass ich eine Art Anleitung benötige. Zuerst bin ich auf die Video Anleitungen von html-seminar.de gestoßen. Mit diesem 28 Stündigen Kurs (A,B,D,E,F) habe ich mir HTML, CSS und JavaScript beigebracht. Später, als ich dies akzeptabel konnte, brachte ich mir mit den Videos von php-kurs.com, welche von der gleichen Person erstellt worden sind, PHP bei. Durch diese insgesamt 40 Stündige Videomaterial war es mir möglich die Grundlagen des Webseiten erstellen zu lernen. Den Rest brachte ich mir per YouTube Videos & Blogs bei. Wenn du auch HTML, CSS, JavaScript und PHP lernen möchtest kann ich dir den oben verlinkten Videokurs, diesen Blog, andere Blogs und YouTube Video‘s zu deinem expliziten Problem empfehlen.

Code Box in HTML mit CSS erstellen

Gr33nbl00d
Code Box nur mit CSS

Um eine Code Box wie im letzten Blogpost, im Bild oben oder wie unten zu sehen, zu erstellen benötigst du nur folgendes CSS:

pre{
    margin-bottom: 1em;
    padding: 12px 8px;
    padding-bottom: 20px !ie7;
    width: auto;
    width: 650px !ie7;
    max-height: 600px;
    overflow: auto;
    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
    background-color: #eff0f1;
    border-radius: 3px;
}

Den Code welchen du anzeigen möchtest musst du dazu einfach in <pre></pre> HTML-Tags packen und das CSS entweder in deine style.css oder in <style></style> Tags auf der gleiche Seite kopieren.

Style.css einbinden

Eine style.css bindest du übrigens so ein:

<link rel="stylesheet" type="text/css" href="style.css" />

Ich hoffe, dass dieser Post hilfreich für dich war 🙂

Sticky Footer nur mit CSS erstellen

Gr33nbl00d

Um einen Sticky Footer in WordPress oder auch überall anders zu erstellen muss man folgenden CSS-Code zu seiner Seite hinzufügen:

body{
     margin-bottom: 2.5%;
} 

footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Der Fußbereich muss dazu in <footer></footer> HTML-Tags. Und der CSS-Code muss entweder in deine style.css oder in <style></style> Tags. Wie du deine style.css Datei anlegen kannst erfährst du hier.

Ohne CSS-Code:

Ohne Sticky Footer Code

Mit CSS-Code:

Mit Sticky Footer Code

Durch den CSS-Code wird der Fußbereich unten an die Seite „geklebt“. Auch wenn man eine Seite hat auf welcher der Inhalt größer als eine Bildschirmseite ist wird der Fußbereich immer ganz unten am Bildschirmrand angezeigt.

Seite mit viel Inhalt ohne CSS-Code:

Seite mit viel Inhalt ohne Sticky Footer Code

Seite mit viel Inhalt mit CSS-Code:

Seite mit viel Inhalt mit Sticky Footer Code

Ich hoffe, dass ich dir helfen konnte. Weiterhin viel Spaß beim Coden 😉