Archiv

CSS Links

Auf dem folgendem Link werden fertige CSS Datei zum ansehen und downloaden angeboten.

Super, zum testen, wenn man zb Beispiel eine neue Funktion mit XML ausprobieren will und einfach schnell eine gute CSS datei braucht.

Bei mir geht es heute um das Spry aus Dreamweaver.

Daher vielen Dank an web-toolbox:

http://www.web-toolbox.net/webtoolbox/download/css-externe-dateien.html

Advertisements

Einen Hintergrund für den Text im Block

Manchmal macht es Sinn (zum Beispiel für die Suche) Text nicht auf einem Bild als px

Grafik zu lassen,sondern Ihn als Text auf das entsprechende Bild zu schreiben. Hier sicher nicht.

Code Beispiel hierzu ohne die .css zu bearbeiten kann so lauten:

< div style=“background-image: url(‚http://xy.files.wordpress.com/2012/03/xy.gif?w=500&#8216;); background-repeat: no-repeat;float:left;width:500px;“>Manchmal macht es..< / div >

Der Text kann in diesem Div container, dann nach belieben einfach durch das < br > Tag umgebrochen werden.

Für eine Angabe in der ausgelagerten .CSS findet man hier auch ein Beispiel für den Code

http://www.css4you.de/example/background-repeat.html

Ab CSS 3

Code-Beispiel für border-radius:

div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}

Aufruf der o.g. Stylsheetangabe Rahmen mit abgerundeten Ecken:

Beispiel 1 div1

<div class="div1">Inhalt </div>

Beispiel 2 div2

<div class="div2">Inhalt</div>

Browser

Alle Browser, die das -moz- oder khtml-prefix nicht unterstützen, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem.

Beispiel1

Code Beispiel des Elementes (Divs) mit dem grauem Rand für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border:6px solid #aaaaaa;left:1.2em;top:30px;-moz-border-radius:10px;-khtml-border-radius:30px;“>Beispiel1 < /div >

Die folgenden Eigenschaften lassen Netscape ab Version 6, Mozilla und Firefox abgerundete Ecken darstellen. Dabei steht 1.für alle vier Ecken, die anderen entsprechend für oben links, oben rechts, unten links und unten rechts

Für Mozilla  (Gecko)

-moz-border-radius

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomrigh

CSS3

border-radius

  • border-top-left-radius
  • border-top-right-radius

Webkit

-webkit-border-radius

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius

Konqueror und Safari

-khtml-border-radius

  • -khtml-border-radius-topleft
  • -khtml-border-radius-topright
Beispiel2 runde Ecken

Code Beispiel des grünen Elementes (Divs) für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border: 3px solid #aaaaaa; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; width: 100px; height: 200px; background-color: #058020; top: 140px; left: 450px; padding: 10px;“>Beispiel2 runde Ecken < /div >

Hier kann man sich den Borderradius online anzeigen lassen: http://border-radius.com/

Hier gibt es Informationen zum erstgenanntem ausgelagertem CSS http://www.css4you.de/trickkiste/tr00012.html