Projekt CSS-Slider

Projekt CSS-Schieberegler

Peter Burkes, Januar 2005. kontakt@burkes.de. Mailinglisten: CSS-Design, i-worker, phpbar, php-request.

Heureka, der CSS-Schieberegler (Heureka, the CSS-Slider):

Ein Schieberegler auf CSS-Basis. Garantiert ohne Java, Javascript Flash oder Grafikelemente!
A Slider with CSS. Without Java, Javascript, Flash oder animated gifs

Der CSS-Slider in Aktion:

Heureka Beispiel 1 und DEMO - "Heureka" example 1 (demo)

48 200 199 198 197 196 195 194 193 192 191 190 189 188 187 186 185 184 183 182 181 180 179 178 177 176 175 174 173 172 171 170 169 168 167 166 165 164 163 162 161 160 159 158 157 156 155 154 153 152 151 150 149 148 147 146 145 144 143 142 141 140 139 138 137 136 135 134 133 132 131 130 129 128 127 126 125 124 123 122 121 120 119 118 117 116 115 114 113 112 111 110 109 108 107 106 105 104 103 102 101 100 99 98 97 96 95 94 93 92 91 90 89 88 87 86 85 84 83 82 81 80 79 78 77 76 75 74 73 72 71 70 69 68 67 66 65 64 63 62 61 60 59 58 57 56 55 54 53 52 51 50 49 48 47 46 45 44 43 42 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1

the last time you choosed [48 ]

Heureka Beispiel 2 - heureka example 2

Dieses Beispiel enthält das Grundkonzept:

Mehrere Links mit verschiedenen Breiten, mit Hilfe von Positionierung übereinander gestapelt
der breiteste Link ist unten.
Jeder Link hat ein eigenes HREF-Ziel (z.B. mit einem bestimmten Parameter, index.php?value=1, index.php?value=2, index.php?value=3 .. ).
Die Links haben einen hover-Effekt.
Dieser besteht NICHT in display:none, sondern im Aufleuchten der Hintergrundfarbe (und eventuell des rechten Borders).
Beim Überfahren der Leiste mit der Maus leuchtet immer der unterste erfasste Link auf und beim Anklicken wird der entsprechende HREF-Befehl ausgeführt.
Mit Hilfe von eingebetteten SPAN-Elementen kann außerhalb ein Text angezeigt werden

