Die meisten von euch, die das SMF 2.0 kennen, werden sich vermutlich mit dem Default-Theme "Curve" beschäftigt haben. In "Curve" kommt kein SVG zum Einsatz. Stattdessen werden Sprite-Maps in Verbindung mit leeren HTML-Tags bzw. zusätzlichen, äußeren DIV-Containern für die Kategorien- bzw. Themen-Überschriften benutzt. Im Quelltext bedeutet das, daß immer wenn eine Kategorien-Überschrift zum Einsatz kommt ein zusätzliches DIV benötigt wird. Das bläht den HTML-Teil der Seite ordentlich auf.
Stattdessen kann man das Ganze auch mittels Scalable Vector Graphics (SVG) lösen. Schauen wir uns dazu mal das SMF 2.0 Theme Curve genauer an. Im HTML-Quelltext findet sich an diversen Stellen folgender Code:
<div class="cat_bar"><h3 class="catbg">Hier ein Titel</h3><>in der Index.css finden wir folgende CSS-Anweisung:
h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
div.cat_bar
{
background: url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 32px;
overflow: hidden;
}
Hier wird mittels CSS eine Sprite-Map (main_block.png) geladen und damit die rechte und linke Seite jeweils mit abgerundeten Ecken versorgt. Deshalb auch zwei Tags. Was aber passiert, wenn die Überschrift über mehrere Zeilen geht? Das Layout bricht, weil die Sprite-Map so aufgebaut ist, daß bei mehreren Zeilen eine andere Grafik angezeigt wird als wir erwarten.
Die Alternativ-Lösung mit SVG:
Zunächst erstellen wir unser SVG:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="category" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#718397" />
<stop offset="100%" stop-color="#a8bace" />
</linearGradient>
</defs>
<rect x ="0" y="0" width = "100%" height = "100%" rx = "7" ry = "7" fill="url(#category)" />
</svg>Die Grafik ist so aufgebaut, daß sie grundsätzlich 100% Breite und Höhe einnimmt, sie skaliert also mit der Auflösung bzw. mit der Größe der HTML-Elemente.
Nehmen wir uns das folgende HTML-Snippet als Beispiel:
<h3 class="cat">Hier kommt>ein Test</h3>mit ein klein wenig CSS und unserer SVG-Datei erreichen wir exakt das gleiche Ergebnis wie oben. Die SVG wird hier einfach als background-image per CSS zugewiesen:
.cat
{
color: #fff;
font-face: Verdana, Arial, Helvetica, sans-serif;
background: url('category.svg');
width: 100%;
line-height: 2em;
padding-left: 8px;
}Wie das ganze dann im Browser dargestellt wird:
Im Beispiel habe ich bewusst einen Zeilenumbruch in die Überschrift eingebaut, damit man sehen kann, daß das SVG auch über zwei oder mehr Zeilen korrekt skaliert.
« Letzte Änderung: 10.10.2010 20:34 »