WordPress & Webwork - perun.net

Die Kategorie "HTML & CSS"

Hier sind alle Beiträge aufgelistet, die in die Kategorie HTML & CSS einsortiert wurden. Die Beschreibung dieser Kategorie lautet:

Berichte zu (X)HTML und CSS

Du hast die Möglichkeit den RSS-Feed speziell nur für diese Kategorie zu abonnieren.

Geld verdienen oder sparen mit Bee5

CSS3 im praktischen Einsatz

Von Vladimir am 28. 11. 2011 um 16:08

CSS3 im praktischen Einsatz ist ein sehr guter Vortrag von Sven Wolfermann. Die Folien sind nicht nur schön gemacht sondern auch sehr informativ. Was bei sehr vielen Voträgen leider nicht der Fall ist.

Vortrag: CSS3 im praktischen Einsatz

Behandelt werden u.a. abgerundete Ecken, Schatten für Boxen und Text, Content-Generierung und Hintergrund-Verlauf.

Hinweis:
WordPress 3.3 für Autoren & Redakteure (pdf)
Ausdruckbar, Volumenlizenzen zu sehr fairen Preisen.

CSS: jede Unterseite auf 100% Höhe

Von Vladimir am 23. 11. 2011 um 15:52

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website "wackelt".

Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste erzwingt. Hier eine Methode um dies zu realisieren:

html, body {
    height: 100%; /* Streckt den angezeigten Bereich auf 100% */
}
#container {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: auto !important; /* Für moderne Browser */
    height: 100%; /* "Mindesthöhe" für IE <7 */
}

Gefunden auf CSS Div height: 100%. (weiterlesen…)

Hinweis:
WordPress 3.3 für Autoren & Redakteure
Der schnelle und unkomplizierte Einstieg auf 45 DIN-A4-Seiten

Farbverläufe (Gradients) mit CSS3

Von Vladimir am 20. 11. 2011 um 15:19

Mit Hilfe von CSS3 Farbverläufe zu realisieren ist nichts Neues. Hier ein sehr einfaches Beispiel:

.verlauf {
    background: -moz-linear-gradient(top, #900, #079);
    color:      #fff;
    padding:    2.5em 3em;
}

Dieses Beispiel sieht nachher im Mozilla Firefox folgendermaßen aus: (weiterlesen…)

Hinweis:
Kostenloser WordPress-Newsletter
Wöchentl. Newsletter zu WordPress und verwandten Themen

CSS3: Pseudoklasse :nth-child()

Von Vladimir am 15. 11. 2011 um 11:23

CSS3 bringt einige neue und interessante Sachen mit sich, so auch die Pseudoklasse :nth-child(), damit kann man jedes x-te Element eines bestimmten Elternelements ansprechen … nicht verstanden? OK, hier ein Beispiel. Nehmen wir mal an, du möchtest bei Tabellen erreichen, dass jede zweite Tabellenzeile einen anderen Hintergrund bekommt:

tr:nth-child(2n) {background: #eee;}

das würde folgende Auswirkung haben: (weiterlesen…)

Phoenix in Firefox: Codeeditor mit Syntaxhervorhebung

Von Vladimir am 13. 11. 2011 um 16:43

Fragt mich nicht auf welchen Weg ich dahin gekommen bin, aber ich habe gestern im Verzeichnis der Erweiterungen für Mozilla Firefox den Codeeditor Phoenix entdeckt. Nach der Installation ist Phoenix über das Kontextmenü und über das Icon in der Addon-Leiste (früher auch Statusleiste genannt) aufrufbar. Damit kann man sehen wie viele CSS- und Javascript-Dateien in der jeweiligen Seite eingebunden sind und man kann diese Phoenix aufrufen:

Mozilla Firefox: Codeeditor Phoenix im Einsatz

Phoenix bietet Syntaxhervorhebung für HTML, CSS und Javascript und stellt einige Tools, wie z. B. Code komprimieren, und Infos bereit. Man hat auch die Möglichkeit die Änderungen abzuspeichern.

HTML5 und Firefox: Kontextmenü erweitern

Von Vladimir am 10. 11. 2011 um 18:59

Die Idee per HTML auch das Kontextmenü einer Website zu beeinflussen, finde ich sehr gut. Deswegen habe ich mit Freude ein Code-Beispiel ausprobiert welches ich auf browsomatic.com gefunden habe. Hier gibt es eine Demo.

Ich habe das Beispiel leicht angepasst und folgendes erstellt:

<body contextmenu="infomenu">

<p>Hier kommt irgendein Inhalt&hellip;</p>

<menu type="context" id="infomenu">
    <menuitem label="WordPress-Newsletter" onclick="window.open('http://www.wordpress-newsletter.perun.net')"></menuitem>
    <menuitem label="WordPress-Meetup" onclick="window.open('http://www.perun.net/2011/11/09/wordpress-meetup-am-24-11-in-betahaus-koeln/')"></menuitem>
</menu>

</body>

Wenn man dann auf der entsprechenden Seite mit dem Rechtsklick das Kontextmenü aufruft, dann gibt es zwei zusätzliche Einträge, siehe folgende Abbildung: (weiterlesen…)

CSS3: Infos und Auflistung über aktive Mediaqueries

Von Vladimir am 07. 11. 2011 um 13:34

Drüben bei Jens entdeckte ich ein nettes Tool für CSS-Entwickler auf CSS Media Queries.com:

Infos und Auflistung aktiver CSS-Mediaqueries

Dort werden eine Reihe von Mediaqueries samt Erklärungen aufgelistet und die aktiven bzw. für dein System passenden hervorgehoben. In meinem Fall wären dies:

@media only screen and (min-width : 1224px)
@media screen

Schalte ich die Sidebar in meinem Firefox aus, dann kommt folgendes Mediaquery hinzu:

@media only screen and (min-width : 1824px)
Archiv: «« 1 2 3 4 5 6 7 8 9 10 11 12 … 22 23 »»
Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.