Hier wurden im HTML-Quelltext die Positionsangaben zur Verdeutlichung in jedem A-Tag direkt formatiert, man könnte sie aber genauso und einfacher im Head definieren (#heureka2 a span {position:absolute; left:0; top:0}. Die Width-Angabe muss für jeden Link gesondert im Link festgelegt werden (geht natürlich ruck-zuck mit php) und der eingebettete SPAN-Text, der dann außerhalb an fixer Stelle erscheint, ebenfalls individuell mit Text (hier Zahl) ausgefüllt werden. Dasselbe gilt für das href-Ziel (index.php?heureka2_zahl=5). Die Formatierung des Span-containers muss unbedingt im Head erfolgen, damit das Ein- und Ausschalten über display-Befehl funktioniert. Ohne diesen Switch würden alle Zahlen übereinander erscheinen

This example shows the basic concept:

Several Links with different widths; they all begin at the same position (position:absolut; top:0; left:0)
the link with the biggest width ist at the bottom
Everey Link has his own HREF-Target (for example a certain parameter, e.g. index.php?value=1, index.php?value=2, index.php?value=3 .. ).
The links are working with hover-effect.
this effekt ist NOT the display:none/display:block effect, but the changing of the background-color (here: transparent to red), and if you want with changing the color of the right border (here: transparent to black)
Touching the area with the mouse will allways activate that link, which is most at the bottom. Clicking will acitivate this Link
Using embedded SPAN-elemtens you can display a text outside of the area.

For demonstration I placed the position-style-sheets in the HTML-code directly in the A-Tags; you also (better) could define them in the head ( #heureka2 a span {position:absolute; left:0; top:0). In any case, the value of "width", you have to definate separately in every link, not in the head (it's easy by working with php) und the embedded SPAN-text, which is shown at a fixed position, have also to be definated in every link. Here the span-text is a number.

You also have to define the href-destination in every link (index.php?heureka2_zahl=5).
You have to format the span-container in the head, and only there, because of the hover-function and the turning-on and off with the help of "display". Without this switch all numbers (texts) would lie one over the other.

25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1

HTML-code of example 2

Heureka 2B - Variante mit rechter Markierung

Einfache Markierung durch Randfarbe; wenig Möglichkeiten. Bei diesem Beispiel, das ich früher unter IE5.5 entwickelte hatte, tauchen Phänomene auf, die ich nicht erklären kann.

Heureka 3

Soll der Füllbalken andere Elemente vor sich herschieben, z.B. Grafiken oder CSS-Pseudografiken (wie ich sie liebe), dann dürfen sie nicht HINTER den Link gesetzt werden, sondern rechtsbündig in den A-Tag hinein. Hier ein kleiner SPAN-Container mit gelbem Rand.

If you want to use an element (for example a gif oder a gif-like css-element, like I love), then this element has to be set within the a-tag and not behind; using text-align:right within the a-tag the element will appear at the right end of the filling bar. Here the element ist a little span-container with yellow border.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

Beim Veröffentlichen der unter IE 5.5 entwickelten Entwürfe stieß ich auf folgendes Randproblem: Nach neuem Standard darf man keine DIV-Container innerhalb eines Verweises platzieren, stattdessen muss man einen SPAN-Container nehmen, wenn man Grafiken nachahmen will. Wenn man dann noch den neuen Doctype "strict" benutzt, stellt man fest, dass dem SPAN offenbar keine feste Breite zugewiesen werden kann. Daher musste ich beim Umschreiben tricksen - ich habe zwei Bindestrichte mit derselben Farbe wie der Hintergrund eingearbeitet. Dann erschien überraschend der Span-Container

There ist a problem using the new standards of CSS (doctype strict). It's not allowed to place a DIV-Containter in a Link or another SPAN-Container (non-block-element). With other words: if you want to place an HTML-Element instead of a picture, you have to use a SPAN-Container. But a SPAN-Container, using doctype strict, has no width and height (I dont know why: sometimes it works and sometimes it doesn¥t) and so you¥ll find out, that using a character (here two -- with the same color as the background-color) in the span-container will show the element. Another possibility is perhaps to mutate the link to a block-element, using display:block, but then you¥ll have to solve other problems (for example if there are more links in the same line (float:left? od positions absolute?).

HTML-Code

Heureka 4

Bei Erstellung dieser Seite probierte ich ausnahmsweise auch mal ein Grafikelement einzubauen. Effekt: Die Grafik bleibt, außer beim Opera, beim IE 6 und computerabhängig beim Firefox "hängen". Warum, weiß ich nicht, hier muss ich noch experimentieren. Gelegentlich erschien bei mir im Firefox die Grafik überhaupt nicht. Auch die Verwendung von margin-left statt width half nicht; die Grafik erscheint dann überhaupt nicht. Trotzdem möchte ich dieses Beispiel aufzeigen.

A first experiment with a graphic-element. But there are some problems with different browsers.

Heureka 5

Der rote Pfeil ist wieder pures CSS; Position:relative, top:-8px; left:-5px. Klappt nicht im Opera, dort erscheint der Pfeil nicht über dem Regler und ist zu klein, ferner bleiben der Pfeil beim Zurückfahren "hängen"

the red arrow ist a pure css-element; it has the position:relative, top:-8px; left:-5px (relative to the right side of the link). It doesn't work at opera and there are differences in different browsers.

- - - - - - - - - - - - - - - - - - - - - - - - -

Nochmal zu dem roten Dreieck: Das rote Dreieck besteht aus einem simplen, im href-Tag untergebrachten Span-Container --
Das Dreieck wird relativ positioniert(position:relative; top:-8px; left:5px)
Damit der span-container zum grafik-ähnlichen Pfeil wird, habe ich ihn innen so komprimiert, dass nur noch die Border übrigbleiben, wovon 3 Seiten in der Hintergrundfarbe und ein border rot formatiert ist. Diese durch Eric Meyer angeregte Konstruktion stammt von Lasse Reichstein Nielsen (http://www.infimum.dk/HTML/slantinfo.html). Man könnte natürlich auch mit einem Grafikelement arbeiten.

Die gesamte Span-Definition sieht also so aus:
span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10 10 0 10; border-style: solid; border-color:red white white white; display:inline}

By the way: the red arrow is a simple span-container, placed in the href-tag -- .
The arrow is relativ positioned ((position:relative; top:-8px; left:5px). To make the span-element to an arrow, I had to compress it, so that just the borders appear; three border-sides have the same color as the background-color, the fourth border has its own color. This construction is from Lasse Reichstein Nielsen (http://www.infimum.dk/HTML/slantinfo.html). You could also use a picture-element.

The complete Span-definition is here:
span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10 10 0 10; border-style: solid; border-color:red white white white; display:inline}

The complete CSS and HTML-Code:

#heureka5 a {height:10px; position:absolute; top:0 px; left:0px; text-align:right; }
#heureka5 a:hover {border-right:0px; background-color:yellow;}
#heureka5 a span {display:none}
#heureka5 a:hover span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10px 10px 0 10px; border-style: solid; border-color:red white white white; display:inline}

<a style='width:500"."px' href='index.php?heureka5_zahl=25'>-</a>
<a style='width:480"."px' href='index.php?heureka5_zahl=24'>-</a>
<a style='width:460"."px' href='index.php?heureka5_zahl=23'>-</a>
<a style='width:440"."px' href='index.php?heureka5_zahl=22'>-</a>
<a style='width:420"."px' href='index.php?heureka5_zahl=21'>-</a>
<a style='width:400"."px' href='index.php?heureka5_zahl=20'>-</a>
<a style='width:380"."px' href='index.php?heureka5_zahl=19'>-</a>
<a style='width:360"."px' href='index.php?heureka5_zahl=18'>-</a>
<a style='width:340"."px' href='index.php?heureka5_zahl=17'>-</a>
<a style='width:320"."px' href='index.php?heureka5_zahl=16'>-</a>
<a style='width:300"."px' href='index.php?heureka5_zahl=15'>-</a>
<a style='width:280"."px' href='index.php?heureka5_zahl=14'>-</a>
<a style='width:260"."px' href='index.php?heureka5_zahl=13'>-</a>
<a style='width:240"."px' href='index.php?heureka5_zahl=12'>-</a>
<a style='width:220"."px' href='index.php?heureka5_zahl=11'>-</a>
<a style='width:200"."px' href='index.php?heureka5_zahl=10'>-</a>
<a style='width:180"."px' href='index.php?heureka5_zahl=9'>-</a>
<a style='width:160"."px' href='index.php?heureka5_zahl=8'>-</a>
<a style='width:140"."px' href='index.php?heureka5_zahl=7'>-</a>
<a style='width:120"."px' href='index.php?heureka5_zahl=6'>-</a>
<a style='width:100"."px' href='index.php?heureka5_zahl=5'>-</a>
<a style='width:80"."px' href='index.php?heureka5_zahl=4'>-</a>
<a style='width:60"."px' href='index.php?heureka5_zahl=3'>-</a>
<a style='width:40"."px' href='index.php?heureka5_zahl=2'>-</a>
<a style='width:20"."px' href='index.php?heureka5_zahl=1'>-</a>

Zum Vergleich: Simple-Slider 2 - ein unechter Schieberegler (a pseudo css-slider)

Dieser kohlebetriebene CSS-Slider arbeitet mit hintereinander gereihten HREFs, mit includiertem SPAN-Text, der fix positioniert wird.

Nachteile:
a) Es scheint nicht möglich zu sein, eine farbige Fuellstandsanzeige zu erreichen. Das aber war der Anreiz zur Erfindung des "echten" CSS-Sliders.

Damit die Links in voller Breite erscheinen, auch wenn sie keinen Text enthalten, musste ich mit display:block in Verbindung mit float:left arbeiten (als ich den Slider entwicklet hatte, unter IE 5.5., ging das natürlich einfacher).

b) (Scheinbar) kaum Gestaltungsmöglichkeiten bezüglich des Markierungspunkte. Man kann zwar den jeweils berührten Link mit Hilfe des Wechsels der Hintergrundfarbe "aufleuchten" lassen, aber es ist nicht möglich, eine 20px breite Markierung anzuzeigen, wenn mann 300 aufeinander folgende Links mit jeweils 2px Breite hat. Das ginge nur bei wenig Stufen und dann nur ruckelnd.

Die fest positionierte Anzeige des übertragenen Wertes benötigt einen umschließenden DIV-Container. Mit dem IE 6 hatte ich Probleme mit einem ungewollten Zeilenumbruch, die ich erst beseitigen konnte, als ich am Ende mit Clear:both arbeitete.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

Quellcode:

Der Aufbau des CSS-Schiebereglers - Erklärung und Anleitung

1. Schritt

Ein umfassender DIV-Container, relativ positioniert (damit er für weitere Positionierungen als Elternelement dient), und nacheinander mehrere Verweise mit unterschiedlichen WIDTH-Angaben von 500px bis 20 px.
DerCSS-Code (der Border ist nur zur Verdeutlichung, und der im Quelltext ersichtliche display:block-Wert dient nur der DEMO)
#schritt1 a {background-color:red ; border:1px solid gray; }
#schritt1 a:hover {background-color:red ; border:1px solid gray; }

Zweiter Schritt - positionieren

#schritt2 a {border:1px solid gray; position:absolute; top:0 px; left:0px}
#schritt2 a:hover {background-color:red ; border:1px solid gray}

Erläuterung: Durch Positionierung aller Links auf position:absolute, left:0, top:0 fangen alle Verweise links oben im übergreifenden DIV-Container an und überlappen sich. Den Border habe ich zur Verdeutlichung belassen.

Die Positionsangabe kann einheitlich im head definiert werden. Natürlich muss der umschließende DIV-Container auch positioniert sein, sonst richten sich die Posititonsangaben am Seitenrand als Elterenelment aus. Ein "position:relative" ohne weitere Angaben reicht völlig, und der DIV-Container bleibt dort, wo er geschrieben ist.

Display:none wird in dieser Variante nicht benötigt (das ist nur notwendig, wenn man z.B. mit Hilfe von eingebetteten SPANs an anderer Stelle einen Wert erscheinen lässt.

Durch andersfarbige rechte Ränder (z.B. border-right:30px solid black) kann man den Balken-Abschluss verschönern. Möglich ist auch, innerhalb des href-Tags eine Grafik oder ein entsprechend formatiertes SPAN-Element einzubauen, das dann scheinbar vor sich hergeschoben wird (allerdings ist zu beachten, dass dieses Element noch VOR dem evtl. formatierten rechten Rand des Verweises erscheint).

Jedem Verweis muss ein Wert als Parameter mitgegeben werden, sonst hat der Regler keinen Sinn.

Will man den Wert (oder eine zugehörige Farbe, Bild etc) außerhalb des Reglers erscheinen lassen, dann muss man ebenfalls ein SPAN-Element einbauen und einheitlich positionieren. Hier ist wichtig, dass das Span-Element mit display:none zunächst unsichtbar gemacht wird, sonst sieht man sämtliche Zahlen übereinander.

CSS und HTML-Quellcode



<div id="schritt2"  style="position:relative; border:1px solid gray; margin-left:35px; font-size:20px; width:550px; "><br>
<a href="" style=" width:550px "></a>
<a href="" style="width:500px; "></a>
<a href="" style="width:450px; "></a>
<a href="" style="width:400px; "></a>
<a href="" style="width:350px; "></a>
<a href="" style="width:300px; "></a>
<a href="" style="width:250px; "></a>
<a href="" style="width:200px; "></a>
<a href="" style="width:150px; "></a>
<a href="" style="width:100px; "></a>
<a href="" style="width:50px; "></a>
<a href="" style="width:20px; "></a>
</div>

Quellcode des Reglers im Eingangsbeispiel auf dieser Seite (Heureka 1)

CSS-Code im Head:

#heureka1 {position:relative; margin-left:55px; background-color:#E2E2C7; border:solid black 5px; width:600px; height:15px}
#heureka1 a {position:absolute; left:0px; top:0px; height:15px;}
#heureka1 a:hover {border-right:20px solid black; background-color:red}
#heureka1 a:hover.max {background-color:red}
#heureka1 a span {display:none}
#heureka1 span.anzeige {display:inline; position:absolute; top:-5px; left:-60px; background-color:black; width:25px; height:15px; border:5px solid #1f1f1f; font-family:arial; font-size:12px; color:green; font-weight:bold; text-align:center}
#heureka1 a:hover span {display:inline; position:absolute; top:-5px; left:-60px; background-color:black; width:25px; height:15px; border:5px solid #1F1F1F; font-family:arial; font-size:12px; color:#FFDF00; text-align:center}

HTML-Code:
(ich habe hier mit 200 Verweise gearbeitet, damit der Regler fein 'gleitet'. Es ließe sich aber durchaus brauchbar auch mit 30 Stufen


<div id="heureka1" >
<span class="anzeige"><? echo 48; ?> </span><!--für die Anzeige der Zahl ausserhalb der Reglerleiste-->


<a style=" width:600px" href="index.php?zahl=200"><span>200</span> </a>
<a style=" width:597px" href="index.php?zahl=199"><span>199</span> </a>
<a style=" width:594px" href="index.php?zahl=198"><span>198</span> </a>
<a style=" width:591px" href="index.php?zahl=197"><span>197</span> </a>
<a style=" width:588px" href="index.php?zahl=196"><span>196</span> </a>
<a style=" width:585px" href="index.php?zahl=195"><span>195</span> </a>
<a style=" width:582px" href="index.php?zahl=194"><span>194</span> </a>
<a style=" width:579px" href="index.php?zahl=193"><span>193</span> </a>
<a style=" width:576px" href="index.php?zahl=192"><span>192</span> </a>
<a style=" width:573px" href="index.php?zahl=191"><span>191</span> </a>
<a style=" width:570px" href="index.php?zahl=190"><span>190</span> </a>
<a style=" width:567px" href="index.php?zahl=189"><span>189</span> </a>
<a style=" width:564px" href="index.php?zahl=188"><span>188</span> </a>
<a style=" width:561px" href="index.php?zahl=187"><span>187</span> </a>
<a style=" width:558px" href="index.php?zahl=186"><span>186</span> </a>
<a style=" width:555px" href="index.php?zahl=185"><span>185</span> </a>
<a style=" width:552px" href="index.php?zahl=184"><span>184</span> </a>
<a style=" width:549px" href="index.php?zahl=183"><span>183</span> </a>
<a style=" width:546px" href="index.php?zahl=182"><span>182</span> </a>
<a style=" width:543px" href="index.php?zahl=181"><span>181</span> </a>
<a style=" width:540px" href="index.php?zahl=180"><span>180</span> </a>
<a style=" width:537px" href="index.php?zahl=179"><span>179</span> </a>
<a style=" width:534px" href="index.php?zahl=178"><span>178</span> </a>
<a style=" width:531px" href="index.php?zahl=177"><span>177</span> </a>
<a style=" width:528px" href="index.php?zahl=176"><span>176</span> </a>
<a style=" width:525px" href="index.php?zahl=175"><span>175</span> </a>
<a style=" width:522px" href="index.php?zahl=174"><span>174</span> </a>
<a style=" width:519px" href="index.php?zahl=173"><span>173</span> </a>
<a style=" width:516px" href="index.php?zahl=172"><span>172</span> </a>
<a style=" width:513px" href="index.php?zahl=171"><span>171</span> </a>
<a style=" width:510px" href="index.php?zahl=170"><span>170</span> </a>
<a style=" width:507px" href="index.php?zahl=169"><span>169</span> </a>
<a style=" width:504px" href="index.php?zahl=168"><span>168</span> </a>
<a style=" width:501px" href="index.php?zahl=167"><span>167</span> </a>
<a style=" width:498px" href="index.php?zahl=166"><span>166</span> </a>
<a style=" width:495px" href="index.php?zahl=165"><span>165</span> </a>
<a style=" width:492px" href="index.php?zahl=164"><span>164</span> </a>
<a style=" width:489px" href="index.php?zahl=163"><span>163</span> </a>
<a style=" width:486px" href="index.php?zahl=162"><span>162</span> </a>
<a style=" width:483px" href="index.php?zahl=161"><span>161</span> </a>
<a style=" width:480px" href="index.php?zahl=160"><span>160</span> </a>
<a style=" width:477px" href="index.php?zahl=159"><span>159</span> </a>
<a style=" width:474px" href="index.php?zahl=158"><span>158</span> </a>
<a style=" width:471px" href="index.php?zahl=157"><span>157</span> </a>
<a style=" width:468px" href="index.php?zahl=156"><span>156</span> </a>
<a style=" width:465px" href="index.php?zahl=155"><span>155</span> </a>
<a style=" width:462px" href="index.php?zahl=154"><span>154</span> </a>
<a style=" width:459px" href="index.php?zahl=153"><span>153</span> </a>
<a style=" width:456px" href="index.php?zahl=152"><span>152</span> </a>
<a style=" width:453px" href="index.php?zahl=151"><span>151</span> </a>
<a style=" width:450px" href="index.php?zahl=150"><span>150</span> </a>
<a style=" width:447px" href="index.php?zahl=149"><span>149</span> </a>
<a style=" width:444px" href="index.php?zahl=148"><span>148</span> </a>
<a style=" width:441px" href="index.php?zahl=147"><span>147</span> </a>
<a style=" width:438px" href="index.php?zahl=146"><span>146</span> </a>
<a style=" width:435px" href="index.php?zahl=145"><span>145</span> </a>
<a style=" width:432px" href="index.php?zahl=144"><span>144</span> </a>
<a style=" width:429px" href="index.php?zahl=143"><span>143</span> </a>
<a style=" width:426px" href="index.php?zahl=142"><span>142</span> </a>
<a style=" width:423px" href="index.php?zahl=141"><span>141</span> </a>
<a style=" width:420px" href="index.php?zahl=140"><span>140</span> </a>
<a style=" width:417px" href="index.php?zahl=139"><span>139</span> </a>
<a style=" width:414px" href="index.php?zahl=138"><span>138</span> </a>
<a style=" width:411px" href="index.php?zahl=137"><span>137</span> </a>
<a style=" width:408px" href="index.php?zahl=136"><span>136</span> </a>
<a style=" width:405px" href="index.php?zahl=135"><span>135</span> </a>
<a style=" width:402px" href="index.php?zahl=134"><span>134</span> </a>
<a style=" width:399px" href="index.php?zahl=133"><span>133</span> </a>
<a style=" width:396px" href="index.php?zahl=132"><span>132</span> </a>
<a style=" width:393px" href="index.php?zahl=131"><span>131</span> </a>
<a style=" width:390px" href="index.php?zahl=130"><span>130</span> </a>
<a style=" width:387px" href="index.php?zahl=129"><span>129</span> </a>
<a style=" width:384px" href="index.php?zahl=128"><span>128</span> </a>
<a style=" width:381px" href="index.php?zahl=127"><span>127</span> </a>
<a style=" width:378px" href="index.php?zahl=126"><span>126</span> </a>
<a style=" width:375px" href="index.php?zahl=125"><span>125</span> </a>
<a style=" width:372px" href="index.php?zahl=124"><span>124</span> </a>
<a style=" width:369px" href="index.php?zahl=123"><span>123</span> </a>
<a style=" width:366px" href="index.php?zahl=122"><span>122</span> </a>
<a style=" width:363px" href="index.php?zahl=121"><span>121</span> </a>
<a style=" width:360px" href="index.php?zahl=120"><span>120</span> </a>
<a style=" width:357px" href="index.php?zahl=119"><span>119</span> </a>
<a style=" width:354px" href="index.php?zahl=118"><span>118</span> </a>
<a style=" width:351px" href="index.php?zahl=117"><span>117</span> </a>
<a style=" width:348px" href="index.php?zahl=116"><span>116</span> </a>
<a style=" width:345px" href="index.php?zahl=115"><span>115</span> </a>
<a style=" width:342px" href="index.php?zahl=114"><span>114</span> </a>
<a style=" width:339px" href="index.php?zahl=113"><span>113</span> </a>
<a style=" width:336px" href="index.php?zahl=112"><span>112</span> </a>
<a style=" width:333px" href="index.php?zahl=111"><span>111</span> </a>
<a style=" width:330px" href="index.php?zahl=110"><span>110</span> </a>
<a style=" width:327px" href="index.php?zahl=109"><span>109</span> </a>
<a style=" width:324px" href="index.php?zahl=108"><span>108</span> </a>
<a style=" width:321px" href="index.php?zahl=107"><span>107</span> </a>
<a style=" width:318px" href="index.php?zahl=106"><span>106</span> </a>
<a style=" width:315px" href="index.php?zahl=105"><span>105</span> </a>
<a style=" width:312px" href="index.php?zahl=104"><span>104</span> </a>
<a style=" width:309px" href="index.php?zahl=103"><span>103</span> </a>
<a style=" width:306px" href="index.php?zahl=102"><span>102</span> </a>
<a style=" width:303px" href="index.php?zahl=101"><span>101</span> </a>
<a style=" width:300px" href="index.php?zahl=100"><span>100</span> </a>
<a style=" width:297px" href="index.php?zahl=99"><span>99</span> </a>
<a style=" width:294px" href="index.php?zahl=98"><span>98</span> </a>
<a style=" width:291px" href="index.php?zahl=97"><span>97</span> </a>
<a style=" width:288px" href="index.php?zahl=96"><span>96</span> </a>
<a style=" width:285px" href="index.php?zahl=95"><span>95</span> </a>
<a style=" width:282px" href="index.php?zahl=94"><span>94</span> </a>
<a style=" width:279px" href="index.php?zahl=93"><span>93</span> </a>
<a style=" width:276px" href="index.php?zahl=92"><span>92</span> </a>
<a style=" width:273px" href="index.php?zahl=91"><span>91</span> </a>
<a style=" width:270px" href="index.php?zahl=90"><span>90</span> </a>
<a style=" width:267px" href="index.php?zahl=89"><span>89</span> </a>
<a style=" width:264px" href="index.php?zahl=88"><span>88</span> </a>
<a style=" width:261px" href="index.php?zahl=87"><span>87</span> </a>
<a style=" width:258px" href="index.php?zahl=86"><span>86</span> </a>
<a style=" width:255px" href="index.php?zahl=85"><span>85</span> </a>
<a style=" width:252px" href="index.php?zahl=84"><span>84</span> </a>
<a style=" width:249px" href="index.php?zahl=83"><span>83</span> </a>
<a style=" width:246px" href="index.php?zahl=82"><span>82</span> </a>
<a style=" width:243px" href="index.php?zahl=81"><span>81</span> </a>
<a style=" width:240px" href="index.php?zahl=80"><span>80</span> </a>
<a style=" width:237px" href="index.php?zahl=79"><span>79</span> </a>
<a style=" width:234px" href="index.php?zahl=78"><span>78</span> </a>
<a style=" width:231px" href="index.php?zahl=77"><span>77</span> </a>
<a style=" width:228px" href="index.php?zahl=76"><span>76</span> </a>
<a style=" width:225px" href="index.php?zahl=75"><span>75</span> </a>
<a style=" width:222px" href="index.php?zahl=74"><span>74</span> </a>
<a style=" width:219px" href="index.php?zahl=73"><span>73</span> </a>
<a style=" width:216px" href="index.php?zahl=72"><span>72</span> </a>
<a style=" width:213px" href="index.php?zahl=71"><span>71</span> </a>
<a style=" width:210px" href="index.php?zahl=70"><span>70</span> </a>
<a style=" width:207px" href="index.php?zahl=69"><span>69</span> </a>
<a style=" width:204px" href="index.php?zahl=68"><span>68</span> </a>
<a style=" width:201px" href="index.php?zahl=67"><span>67</span> </a>
<a style=" width:198px" href="index.php?zahl=66"><span>66</span> </a>
<a style=" width:195px" href="index.php?zahl=65"><span>65</span> </a>
<a style=" width:192px" href="index.php?zahl=64"><span>64</span> </a>
<a style=" width:189px" href="index.php?zahl=63"><span>63</span> </a>
<a style=" width:186px" href="index.php?zahl=62"><span>62</span> </a>
<a style=" width:183px" href="index.php?zahl=61"><span>61</span> </a>
<a style=" width:180px" href="index.php?zahl=60"><span>60</span> </a>
<a style=" width:177px" href="index.php?zahl=59"><span>59</span> </a>
<a style=" width:174px" href="index.php?zahl=58"><span>58</span> </a>
<a style=" width:171px" href="index.php?zahl=57"><span>57</span> </a>
<a style=" width:168px" href="index.php?zahl=56"><span>56</span> </a>
<a style=" width:165px" href="index.php?zahl=55"><span>55</span> </a>
<a style=" width:162px" href="index.php?zahl=54"><span>54</span> </a>
<a style=" width:159px" href="index.php?zahl=53"><span>53</span> </a>
<a style=" width:156px" href="index.php?zahl=52"><span>52</span> </a>
<a style=" width:153px" href="index.php?zahl=51"><span>51</span> </a>
<a style=" width:150px" href="index.php?zahl=50"><span>50</span> </a>
<a style=" width:147px" href="index.php?zahl=49"><span>49</span> </a>
<a style=" width:144px" href="index.php?zahl=48"><span>48</span> </a>
<a style=" width:141px" href="index.php?zahl=47"><span>47</span> </a>
<a style=" width:138px" href="index.php?zahl=46"><span>46</span> </a>
<a style=" width:135px" href="index.php?zahl=45"><span>45</span> </a>
<a style=" width:132px" href="index.php?zahl=44"><span>44</span> </a>
<a style=" width:129px" href="index.php?zahl=43"><span>43</span> </a>
<a style=" width:126px" href="index.php?zahl=42"><span>42</span> </a>
<a style=" width:123px" href="index.php?zahl=41"><span>41</span> </a>
<a style=" width:120px" href="index.php?zahl=40"><span>40</span> </a>
<a style=" width:117px" href="index.php?zahl=39"><span>39</span> </a>
<a style=" width:114px" href="index.php?zahl=38"><span>38</span> </a>
<a style=" width:111px" href="index.php?zahl=37"><span>37</span> </a>
<a style=" width:108px" href="index.php?zahl=36"><span>36</span> </a>
<a style=" width:105px" href="index.php?zahl=35"><span>35</span> </a>
<a style=" width:102px" href="index.php?zahl=34"><span>34</span> </a>
<a style=" width:99px" href="index.php?zahl=33"><span>33</span> </a>
<a style=" width:96px" href="index.php?zahl=32"><span>32</span> </a>
<a style=" width:93px" href="index.php?zahl=31"><span>31</span> </a>
<a style=" width:90px" href="index.php?zahl=30"><span>30</span> </a>
<a style=" width:87px" href="index.php?zahl=29"><span>29</span> </a>
<a style=" width:84px" href="index.php?zahl=28"><span>28</span> </a>
<a style=" width:81px" href="index.php?zahl=27"><span>27</span> </a>
<a style=" width:78px" href="index.php?zahl=26"><span>26</span> </a>
<a style=" width:75px" href="index.php?zahl=25"><span>25</span> </a>
<a style=" width:72px" href="index.php?zahl=24"><span>24</span> </a>
<a style=" width:69px" href="index.php?zahl=23"><span>23</span> </a>
<a style=" width:66px" href="index.php?zahl=22"><span>22</span> </a>
<a style=" width:63px" href="index.php?zahl=21"><span>21</span> </a>
<a style=" width:60px" href="index.php?zahl=20"><span>20</span> </a>
<a style=" width:57px" href="index.php?zahl=19"><span>19</span> </a>
<a style=" width:54px" href="index.php?zahl=18"><span>18</span> </a>
<a style=" width:51px" href="index.php?zahl=17"><span>17</span> </a>
<a style=" width:48px" href="index.php?zahl=16"><span>16</span> </a>
<a style=" width:45px" href="index.php?zahl=15"><span>15</span> </a>
<a style=" width:42px" href="index.php?zahl=14"><span>14</span> </a>
<a style=" width:39px" href="index.php?zahl=13"><span>13</span> </a>
<a style=" width:36px" href="index.php?zahl=12"><span>12</span> </a>
<a style=" width:33px" href="index.php?zahl=11"><span>11</span> </a>
<a style=" width:30px" href="index.php?zahl=10"><span>10</span> </a>
<a style=" width:27px" href="index.php?zahl=9"><span>9</span> </a>
<a style=" width:24px" href="index.php?zahl=8"><span>8</span> </a>
<a style=" width:21px" href="index.php?zahl=7"><span>7</span> </a>
<a style=" width:18px" href="index.php?zahl=6"><span>6</span> </a>
<a style=" width:15px" href="index.php?zahl=5"><span>5</span> </a>
<a style=" width:12px" href="index.php?zahl=4"><span>4</span> </a>
<a style=" width:9px" href="index.php?zahl=3"><span>3</span> </a>
<a style=" width:6px" href="index.php?zahl=2"><span>2</span> </a>
<a style=" width:3px" href="index.php?zahl=1"><span>1</span> </a>
</div>

Realisiation mit PHP

Den Text in obiger Box habe ich nicht wirklich geschrieben, auch den HTML-Code selbst habe ich nicht per Hand geschrieben. Ein par Zeilen PHP-Code genügen, um den gesamen Quelltext für den Slider zu erzeugen:


echo "<div id='heureka1'>
<span class='anzeige'>$zahl</span>";
$breite=650;
$stufen=30;
$breitendifferenz=round($breite/$stufen);
for($x=$stufen; $x>0; $x--) {
echo "<a style=" width:$breite"."px" href="index.php?zahl=$x"><span>$x</span> </a>";
$breite=$breite-$breitendifferenz;
}
echo "</div>"

Anwendungsbeispiele

Anwendungsbeispiel: CSS-Color-Slider

Der CSS-Colorslider: oder: auch Farben kann man regeln!

No Javascript, no Java, no Flash, no tricks. Pure CSS.

actual value of color: #F3F5E7

Mit Maus überfahren und klicken (touch with the mouse)

Sample: CSS-Matrix-Slider

Anwendungsbeispiel Matrix (Using the css-slider for a matrix). Mit der Maus über die Fläche fahren - touch the area with the mouse

300 : 300 280 : 300 260 : 300 240 : 300 220 : 300 200 : 300 180 : 300 160 : 300 140 : 300 120 : 300 100 : 300 80 : 300 60 : 300 40 : 300 20 : 300 0 : 300 300 : 280 280 : 280 260 : 280 240 : 280 220 : 280 200 : 280 180 : 280 160 : 280 140 : 280 120 : 280 100 : 280 80 : 280 60 : 280 40 : 280 20 : 280 0 : 280 300 : 260 280 : 260 260 : 260 240 : 260 220 : 260 200 : 260 180 : 260 160 : 260 140 : 260 120 : 260 100 : 260 80 : 260 60 : 260 40 : 260 20 : 260 0 : 260 300 : 240 280 : 240 260 : 240 240 : 240 220 : 240 200 : 240 180 : 240 160 : 240 140 : 240 120 : 240 100 : 240 80 : 240 60 : 240 40 : 240 20 : 240 0 : 240 300 : 220 280 : 220 260 : 220 240 : 220 220 : 220 200 : 220 180 : 220 160 : 220 140 : 220 120 : 220 100 : 220 80 : 220 60 : 220 40 : 220 20 : 220 0 : 220 300 : 200 280 : 200 260 : 200 240 : 200 220 : 200 200 : 200 180 : 200 160 : 200 140 : 200 120 : 200 100 : 200 80 : 200 60 : 200 40 : 200 20 : 200 0 : 200 300 : 180 280 : 180 260 : 180 240 : 180 220 : 180 200 : 180 180 : 180 160 : 180 140 : 180 120 : 180 100 : 180 80 : 180 60 : 180 40 : 180 20 : 180 0 : 180 300 : 160 280 : 160 260 : 160 240 : 160 220 : 160 200 : 160 180 : 160 160 : 160 140 : 160 120 : 160 100 : 160 80 : 160 60 : 160 40 : 160 20 : 160 0 : 160 300 : 140 280 : 140 260 : 140 240 : 140 220 : 140 200 : 140 180 : 140 160 : 140 140 : 140 120 : 140 100 : 140 80 : 140 60 : 140 40 : 140 20 : 140 0 : 140 300 : 120 280 : 120 260 : 120 240 : 120 220 : 120 200 : 120 180 : 120 160 : 120 140 : 120 120 : 120 100 : 120 80 : 120 60 : 120 40 : 120 20 : 120 0 : 120 300 : 100 280 : 100 260 : 100 240 : 100 220 : 100 200 : 100 180 : 100 160 : 100 140 : 100 120 : 100 100 : 100 80 : 100 60 : 100 40 : 100 20 : 100 0 : 100 300 : 80 280 : 80 260 : 80 240 : 80 220 : 80 200 : 80 180 : 80 160 : 80 140 : 80 120 : 80 100 : 80 80 : 80 60 : 80 40 : 80 20 : 80 0 : 80 300 : 60 280 : 60 260 : 60 240 : 60 220 : 60 200 : 60 180 : 60 160 : 60 140 : 60 120 : 60 100 : 60 80 : 60 60 : 60 40 : 60 20 : 60 0 : 60 300 : 40 280 : 40 260 : 40 240 : 40 220 : 40 200 : 40 180 : 40 160 : 40 140 : 40 120 : 40 100 : 40 80 : 40 60 : 40 40 : 40 20 : 40 0 : 40 300 : 20 280 : 20 260 : 20 240 : 20 220 : 20 200 : 20 180 : 20 160 : 20 140 : 20 120 : 20 100 : 20 80 : 20 60 : 20 40 : 20 20 : 20 0 : 20

Die Einzelheiten zu den Matrix-Experimenten

Erstes Experiment mit einer Matrix

Fahren Sie mit der Maus über die Fläche!

25 : 25 24 : 25 23 : 25 22 : 25 21 : 25 20 : 25 19 : 25 18 : 25 17 : 25 16 : 25 15 : 25 14 : 25 13 : 25 12 : 25 11 : 25 10 : 25 9 : 25 8 : 25 7 : 25 6 : 25 5 : 25 4 : 25 3 : 25 2 : 25 1 : 25
25 : 24 24 : 24 23 : 24 22 : 24 21 : 24 20 : 24 19 : 24 18 : 24 17 : 24 16 : 24 15 : 24 14 : 24 13 : 24 12 : 24 11 : 24 10 : 24 9 : 24 8 : 24 7 : 24 6 : 24 5 : 24 4 : 24 3 : 24 2 : 24 1 : 24
25 : 23 24 : 23 23 : 23 22 : 23 21 : 23 20 : 23 19 : 23 18 : 23 17 : 23 16 : 23 15 : 23 14 : 23 13 : 23 12 : 23 11 : 23 10 : 23 9 : 23 8 : 23 7 : 23 6 : 23 5 : 23 4 : 23 3 : 23 2 : 23 1 : 23
25 : 22 24 : 22 23 : 22 22 : 22 21 : 22 20 : 22 19 : 22 18 : 22 17 : 22 16 : 22 15 : 22 14 : 22 13 : 22 12 : 22 11 : 22 10 : 22 9 : 22 8 : 22 7 : 22 6 : 22 5 : 22 4 : 22 3 : 22 2 : 22 1 : 22
25 : 21 24 : 21 23 : 21 22 : 21 21 : 21 20 : 21 19 : 21 18 : 21 17 : 21 16 : 21 15 : 21 14 : 21 13 : 21 12 : 21 11 : 21 10 : 21 9 : 21 8 : 21 7 : 21 6 : 21 5 : 21 4 : 21 3 : 21 2 : 21 1 : 21
25 : 20 24 : 20 23 : 20 22 : 20 21 : 20 20 : 20 19 : 20 18 : 20 17 : 20 16 : 20 15 : 20 14 : 20 13 : 20 12 : 20 11 : 20 10 : 20 9 : 20 8 : 20 7 : 20 6 : 20 5 : 20 4 : 20 3 : 20 2 : 20 1 : 20
25 : 19 24 : 19 23 : 19 22 : 19 21 : 19 20 : 19 19 : 19 18 : 19 17 : 19 16 : 19 15 : 19 14 : 19 13 : 19 12 : 19 11 : 19 10 : 19 9 : 19 8 : 19 7 : 19 6 : 19 5 : 19 4 : 19 3 : 19 2 : 19 1 : 19
25 : 18 24 : 18 23 : 18 22 : 18 21 : 18 20 : 18 19 : 18 18 : 18 17 : 18 16 : 18 15 : 18 14 : 18 13 : 18 12 : 18 11 : 18 10 : 18 9 : 18 8 : 18 7 : 18 6 : 18 5 : 18 4 : 18 3 : 18 2 : 18 1 : 18
25 : 17 24 : 17 23 : 17 22 : 17 21 : 17 20 : 17 19 : 17 18 : 17 17 : 17 16 : 17 15 : 17 14 : 17 13 : 17 12 : 17 11 : 17 10 : 17 9 : 17 8 : 17 7 : 17 6 : 17 5 : 17 4 : 17 3 : 17 2 : 17 1 : 17
25 : 16 24 : 16 23 : 16 22 : 16 21 : 16 20 : 16 19 : 16 18 : 16 17 : 16 16 : 16 15 : 16 14 : 16 13 : 16 12 : 16 11 : 16 10 : 16 9 : 16 8 : 16 7 : 16 6 : 16 5 : 16 4 : 16 3 : 16 2 : 16 1 : 16
25 : 15 24 : 15 23 : 15 22 : 15 21 : 15 20 : 15 19 : 15 18 : 15 17 : 15 16 : 15 15 : 15 14 : 15 13 : 15 12 : 15 11 : 15 10 : 15 9 : 15 8 : 15 7 : 15 6 : 15 5 : 15 4 : 15 3 : 15 2 : 15 1 : 15
25 : 14 24 : 14 23 : 14 22 : 14 21 : 14 20 : 14 19 : 14 18 : 14 17 : 14 16 : 14 15 : 14 14 : 14 13 : 14 12 : 14 11 : 14 10 : 14 9 : 14 8 : 14 7 : 14 6 : 14 5 : 14 4 : 14 3 : 14 2 : 14 1 : 14
25 : 13 24 : 13 23 : 13 22 : 13 21 : 13 20 : 13 19 : 13 18 : 13 17 : 13 16 : 13 15 : 13 14 : 13 13 : 13 12 : 13 11 : 13 10 : 13 9 : 13 8 : 13 7 : 13 6 : 13 5 : 13 4 : 13 3 : 13 2 : 13 1 : 13
25 : 12 24 : 12 23 : 12 22 : 12 21 : 12 20 : 12 19 : 12 18 : 12 17 : 12 16 : 12 15 : 12 14 : 12 13 : 12 12 : 12 11 : 12 10 : 12 9 : 12 8 : 12 7 : 12 6 : 12 5 : 12 4 : 12 3 : 12 2 : 12 1 : 12
25 : 11 24 : 11 23 : 11 22 : 11 21 : 11 20 : 11 19 : 11 18 : 11 17 : 11 16 : 11 15 : 11 14 : 11 13 : 11 12 : 11 11 : 11 10 : 11 9 : 11 8 : 11 7 : 11 6 : 11 5 : 11 4 : 11 3 : 11 2 : 11 1 : 11
25 : 10 24 : 10 23 : 10 22 : 10 21 : 10 20 : 10 19 : 10 18 : 10 17 : 10 16 : 10 15 : 10 14 : 10 13 : 10 12 : 10 11 : 10 10 : 10 9 : 10 8 : 10 7 : 10 6 : 10 5 : 10 4 : 10 3 : 10 2 : 10 1 : 10
25 : 9 24 : 9 23 : 9 22 : 9 21 : 9 20 : 9 19 : 9 18 : 9 17 : 9 16 : 9 15 : 9 14 : 9 13 : 9 12 : 9 11 : 9 10 : 9 9 : 9 8 : 9 7 : 9 6 : 9 5 : 9 4 : 9 3 : 9 2 : 9 1 : 9
25 : 8 24 : 8 23 : 8 22 : 8 21 : 8 20 : 8 19 : 8 18 : 8 17 : 8 16 : 8 15 : 8 14 : 8 13 : 8 12 : 8 11 : 8 10 : 8 9 : 8 8 : 8 7 : 8 6 : 8 5 : 8 4 : 8 3 : 8 2 : 8 1 : 8
25 : 7 24 : 7 23 : 7 22 : 7 21 : 7 20 : 7 19 : 7 18 : 7 17 : 7 16 : 7 15 : 7 14 : 7 13 : 7 12 : 7 11 : 7 10 : 7 9 : 7 8 : 7 7 : 7 6 : 7 5 : 7 4 : 7 3 : 7 2 : 7 1 : 7
25 : 6 24 : 6 23 : 6 22 : 6 21 : 6 20 : 6 19 : 6 18 : 6 17 : 6 16 : 6 15 : 6 14 : 6 13 : 6 12 : 6 11 : 6 10 : 6 9 : 6 8 : 6 7 : 6 6 : 6 5 : 6 4 : 6 3 : 6 2 : 6 1 : 6
25 : 5 24 : 5 23 : 5 22 : 5 21 : 5 20 : 5 19 : 5 18 : 5 17 : 5 16 : 5 15 : 5 14 : 5 13 : 5 12 : 5 11 : 5 10 : 5 9 : 5 8 : 5 7 : 5 6 : 5 5 : 5 4 : 5 3 : 5 2 : 5 1 : 5
25 : 4 24 : 4 23 : 4 22 : 4 21 : 4 20 : 4 19 : 4 18 : 4 17 : 4 16 : 4 15 : 4 14 : 4 13 : 4 12 : 4 11 : 4 10 : 4 9 : 4 8 : 4 7 : 4 6 : 4 5 : 4 4 : 4 3 : 4 2 : 4 1 : 4
25 : 3 24 : 3 23 : 3 22 : 3 21 : 3 20 : 3 19 : 3 18 : 3 17 : 3 16 : 3 15 : 3 14 : 3 13 : 3 12 : 3 11 : 3 10 : 3 9 : 3 8 : 3 7 : 3 6 : 3 5 : 3 4 : 3 3 : 3 2 : 3 1 : 3
25 : 2 24 : 2 23 : 2 22 : 2 21 : 2 20 : 2 19 : 2 18 : 2 17 : 2 16 : 2 15 : 2 14 : 2 13 : 2 12 : 2 11 : 2 10 : 2 9 : 2 8 : 2 7 : 2 6 : 2 5 : 2 4 : 2 3 : 2 2 : 2 1 : 2
25 : 1 24 : 1 23 : 1 22 : 1 21 : 1 20 : 1 19 : 1 18 : 1 17 : 1 16 : 1 15 : 1 14 : 1 13 : 1 12 : 1 11 : 1 10 : 1 9 : 1 8 : 1 7 : 1 6 : 1 5 : 1 4 : 1 3 : 1 2 : 1 1 : 1

Konstruktion: mehrere Regler reihen mit abnehmender Höhe und (wie sonst auch) abnehmender Breite. Positionierung wie bisher absolut, top:0, left:0. Die Verwendung von padding statt width und height (die seltsamerweise in dem inline-Element A HREF auch funktionieren) sorgt hier dafür, dass gleichzeitig auch der im SPAN-Container definierte Wert immer an der rechten Ecke angezeigt wird. Der A-Tag selbst kann als inline-Element nach neuem Standard nicht mehr mit text-align:right formatiert werden.

CSS und HTML-Code
(ich habe möglichst wenig in den haed ausgelagert, damit der Code verständlicher ist

#matrix1 a {padding-right:10px; font-size:10pt}
#matrix1 a:hover {background-color:red}
#matrix1 a span {display:none}
#matrix1 a:hover span {display:inline}

<div id="matrix1" style="margin-left:40px; position:relative; border:1px solid gray; width:520px; height:520px">
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:500px' href='index.php?zahl=48'> 25 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:480px' href='index.php?zahl=48'> 24 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:460px' href='index.php?zahl=48'> 23 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:440px' href='index.php?zahl=48'> 22 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:420px' href='index.php?zahl=48'> 21 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:400px' href='index.php?zahl=48'> 20 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:380px' href='index.php?zahl=48'> 19 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:360px' href='index.php?zahl=48'> 18 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:340px' href='index.php?zahl=48'> 17 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:320px' href='index.php?zahl=48'> 16 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:300px' href='index.php?zahl=48'> 15 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:280px' href='index.php?zahl=48'> 14 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:260px' href='index.php?zahl=48'> 13 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:240px' href='index.php?zahl=48'> 12 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:220px' href='index.php?zahl=48'> 11 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:200px' href='index.php?zahl=48'> 10 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:180px' href='index.php?zahl=48'> 9 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:160px' href='index.php?zahl=48'> 8 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:140px' href='index.php?zahl=48'> 7 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:120px' href='index.php?zahl=48'> 6 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:100px' href='index.php?zahl=48'> 5 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:80px' href='index.php?zahl=48'> 4 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:60px' href='index.php?zahl=48'> 3 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:40px' href='index.php?zahl=48'> 2 : 25 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:500px; padding-right:20px' href='index.php?zahl=48'> 1 : 25 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:500px' href='index.php?zahl=48'> 25 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:480px' href='index.php?zahl=48'> 24 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:460px' href='index.php?zahl=48'> 23 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:440px' href='index.php?zahl=48'> 22 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:420px' href='index.php?zahl=48'> 21 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:400px' href='index.php?zahl=48'> 20 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:380px' href='index.php?zahl=48'> 19 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:360px' href='index.php?zahl=48'> 18 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:340px' href='index.php?zahl=48'> 17 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:320px' href='index.php?zahl=48'> 16 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:300px' href='index.php?zahl=48'> 15 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:280px' href='index.php?zahl=48'> 14 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:260px' href='index.php?zahl=48'> 13 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:240px' href='index.php?zahl=48'> 12 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:220px' href='index.php?zahl=48'> 11 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:200px' href='index.php?zahl=48'> 10 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:180px' href='index.php?zahl=48'> 9 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:160px' href='index.php?zahl=48'> 8 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:140px' href='index.php?zahl=48'> 7 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:120px' href='index.php?zahl=48'> 6 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:100px' href='index.php?zahl=48'> 5 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:80px' href='index.php?zahl=48'> 4 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:60px' href='index.php?zahl=48'> 3 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:40px' href='index.php?zahl=48'> 2 : 24 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:480px; padding-right:20px' href='index.php?zahl=48'> 1 : 24 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:500px' href='index.php?zahl=48'> 25 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:480px' href='index.php?zahl=48'> 24 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:460px' href='index.php?zahl=48'> 23 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:440px' href='index.php?zahl=48'> 22 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:420px' href='index.php?zahl=48'> 21 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:400px' href='index.php?zahl=48'> 20 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:380px' href='index.php?zahl=48'> 19 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:360px' href='index.php?zahl=48'> 18 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:340px' href='index.php?zahl=48'> 17 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:320px' href='index.php?zahl=48'> 16 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:300px' href='index.php?zahl=48'> 15 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:280px' href='index.php?zahl=48'> 14 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:260px' href='index.php?zahl=48'> 13 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:240px' href='index.php?zahl=48'> 12 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:220px' href='index.php?zahl=48'> 11 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:200px' href='index.php?zahl=48'> 10 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:180px' href='index.php?zahl=48'> 9 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:160px' href='index.php?zahl=48'> 8 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:140px' href='index.php?zahl=48'> 7 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:120px' href='index.php?zahl=48'> 6 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:100px' href='index.php?zahl=48'> 5 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:80px' href='index.php?zahl=48'> 4 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:60px' href='index.php?zahl=48'> 3 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:40px' href='index.php?zahl=48'> 2 : 23 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:460px; padding-right:20px' href='index.php?zahl=48'> 1 : 23 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:500px' href='index.php?zahl=48'> 25 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:480px' href='index.php?zahl=48'> 24 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:460px' href='index.php?zahl=48'> 23 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:440px' href='index.php?zahl=48'> 22 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:420px' href='index.php?zahl=48'> 21 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:400px' href='index.php?zahl=48'> 20 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:380px' href='index.php?zahl=48'> 19 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:360px' href='index.php?zahl=48'> 18 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:340px' href='index.php?zahl=48'> 17 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:320px' href='index.php?zahl=48'> 16 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:300px' href='index.php?zahl=48'> 15 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:280px' href='index.php?zahl=48'> 14 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:260px' href='index.php?zahl=48'> 13 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:240px' href='index.php?zahl=48'> 12 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:220px' href='index.php?zahl=48'> 11 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:200px' href='index.php?zahl=48'> 10 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:180px' href='index.php?zahl=48'> 9 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:160px' href='index.php?zahl=48'> 8 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:140px' href='index.php?zahl=48'> 7 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:120px' href='index.php?zahl=48'> 6 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:100px' href='index.php?zahl=48'> 5 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:80px' href='index.php?zahl=48'> 4 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:60px' href='index.php?zahl=48'> 3 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:40px' href='index.php?zahl=48'> 2 : 22 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:440px; padding-right:20px' href='index.php?zahl=48'> 1 : 22 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:500px' href='index.php?zahl=48'> 25 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:480px' href='index.php?zahl=48'> 24 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:460px' href='index.php?zahl=48'> 23 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:440px' href='index.php?zahl=48'> 22 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:420px' href='index.php?zahl=48'> 21 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:400px' href='index.php?zahl=48'> 20 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:380px' href='index.php?zahl=48'> 19 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:360px' href='index.php?zahl=48'> 18 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:340px' href='index.php?zahl=48'> 17 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:320px' href='index.php?zahl=48'> 16 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:300px' href='index.php?zahl=48'> 15 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:280px' href='index.php?zahl=48'> 14 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:260px' href='index.php?zahl=48'> 13 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:240px' href='index.php?zahl=48'> 12 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:220px' href='index.php?zahl=48'> 11 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:200px' href='index.php?zahl=48'> 10 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:180px' href='index.php?zahl=48'> 9 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:160px' href='index.php?zahl=48'> 8 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:140px' href='index.php?zahl=48'> 7 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:120px' href='index.php?zahl=48'> 6 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:100px' href='index.php?zahl=48'> 5 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:80px' href='index.php?zahl=48'> 4 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:60px' href='index.php?zahl=48'> 3 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:40px' href='index.php?zahl=48'> 2 : 21 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:420px; padding-right:20px' href='index.php?zahl=48'> 1 : 21 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:500px' href='index.php?zahl=48'> 25 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:480px' href='index.php?zahl=48'> 24 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:460px' href='index.php?zahl=48'> 23 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:440px' href='index.php?zahl=48'> 22 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:420px' href='index.php?zahl=48'> 21 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:400px' href='index.php?zahl=48'> 20 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:380px' href='index.php?zahl=48'> 19 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:360px' href='index.php?zahl=48'> 18 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:340px' href='index.php?zahl=48'> 17 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:320px' href='index.php?zahl=48'> 16 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:300px' href='index.php?zahl=48'> 15 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:280px' href='index.php?zahl=48'> 14 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:260px' href='index.php?zahl=48'> 13 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:240px' href='index.php?zahl=48'> 12 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:220px' href='index.php?zahl=48'> 11 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:200px' href='index.php?zahl=48'> 10 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:180px' href='index.php?zahl=48'> 9 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:160px' href='index.php?zahl=48'> 8 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:140px' href='index.php?zahl=48'> 7 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:120px' href='index.php?zahl=48'> 6 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:100px' href='index.php?zahl=48'> 5 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:80px' href='index.php?zahl=48'> 4 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:60px' href='index.php?zahl=48'> 3 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:40px' href='index.php?zahl=48'> 2 : 20 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:400px; padding-right:20px' href='index.php?zahl=48'> 1 : 20 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:500px' href='index.php?zahl=48'> 25 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:480px' href='index.php?zahl=48'> 24 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:460px' href='index.php?zahl=48'> 23 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:440px' href='index.php?zahl=48'> 22 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:420px' href='index.php?zahl=48'> 21 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:400px' href='index.php?zahl=48'> 20 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:380px' href='index.php?zahl=48'> 19 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:360px' href='index.php?zahl=48'> 18 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:340px' href='index.php?zahl=48'> 17 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:320px' href='index.php?zahl=48'> 16 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:300px' href='index.php?zahl=48'> 15 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:280px' href='index.php?zahl=48'> 14 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:260px' href='index.php?zahl=48'> 13 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:240px' href='index.php?zahl=48'> 12 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:220px' href='index.php?zahl=48'> 11 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:200px' href='index.php?zahl=48'> 10 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:180px' href='index.php?zahl=48'> 9 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:160px' href='index.php?zahl=48'> 8 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:140px' href='index.php?zahl=48'> 7 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:120px' href='index.php?zahl=48'> 6 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:100px' href='index.php?zahl=48'> 5 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:80px' href='index.php?zahl=48'> 4 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:60px' href='index.php?zahl=48'> 3 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:40px' href='index.php?zahl=48'> 2 : 19 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:380px; padding-right:20px' href='index.php?zahl=48'> 1 : 19 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:500px' href='index.php?zahl=48'> 25 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:480px' href='index.php?zahl=48'> 24 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:460px' href='index.php?zahl=48'> 23 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:440px' href='index.php?zahl=48'> 22 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:420px' href='index.php?zahl=48'> 21 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:400px' href='index.php?zahl=48'> 20 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:380px' href='index.php?zahl=48'> 19 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:360px' href='index.php?zahl=48'> 18 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:340px' href='index.php?zahl=48'> 17 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:320px' href='index.php?zahl=48'> 16 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:300px' href='index.php?zahl=48'> 15 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:280px' href='index.php?zahl=48'> 14 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:260px' href='index.php?zahl=48'> 13 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:240px' href='index.php?zahl=48'> 12 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:220px' href='index.php?zahl=48'> 11 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:200px' href='index.php?zahl=48'> 10 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:180px' href='index.php?zahl=48'> 9 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:160px' href='index.php?zahl=48'> 8 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:140px' href='index.php?zahl=48'> 7 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:120px' href='index.php?zahl=48'> 6 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:100px' href='index.php?zahl=48'> 5 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:80px' href='index.php?zahl=48'> 4 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:60px' href='index.php?zahl=48'> 3 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:40px' href='index.php?zahl=48'> 2 : 18 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:360px; padding-right:20px' href='index.php?zahl=48'> 1 : 18 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:500px' href='index.php?zahl=48'> 25 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:480px' href='index.php?zahl=48'> 24 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:460px' href='index.php?zahl=48'> 23 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:440px' href='index.php?zahl=48'> 22 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:420px' href='index.php?zahl=48'> 21 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:400px' href='index.php?zahl=48'> 20 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:380px' href='index.php?zahl=48'> 19 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:360px' href='index.php?zahl=48'> 18 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:340px' href='index.php?zahl=48'> 17 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:320px' href='index.php?zahl=48'> 16 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:300px' href='index.php?zahl=48'> 15 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:280px' href='index.php?zahl=48'> 14 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:260px' href='index.php?zahl=48'> 13 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:240px' href='index.php?zahl=48'> 12 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:220px' href='index.php?zahl=48'> 11 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:200px' href='index.php?zahl=48'> 10 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:180px' href='index.php?zahl=48'> 9 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:160px' href='index.php?zahl=48'> 8 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:140px' href='index.php?zahl=48'> 7 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:120px' href='index.php?zahl=48'> 6 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:100px' href='index.php?zahl=48'> 5 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:80px' href='index.php?zahl=48'> 4 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:60px' href='index.php?zahl=48'> 3 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:40px' href='index.php?zahl=48'> 2 : 17 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:340px; padding-right:20px' href='index.php?zahl=48'> 1 : 17 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:500px' href='index.php?zahl=48'> 25 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:480px' href='index.php?zahl=48'> 24 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:460px' href='index.php?zahl=48'> 23 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:440px' href='index.php?zahl=48'> 22 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:420px' href='index.php?zahl=48'> 21 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:400px' href='index.php?zahl=48'> 20 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:380px' href='index.php?zahl=48'> 19 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:360px' href='index.php?zahl=48'> 18 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:340px' href='index.php?zahl=48'> 17 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:320px' href='index.php?zahl=48'> 16 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:300px' href='index.php?zahl=48'> 15 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:280px' href='index.php?zahl=48'> 14 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:260px' href='index.php?zahl=48'> 13 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:240px' href='index.php?zahl=48'> 12 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:220px' href='index.php?zahl=48'> 11 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:200px' href='index.php?zahl=48'> 10 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:180px' href='index.php?zahl=48'> 9 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:160px' href='index.php?zahl=48'> 8 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:140px' href='index.php?zahl=48'> 7 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:120px' href='index.php?zahl=48'> 6 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:100px' href='index.php?zahl=48'> 5 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:80px' href='index.php?zahl=48'> 4 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:60px' href='index.php?zahl=48'> 3 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:40px' href='index.php?zahl=48'> 2 : 16 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:320px; padding-right:20px' href='index.php?zahl=48'> 1 : 16 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:500px' href='index.php?zahl=48'> 25 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:480px' href='index.php?zahl=48'> 24 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:460px' href='index.php?zahl=48'> 23 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:440px' href='index.php?zahl=48'> 22 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:420px' href='index.php?zahl=48'> 21 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:400px' href='index.php?zahl=48'> 20 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:380px' href='index.php?zahl=48'> 19 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:360px' href='index.php?zahl=48'> 18 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:340px' href='index.php?zahl=48'> 17 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:320px' href='index.php?zahl=48'> 16 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:300px' href='index.php?zahl=48'> 15 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:280px' href='index.php?zahl=48'> 14 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:260px' href='index.php?zahl=48'> 13 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:240px' href='index.php?zahl=48'> 12 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:220px' href='index.php?zahl=48'> 11 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:200px' href='index.php?zahl=48'> 10 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:180px' href='index.php?zahl=48'> 9 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:160px' href='index.php?zahl=48'> 8 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:140px' href='index.php?zahl=48'> 7 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:120px' href='index.php?zahl=48'> 6 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:100px' href='index.php?zahl=48'> 5 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:80px' href='index.php?zahl=48'> 4 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:60px' href='index.php?zahl=48'> 3 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:40px' href='index.php?zahl=48'> 2 : 15 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:300px; padding-right:20px' href='index.php?zahl=48'> 1 : 15 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:500px' href='index.php?zahl=48'> 25 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:480px' href='index.php?zahl=48'> 24 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:460px' href='index.php?zahl=48'> 23 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:440px' href='index.php?zahl=48'> 22 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:420px' href='index.php?zahl=48'> 21 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:400px' href='index.php?zahl=48'> 20 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:380px' href='index.php?zahl=48'> 19 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:360px' href='index.php?zahl=48'> 18 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:340px' href='index.php?zahl=48'> 17 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:320px' href='index.php?zahl=48'> 16 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:300px' href='index.php?zahl=48'> 15 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:280px' href='index.php?zahl=48'> 14 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:260px' href='index.php?zahl=48'> 13 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:240px' href='index.php?zahl=48'> 12 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:220px' href='index.php?zahl=48'> 11 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:200px' href='index.php?zahl=48'> 10 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:180px' href='index.php?zahl=48'> 9 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:160px' href='index.php?zahl=48'> 8 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:140px' href='index.php?zahl=48'> 7 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:120px' href='index.php?zahl=48'> 6 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:100px' href='index.php?zahl=48'> 5 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:80px' href='index.php?zahl=48'> 4 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:60px' href='index.php?zahl=48'> 3 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:40px' href='index.php?zahl=48'> 2 : 14 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:280px; padding-right:20px' href='index.php?zahl=48'> 1 : 14 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:500px' href='index.php?zahl=48'> 25 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:480px' href='index.php?zahl=48'> 24 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:460px' href='index.php?zahl=48'> 23 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:440px' href='index.php?zahl=48'> 22 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:420px' href='index.php?zahl=48'> 21 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:400px' href='index.php?zahl=48'> 20 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:380px' href='index.php?zahl=48'> 19 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:360px' href='index.php?zahl=48'> 18 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:340px' href='index.php?zahl=48'> 17 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:320px' href='index.php?zahl=48'> 16 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:300px' href='index.php?zahl=48'> 15 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:280px' href='index.php?zahl=48'> 14 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:260px' href='index.php?zahl=48'> 13 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:240px' href='index.php?zahl=48'> 12 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:220px' href='index.php?zahl=48'> 11 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:200px' href='index.php?zahl=48'> 10 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:180px' href='index.php?zahl=48'> 9 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:160px' href='index.php?zahl=48'> 8 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:140px' href='index.php?zahl=48'> 7 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:120px' href='index.php?zahl=48'> 6 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:100px' href='index.php?zahl=48'> 5 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:80px' href='index.php?zahl=48'> 4 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:60px' href='index.php?zahl=48'> 3 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:40px' href='index.php?zahl=48'> 2 : 13 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:260px; padding-right:20px' href='index.php?zahl=48'> 1 : 13 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:500px' href='index.php?zahl=48'> 25 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:480px' href='index.php?zahl=48'> 24 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:460px' href='index.php?zahl=48'> 23 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:440px' href='index.php?zahl=48'> 22 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:420px' href='index.php?zahl=48'> 21 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:400px' href='index.php?zahl=48'> 20 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:380px' href='index.php?zahl=48'> 19 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:360px' href='index.php?zahl=48'> 18 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:340px' href='index.php?zahl=48'> 17 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:320px' href='index.php?zahl=48'> 16 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:300px' href='index.php?zahl=48'> 15 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:280px' href='index.php?zahl=48'> 14 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:260px' href='index.php?zahl=48'> 13 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:240px' href='index.php?zahl=48'> 12 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:220px' href='index.php?zahl=48'> 11 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:200px' href='index.php?zahl=48'> 10 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:180px' href='index.php?zahl=48'> 9 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:160px' href='index.php?zahl=48'> 8 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:140px' href='index.php?zahl=48'> 7 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:120px' href='index.php?zahl=48'> 6 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:100px' href='index.php?zahl=48'> 5 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:80px' href='index.php?zahl=48'> 4 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:60px' href='index.php?zahl=48'> 3 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:40px' href='index.php?zahl=48'> 2 : 12 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:240px; padding-right:20px' href='index.php?zahl=48'> 1 : 12 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:500px' href='index.php?zahl=48'> 25 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:480px' href='index.php?zahl=48'> 24 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:460px' href='index.php?zahl=48'> 23 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:440px' href='index.php?zahl=48'> 22 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:420px' href='index.php?zahl=48'> 21 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:400px' href='index.php?zahl=48'> 20 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:380px' href='index.php?zahl=48'> 19 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:360px' href='index.php?zahl=48'> 18 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:340px' href='index.php?zahl=48'> 17 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:320px' href='index.php?zahl=48'> 16 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:300px' href='index.php?zahl=48'> 15 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:280px' href='index.php?zahl=48'> 14 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:260px' href='index.php?zahl=48'> 13 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:240px' href='index.php?zahl=48'> 12 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:220px' href='index.php?zahl=48'> 11 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:200px' href='index.php?zahl=48'> 10 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:180px' href='index.php?zahl=48'> 9 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:160px' href='index.php?zahl=48'> 8 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:140px' href='index.php?zahl=48'> 7 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:120px' href='index.php?zahl=48'> 6 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:100px' href='index.php?zahl=48'> 5 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:80px' href='index.php?zahl=48'> 4 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:60px' href='index.php?zahl=48'> 3 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:40px' href='index.php?zahl=48'> 2 : 11 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:220px; padding-right:20px' href='index.php?zahl=48'> 1 : 11 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:500px' href='index.php?zahl=48'> 25 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:480px' href='index.php?zahl=48'> 24 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:460px' href='index.php?zahl=48'> 23 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:440px' href='index.php?zahl=48'> 22 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:420px' href='index.php?zahl=48'> 21 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:400px' href='index.php?zahl=48'> 20 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:380px' href='index.php?zahl=48'> 19 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:360px' href='index.php?zahl=48'> 18 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:340px' href='index.php?zahl=48'> 17 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:320px' href='index.php?zahl=48'> 16 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:300px' href='index.php?zahl=48'> 15 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:280px' href='index.php?zahl=48'> 14 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:260px' href='index.php?zahl=48'> 13 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:240px' href='index.php?zahl=48'> 12 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:220px' href='index.php?zahl=48'> 11 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:200px' href='index.php?zahl=48'> 10 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:180px' href='index.php?zahl=48'> 9 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:160px' href='index.php?zahl=48'> 8 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:140px' href='index.php?zahl=48'> 7 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:120px' href='index.php?zahl=48'> 6 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:100px' href='index.php?zahl=48'> 5 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:80px' href='index.php?zahl=48'> 4 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:60px' href='index.php?zahl=48'> 3 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:40px' href='index.php?zahl=48'> 2 : 10 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:200px; padding-right:20px' href='index.php?zahl=48'> 1 : 10 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:500px' href='index.php?zahl=48'> 25 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:480px' href='index.php?zahl=48'> 24 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:460px' href='index.php?zahl=48'> 23 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:440px' href='index.php?zahl=48'> 22 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:420px' href='index.php?zahl=48'> 21 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:400px' href='index.php?zahl=48'> 20 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:380px' href='index.php?zahl=48'> 19 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:360px' href='index.php?zahl=48'> 18 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:340px' href='index.php?zahl=48'> 17 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:320px' href='index.php?zahl=48'> 16 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:300px' href='index.php?zahl=48'> 15 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:280px' href='index.php?zahl=48'> 14 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:260px' href='index.php?zahl=48'> 13 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:240px' href='index.php?zahl=48'> 12 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:220px' href='index.php?zahl=48'> 11 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:200px' href='index.php?zahl=48'> 10 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:180px' href='index.php?zahl=48'> 9 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:160px' href='index.php?zahl=48'> 8 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:140px' href='index.php?zahl=48'> 7 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:120px' href='index.php?zahl=48'> 6 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:100px' href='index.php?zahl=48'> 5 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:80px' href='index.php?zahl=48'> 4 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:60px' href='index.php?zahl=48'> 3 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:40px' href='index.php?zahl=48'> 2 : 9 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:180px; padding-right:20px' href='index.php?zahl=48'> 1 : 9 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:500px' href='index.php?zahl=48'> 25 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:480px' href='index.php?zahl=48'> 24 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:460px' href='index.php?zahl=48'> 23 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:440px' href='index.php?zahl=48'> 22 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:420px' href='index.php?zahl=48'> 21 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:400px' href='index.php?zahl=48'> 20 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:380px' href='index.php?zahl=48'> 19 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:360px' href='index.php?zahl=48'> 18 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:340px' href='index.php?zahl=48'> 17 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:320px' href='index.php?zahl=48'> 16 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:300px' href='index.php?zahl=48'> 15 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:280px' href='index.php?zahl=48'> 14 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:260px' href='index.php?zahl=48'> 13 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:240px' href='index.php?zahl=48'> 12 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:220px' href='index.php?zahl=48'> 11 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:200px' href='index.php?zahl=48'> 10 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:180px' href='index.php?zahl=48'> 9 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:160px' href='index.php?zahl=48'> 8 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:140px' href='index.php?zahl=48'> 7 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:120px' href='index.php?zahl=48'> 6 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:100px' href='index.php?zahl=48'> 5 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:80px' href='index.php?zahl=48'> 4 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:60px' href='index.php?zahl=48'> 3 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:40px' href='index.php?zahl=48'> 2 : 8 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:160px; padding-right:20px' href='index.php?zahl=48'> 1 : 8 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:500px' href='index.php?zahl=48'> 25 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:480px' href='index.php?zahl=48'> 24 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:460px' href='index.php?zahl=48'> 23 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:440px' href='index.php?zahl=48'> 22 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:420px' href='index.php?zahl=48'> 21 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:400px' href='index.php?zahl=48'> 20 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:380px' href='index.php?zahl=48'> 19 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:360px' href='index.php?zahl=48'> 18 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:340px' href='index.php?zahl=48'> 17 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:320px' href='index.php?zahl=48'> 16 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:300px' href='index.php?zahl=48'> 15 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:280px' href='index.php?zahl=48'> 14 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:260px' href='index.php?zahl=48'> 13 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:240px' href='index.php?zahl=48'> 12 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:220px' href='index.php?zahl=48'> 11 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:200px' href='index.php?zahl=48'> 10 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:180px' href='index.php?zahl=48'> 9 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:160px' href='index.php?zahl=48'> 8 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:140px' href='index.php?zahl=48'> 7 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:120px' href='index.php?zahl=48'> 6 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:100px' href='index.php?zahl=48'> 5 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:80px' href='index.php?zahl=48'> 4 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:60px' href='index.php?zahl=48'> 3 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:40px' href='index.php?zahl=48'> 2 : 7 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:140px; padding-right:20px' href='index.php?zahl=48'> 1 : 7 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:500px' href='index.php?zahl=48'> 25 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:480px' href='index.php?zahl=48'> 24 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:460px' href='index.php?zahl=48'> 23 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:440px' href='index.php?zahl=48'> 22 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:420px' href='index.php?zahl=48'> 21 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:400px' href='index.php?zahl=48'> 20 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:380px' href='index.php?zahl=48'> 19 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:360px' href='index.php?zahl=48'> 18 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:340px' href='index.php?zahl=48'> 17 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:320px' href='index.php?zahl=48'> 16 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:300px' href='index.php?zahl=48'> 15 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:280px' href='index.php?zahl=48'> 14 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:260px' href='index.php?zahl=48'> 13 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:240px' href='index.php?zahl=48'> 12 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:220px' href='index.php?zahl=48'> 11 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:200px' href='index.php?zahl=48'> 10 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:180px' href='index.php?zahl=48'> 9 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:160px' href='index.php?zahl=48'> 8 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:140px' href='index.php?zahl=48'> 7 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:120px' href='index.php?zahl=48'> 6 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:100px' href='index.php?zahl=48'> 5 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:80px' href='index.php?zahl=48'> 4 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:60px' href='index.php?zahl=48'> 3 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:40px' href='index.php?zahl=48'> 2 : 6 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:120px; padding-right:20px' href='index.php?zahl=48'> 1 : 6 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:500px' href='index.php?zahl=48'> 25 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:480px' href='index.php?zahl=48'> 24 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:460px' href='index.php?zahl=48'> 23 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:440px' href='index.php?zahl=48'> 22 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:420px' href='index.php?zahl=48'> 21 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:400px' href='index.php?zahl=48'> 20 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:380px' href='index.php?zahl=48'> 19 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:360px' href='index.php?zahl=48'> 18 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:340px' href='index.php?zahl=48'> 17 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:320px' href='index.php?zahl=48'> 16 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:300px' href='index.php?zahl=48'> 15 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:280px' href='index.php?zahl=48'> 14 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:260px' href='index.php?zahl=48'> 13 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:240px' href='index.php?zahl=48'> 12 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:220px' href='index.php?zahl=48'> 11 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:200px' href='index.php?zahl=48'> 10 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:180px' href='index.php?zahl=48'> 9 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:160px' href='index.php?zahl=48'> 8 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:140px' href='index.php?zahl=48'> 7 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:120px' href='index.php?zahl=48'> 6 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:100px' href='index.php?zahl=48'> 5 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:80px' href='index.php?zahl=48'> 4 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:60px' href='index.php?zahl=48'> 3 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:40px' href='index.php?zahl=48'> 2 : 5 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:100px; padding-right:20px' href='index.php?zahl=48'> 1 : 5 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:500px' href='index.php?zahl=48'> 25 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:480px' href='index.php?zahl=48'> 24 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:460px' href='index.php?zahl=48'> 23 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:440px' href='index.php?zahl=48'> 22 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:420px' href='index.php?zahl=48'> 21 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:400px' href='index.php?zahl=48'> 20 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:380px' href='index.php?zahl=48'> 19 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:360px' href='index.php?zahl=48'> 18 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:340px' href='index.php?zahl=48'> 17 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:320px' href='index.php?zahl=48'> 16 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:300px' href='index.php?zahl=48'> 15 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:280px' href='index.php?zahl=48'> 14 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:260px' href='index.php?zahl=48'> 13 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:240px' href='index.php?zahl=48'> 12 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:220px' href='index.php?zahl=48'> 11 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:200px' href='index.php?zahl=48'> 10 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:180px' href='index.php?zahl=48'> 9 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:160px' href='index.php?zahl=48'> 8 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:140px' href='index.php?zahl=48'> 7 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:120px' href='index.php?zahl=48'> 6 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:100px' href='index.php?zahl=48'> 5 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:80px' href='index.php?zahl=48'> 4 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:60px' href='index.php?zahl=48'> 3 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:40px' href='index.php?zahl=48'> 2 : 4 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:80px; padding-right:20px' href='index.php?zahl=48'> 1 : 4 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:500px' href='index.php?zahl=48'> 25 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:480px' href='index.php?zahl=48'> 24 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:460px' href='index.php?zahl=48'> 23 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:440px' href='index.php?zahl=48'> 22 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:420px' href='index.php?zahl=48'> 21 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:400px' href='index.php?zahl=48'> 20 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:380px' href='index.php?zahl=48'> 19 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:360px' href='index.php?zahl=48'> 18 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:340px' href='index.php?zahl=48'> 17 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:320px' href='index.php?zahl=48'> 16 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:300px' href='index.php?zahl=48'> 15 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:280px' href='index.php?zahl=48'> 14 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:260px' href='index.php?zahl=48'> 13 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:240px' href='index.php?zahl=48'> 12 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:220px' href='index.php?zahl=48'> 11 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:200px' href='index.php?zahl=48'> 10 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:180px' href='index.php?zahl=48'> 9 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:160px' href='index.php?zahl=48'> 8 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:140px' href='index.php?zahl=48'> 7 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:120px' href='index.php?zahl=48'> 6 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:100px' href='index.php?zahl=48'> 5 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:80px' href='index.php?zahl=48'> 4 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:60px' href='index.php?zahl=48'> 3 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:40px' href='index.php?zahl=48'> 2 : 3 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:60px; padding-right:20px' href='index.php?zahl=48'> 1 : 3 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:500px' href='index.php?zahl=48'> 25 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:480px' href='index.php?zahl=48'> 24 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:460px' href='index.php?zahl=48'> 23 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:440px' href='index.php?zahl=48'> 22 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:420px' href='index.php?zahl=48'> 21 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:400px' href='index.php?zahl=48'> 20 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:380px' href='index.php?zahl=48'> 19 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:360px' href='index.php?zahl=48'> 18 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:340px' href='index.php?zahl=48'> 17 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:320px' href='index.php?zahl=48'> 16 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:300px' href='index.php?zahl=48'> 15 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:280px' href='index.php?zahl=48'> 14 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:260px' href='index.php?zahl=48'> 13 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:240px' href='index.php?zahl=48'> 12 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:220px' href='index.php?zahl=48'> 11 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:200px' href='index.php?zahl=48'> 10 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:180px' href='index.php?zahl=48'> 9 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:160px' href='index.php?zahl=48'> 8 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:140px' href='index.php?zahl=48'> 7 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:120px' href='index.php?zahl=48'> 6 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:100px' href='index.php?zahl=48'> 5 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:80px' href='index.php?zahl=48'> 4 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:60px' href='index.php?zahl=48'> 3 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:40px' href='index.php?zahl=48'> 2 : 2 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:40px; padding-right:20px' href='index.php?zahl=48'> 1 : 2 </a>

<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:500px' href='index.php?zahl=48'> 25 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:480px' href='index.php?zahl=48'> 24 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:460px' href='index.php?zahl=48'> 23 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:440px' href='index.php?zahl=48'> 22 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:420px' href='index.php?zahl=48'> 21 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:400px' href='index.php?zahl=48'> 20 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:380px' href='index.php?zahl=48'> 19 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:360px' href='index.php?zahl=48'> 18 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:340px' href='index.php?zahl=48'> 17 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:320px' href='index.php?zahl=48'> 16 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:300px' href='index.php?zahl=48'> 15 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:280px' href='index.php?zahl=48'> 14 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:260px' href='index.php?zahl=48'> 13 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:240px' href='index.php?zahl=48'> 12 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:220px' href='index.php?zahl=48'> 11 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:200px' href='index.php?zahl=48'> 10 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:180px' href='index.php?zahl=48'> 9 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:160px' href='index.php?zahl=48'> 8 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:140px' href='index.php?zahl=48'> 7 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:120px' href='index.php?zahl=48'> 6 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:100px' href='index.php?zahl=48'> 5 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:80px' href='index.php?zahl=48'> 4 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:60px' href='index.php?zahl=48'> 3 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:40px' href='index.php?zahl=48'> 2 : 1 </a>
<a style='position:absolute; top:0; left:0 ; font-weight:bold; padding-bottom:20px; padding-right:20px' href='index.php?zahl=48'> 1 : 1 </a>

</div>

Matrix 2 - zweites Experiment

. Ziel: Füllbalken soll sich von links unten aus aufbauen. Mit der Maus über die Fläche fahren!

500 : 500 480 : 500 460 : 500 440 : 500 420 : 500 400 : 500 380 : 500 360 : 500 340 : 500 320 : 500 300 : 500 280 : 500 260 : 500 240 : 500 220 : 500 200 : 500 180 : 500 160 : 500 140 : 500 120 : 500 100 : 500 80 : 500 60 : 500 40 : 500 20 : 500 0 : 500 500 : 480 480 : 480 460 : 480 440 : 480 420 : 480 400 : 480 380 : 480 360 : 480 340 : 480 320 : 480 300 : 480 280 : 480 260 : 480 240 : 480 220 : 480 200 : 480 180 : 480 160 : 480 140 : 480 120 : 480 100 : 480 80 : 480 60 : 480 40 : 480 20 : 480 0 : 480 500 : 460 480 : 460 460 : 460 440 : 460 420 : 460 400 : 460 380 : 460 360 : 460 340 : 460 320 : 460 300 : 460 280 : 460 260 : 460 240 : 460 220 : 460 200 : 460 180 : 460 160 : 460 140 : 460 120 : 460 100 : 460 80 : 460 60 : 460 40 : 460 20 : 460 0 : 460 500 : 440 480 : 440 460 : 440 440 : 440 420 : 440 400 : 440 380 : 440 360 : 440 340 : 440 320 : 440 300 : 440 280 : 440 260 : 440 240 : 440 220 : 440 200 : 440 180 : 440 160 : 440 140 : 440 120 : 440 100 : 440 80 : 440 60 : 440 40 : 440 20 : 440 0 : 440 500 : 420 480 : 420 460 : 420 440 : 420 420 : 420 400 : 420 380 : 420 360 : 420 340 : 420 320 : 420 300 : 420 280 : 420 260 : 420 240 : 420 220 : 420 200 : 420 180 : 420 160 : 420 140 : 420 120 : 420 100 : 420 80 : 420 60 : 420 40 : 420 20 : 420 0 : 420 500 : 400 480 : 400 460 : 400 440 : 400 420 : 400 400 : 400 380 : 400 360 : 400 340 : 400 320 : 400 300 : 400 280 : 400 260 : 400 240 : 400 220 : 400 200 : 400 180 : 400 160 : 400 140 : 400 120 : 400 100 : 400 80 : 400 60 : 400 40 : 400 20 : 400 0 : 400 500 : 380 480 : 380 460 : 380 440 : 380 420 : 380 400 : 380 380 : 380 360 : 380 340 : 380 320 : 380 300 : 380 280 : 380 260 : 380 240 : 380 220 : 380 200 : 380 180 : 380 160 : 380 140 : 380 120 : 380 100 : 380 80 : 380 60 : 380 40 : 380 20 : 380 0 : 380 500 : 360 480 : 360 460 : 360 440 : 360 420 : 360 400 : 360 380 : 360 360 : 360 340 : 360 320 : 360 300 : 360 280 : 360 260 : 360 240 : 360 220 : 360 200 : 360 180 : 360 160 : 360 140 : 360 120 : 360 100 : 360 80 : 360 60 : 360 40 : 360 20 : 360 0 : 360 500 : 340 480 : 340 460 : 340 440 : 340 420 : 340 400 : 340 380 : 340 360 : 340 340 : 340 320 : 340 300 : 340 280 : 340 260 : 340 240 : 340 220 : 340 200 : 340 180 : 340 160 : 340 140 : 340 120 : 340 100 : 340 80 : 340 60 : 340 40 : 340 20 : 340 0 : 340 500 : 320 480 : 320 460 : 320 440 : 320 420 : 320 400 : 320 380 : 320 360 : 320 340 : 320 320 : 320 300 : 320 280 : 320 260 : 320 240 : 320 220 : 320 200 : 320 180 : 320 160 : 320 140 : 320 120 : 320 100 : 320 80 : 320 60 : 320 40 : 320 20 : 320 0 : 320 500 : 300 480 : 300 460 : 300 440 : 300 420 : 300 400 : 300 380 : 300 360 : 300 340 : 300 320 : 300 300 : 300 280 : 300 260 : 300 240 : 300 220 : 300 200 : 300 180 : 300 160 : 300 140 : 300 120 : 300 100 : 300 80 : 300 60 : 300 40 : 300 20 : 300 0 : 300 500 : 280 480 : 280 460 : 280 440 : 280 420 : 280 400 : 280 380 : 280 360 : 280 340 : 280 320 : 280 300 : 280 280 : 280 260 : 280 240 : 280 220 : 280 200 : 280 180 : 280 160 : 280 140 : 280 120 : 280 100 : 280 80 : 280 60 : 280 40 : 280 20 : 280 0 : 280 500 : 260 480 : 260 460 : 260 440 : 260 420 : 260 400 : 260 380 : 260 360 : 260 340 : 260 320 : 260 300 : 260 280 : 260 260 : 260 240 : 260 220 : 260 200 : 260 180 : 260 160 : 260 140 : 260 120 : 260 100 : 260 80 : 260 60 : 260 40 : 260 20 : 260 0 : 260 500 : 240 480 : 240 460 : 240 440 : 240 420 : 240 400 : 240 380 : 240 360 : 240 340 : 240 320 : 240 300 : 240 280 : 240 260 : 240 240 : 240 220 : 240 200 : 240 180 : 240 160 : 240 140 : 240 120 : 240 100 : 240 80 : 240 60 : 240 40 : 240 20 : 240 0 : 240 500 : 220 480 : 220 460 : 220 440 : 220 420 : 220 400 : 220 380 : 220 360 : 220 340 : 220 320 : 220 300 : 220 280 : 220 260 : 220 240 : 220 220 : 220 200 : 220 180 : 220 160 : 220 140 : 220 120 : 220 100 : 220 80 : 220 60 : 220 40 : 220 20 : 220 0 : 220 500 : 200 480 : 200 460 : 200 440 : 200 420 : 200 400 : 200 380 : 200 360 : 200 340 : 200 320 : 200 300 : 200 280 : 200 260 : 200 240 : 200 220 : 200 200 : 200 180 : 200 160 : 200 140 : 200 120 : 200 100 : 200 80 : 200 60 : 200 40 : 200 20 : 200 0 : 200 500 : 180 480 : 180 460 : 180 440 : 180 420 : 180 400 : 180 380 : 180 360 : 180 340 : 180 320 : 180 300 : 180 280 : 180 260 : 180 240 : 180 220 : 180 200 : 180 180 : 180 160 : 180 140 : 180 120 : 180 100 : 180 80 : 180 60 : 180 40 : 180 20 : 180 0 : 180 500 : 160 480 : 160 460 : 160 440 : 160 420 : 160 400 : 160 380 : 160 360 : 160 340 : 160 320 : 160 300 : 160 280 : 160 260 : 160 240 : 160 220 : 160 200 : 160 180 : 160 160 : 160 140 : 160 120 : 160 100 : 160 80 : 160 60 : 160 40 : 160 20 : 160 0 : 160 500 : 140 480 : 140 460 : 140 440 : 140 420 : 140 400 : 140 380 : 140 360 : 140 340 : 140 320 : 140 300 : 140 280 : 140 260 : 140 240 : 140 220 : 140 200 : 140 180 : 140 160 : 140 140 : 140 120 : 140 100 : 140 80 : 140 60 : 140 40 : 140 20 : 140 0 : 140 500 : 120 480 : 120 460 : 120 440 : 120 420 : 120 400 : 120 380 : 120 360 : 120 340 : 120 320 : 120 300 : 120 280 : 120 260 : 120 240 : 120 220 : 120 200 : 120 180 : 120 160 : 120 140 : 120 120 : 120 100 : 120 80 : 120 60 : 120 40 : 120 20 : 120 0 : 120 500 : 100 480 : 100 460 : 100 440 : 100 420 : 100 400 : 100 380 : 100 360 : 100 340 : 100 320 : 100 300 : 100 280 : 100 260 : 100 240 : 100 220 : 100 200 : 100 180 : 100 160 : 100 140 : 100 120 : 100 100 : 100 80 : 100 60 : 100 40 : 100 20 : 100 0 : 100 500 : 80 480 : 80 460 : 80 440 : 80 420 : 80 400 : 80 380 : 80 360 : 80 340 : 80 320 : 80 300 : 80 280 : 80 260 : 80 240 : 80 220 : 80 200 : 80 180 : 80 160 : 80 140 : 80 120 : 80 100 : 80 80 : 80 60 : 80 40 : 80 20 : 80 0 : 80 500 : 60 480 : 60 460 : 60 440 : 60 420 : 60 400 : 60 380 : 60 360 : 60 340 : 60 320 : 60 300 : 60 280 : 60 260 : 60 240 : 60 220 : 60 200 : 60 180 : 60 160 : 60 140 : 60 120 : 60 100 : 60 80 : 60 60 : 60 40 : 60 20 : 60 0 : 60 500 : 40 480 : 40 460 : 40 440 : 40 420 : 40 400 : 40 380 : 40 360 : 40 340 : 40 320 : 40 300 : 40 280 : 40 260 : 40 240 : 40 220 : 40 200 : 40 180 : 40 160 : 40 140 : 40 120 : 40 100 : 40 80 : 40 60 : 40 40 : 40 20 : 40 0 : 40 500 : 20 480 : 20 460 : 20 440 : 20 420 : 20 400 : 20 380 : 20 360 : 20 340 : 20 320 : 20 300 : 20 280 : 20 260 : 20 240 : 20 220 : 20 200 : 20 180 : 20 160 : 20 140 : 20 120 : 20 100 : 20 80 : 20 60 : 20 40 : 20 20 : 20 0 : 20

Konstruktion: Höhe nimmt ab, gleichzeitig nimmt aber Top-Wert für Positionierung von 0 ausgehend zu bis Höhe erreicht wird.

Also: 1. Zeile = Reihe wie bei normalen Regler, nur jeweils mit Höhe 500, so dass der Regler (bzw. die einzelnen Element) 500 px hoch ist. Also Pos. top:0,left:0, height:500, left stufenweise

2. Zeile = Reihe wie bei normalen Regler, nur jeweils mit Höhe 480, und top-Wert 20, also eine schmälere Leiste, die wegen des veränderten Top-Werts etwas weiter unten anfängt und das Ganze den selben Effekt hat, als wenn die zweite Reglerleiste von links unten aus programmiert wird und sich von unten aus 450 px nach oben erstreckt. Somit lugt die erste Reglerreihe oben 20px über die 2. Reglerleiste hinaus.

3. Zeile: Höhe auf 400px reduziert, Top-Wert jetzt 40, somit erstreckt sich die Top-Zeile (scheinbar) von links unten aus 400 px nach oben und überdeckt nur die ersten 400px die anderen Leisten. Oben lugen jezt die ersten zwei Reglerleisten heraus.

Problem war die rechnerische Umsetzung, sofern man mit php-Routinen arbeitet. Nach vielen Try and errors fand ich den Lösungsansatz: zwei Schleifen, dier erste regelt die Höhe, die zweite die Horizonatel. Innerhalb einer Höhenstufe gilt: Der height-Wert nimmt von 500 aus ab, der Top-Wert nimmt von 0 aus zu. Aufpassen muss man bei der Festlegung des Endpunktes der Schleife. Und wenn man mit Padding sttt mit height und width arbeitet, dann muss man die Ausgangs und Endzahlen um eine Stufe anpassen.

php-Code (die Matrix lässt sich natürlich auch ohne php realisieren - wer Zeit hat, warum nicht?)



echo "<div id="matrix21" style="margin-left:40px; position:relative; border:1px solid gray;  width:500px; height:500px">
<!-- Außrenrahmen für Ausgangspunkt der Positionierungen-->
$top=0;
for($hoehe=500; $hoehe>=0; $hoehe=$hoehe-20) {
 for($breite=500; $breite>=20; $breite=$breite-20) {
echo "<a style='position:absolute; left:0; top:$top"."px;  padding-top:$hoehe"."px; padding-left:$breite"."px' href='index.php?zahl=$zahl'><span> $breite : $hoehe </span></a> ";
  $top=$top+20;
 }
 echo "<br>" ;
}
echo "</div>";

Drittes Experiment

Preis in Euro

Menge in TSD

Anwendungsbeispiel Lernzilla - die PHP-Lernkartei

First experiments with my old php-learning-tool "lernzilla". Screenshot mit Link zu einer gesonderten Seite

Experiment: Slider á la "Winamp-ZDL-Skin"

In meinem Tick, Grafikelemente zu vermeiden und durch CSS-Experimente zu ersetzen, hatte ich schon vorher versucht, die WINAMP-Skins mit CSS nachzuahmen. Gelegenheit bot sich, nachdem ich für meine Lernkartei, die ich für meine Schüler entwickelt hatte, aus Jux ein paar winamp-ähnliche Skins schuf. Dabei kommen auch Regler für diverse Elemente vor. Wie ich schon oben gezeigt habe, kann man einige Regler mit dem CSS-Slider ersetzen.
Das meines Erachtens schönste Winamp-Skin ist das Skin von ZDL. Dort kommen Grafikelemente beim Regler vor, die beim ersten Hinsehen nicht durch reine CSS-Technik ersetzbar sind.

Wie weit kann man mit CSS gehen? Kann man auch komplexe Grafiken nur durch CSS ersetzen und die HTML-Seite unabhängig machen?

Dazu folgendes Experiment.

Screenshot des Original-Winamp-Skins von ZDL: Winamp-ZDL-Skin

Hier der Entwurf einer CSS-Imitation der Grafik (hier nur statisch und stark vergrößert)

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Quelltext des Reglerknopfes:



<span class='innen' style='width:20px; height:10px; background-color:red; border-left:40px solid #00FF00; border-right:40px solid #00FF00; text-align:center'><br>

  <span style='14px; height:100%; background-color:red; border-left:3px solid black; border-right:3px solid black '>
  </span><br>

</span>

  <span class='innen' style='width:10px; height:4px; background-color:red; border-left:45px solid black; border-right:45px solid black; margin-top:5px '>
  </span>

  <span class='innen' style='width:100px; height:4px;  background-color:red; '>
  </span>

  <span class='innen' style='width:90px; height:4px;  border-left:5px solid red; border-right:5px solid red; background-color:black; margin-bottom:5px; '>
  </span>

  <span class='innen' style='width:100px; height:10px; background-color:#FFbF00; '>
  </span>

  <span class='innen' style='width:30px; height:5px; background-color:#00BF00; border-left:35px solid #007F00; border-right:35px solid #007f00'>
  </span>

  <div class='innen' style='width:100px; height:10px; background-color:#FFBF00; '>
  </div>

Slider-Experiment mit ZDL

Hier der aktuelle Entwurf einer Umsetzung der Pseudo-Grafik in einen CSS-Slider. Große Enttäuschung: es funktionierte zunächst nur im IE 6, nicht aber in Firefox. Dort bleibt das Element, das eigentlich am rechten Rand des Verweises (A HREF) kleben sollte (A ist mit text-align:right formatiert) am linken Rand kleben. Grund: ein A-Element ist kein Blockelement, eine (sich erweiternde) Width-Angabe und eine rechtsbündige Ausrichtung ist nicht möglich. Außer natürlich beim IE, der immer nur das macht, was ER will.
Ich habe dann statt mit der Breite mit einem Padding-Left gearbeitet. Nun geht es auch im Firefox. Allerdings funktioniert die Bewegung nach rechts nur in großen Sprüngen, nach links dagegen flüssig. Das liegt wahrscheinlich an den derzeitigen Internetverbindungen (2004/2005). .

Mit der Maus drüberfahren:

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

<a style='width:500"."px' href='index.php?zdl_zahl=25'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:480"."px' href='index.php?zdl_zahl=24'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:460"."px' href='index.php?zdl_zahl=23'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:440"."px' href='index.php?zdl_zahl=22'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:420"."px' href='index.php?zdl_zahl=21'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:400"."px' href='index.php?zdl_zahl=20'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:380"."px' href='index.php?zdl_zahl=19'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:360"."px' href='index.php?zdl_zahl=18'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:340"."px' href='index.php?zdl_zahl=17'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:320"."px' href='index.php?zdl_zahl=16'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:300"."px' href='index.php?zdl_zahl=15'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:280"."px' href='index.php?zdl_zahl=14'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:260"."px' href='index.php?zdl_zahl=13'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:240"."px' href='index.php?zdl_zahl=12'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:220"."px' href='index.php?zdl_zahl=11'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:200"."px' href='index.php?zdl_zahl=10'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:180"."px' href='index.php?zdl_zahl=9'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:160"."px' href='index.php?zdl_zahl=8'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:140"."px' href='index.php?zdl_zahl=7'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:120"."px' href='index.php?zdl_zahl=6'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:100"."px' href='index.php?zdl_zahl=5'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:80"."px' href='index.php?zdl_zahl=4'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:60"."px' href='index.php?zdl_zahl=3'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:40"."px' href='index.php?zdl_zahl=2'>Hier Button (Grafik oder obige CSS-Definition) </a>
<a style='width:20"."px' href='index.php?zdl_zahl=1'>Hier Button (Grafik oder obige CSS-Definition) </a>

Impressum: Peter Burkes 93055 Regensburg Blumenstraße 6, kontakt@burkes.de