Grafiken kreisförmig positionieren

Status
Nicht offen für weitere Antworten.
A

Alexander Klein

Grünschnabel
Hallo.

Ich bin grad dabei, eine HTML-Seite zu erstellen, in der x Grafiken im Kreis angeordnet sein sollen.

Ich habe schon stundenlang rumgerechnet, eventuell den einen oder anderen (un)brauchbaren Algorithmus entwickelt, komme aber irgendwie nicht weiter.

Das, was klappt, ist die rautenförmige Anordnung, doch allein diese Form der Darstellung (genaue Positionierung in CSS) ist sehr mühsam.

Zur veranschaulichung meines Problems habe ich aus aktuellem Anlass die 25 EU-Staaten als Flaggen auf einer HTML-Seite dargestellt (aus Platzgründen folgt hier nur ein Auschnitt der Seite).

Also, wie könnte ein Ansatz aussehen, mit dem man nur per CSS x Grafiken kreisförmig (z. B. wie die Sterne der EU-Flagge) darstellen kann?

Vielen Dank für eure Hilfe!

Ach ja:
Der dazugehörige Quellcode:

Code: 
<html>
<head>
<title>TEST</title>
</head>
<body bgcolor="#000099">

<h2 align="center" style="color:'#FFCC00'; font-family:'Arial Black';  filter:Shadow(color=#FFD700, direction:90);">Die Mitglieder der <big>Europäischen Union</big> ab 01.05.2004</h2>
<table>
<tr>
<td style="position: absolute; top: 16.67%; left: 50%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\belgien.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 23.34%; left: 56.67%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\daenemark.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 23.34%; left: 43.33%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\slowenien.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 30.01%; left: 63.34%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\deutschland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 30.01%; left: 36.66%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\slowakei.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
</tr>

<tr>
<td style="position: absolute; top: 36.68%; left: 70.01%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\estland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 36.68%; left: 29.99%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\schweden.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 43.35%; left: 76.68%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\finnland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 43.35%; left: 23.32%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\portugal.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 50%; left: 16.67%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\polen.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
</tr>

<tr>
<td style="position: absolute; top: 50%; left: 83.33%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\frankreich.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 56.67%; left: 23.34%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\oesterreich.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 56.67%; left: 76.66%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\griechenland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 63.34%; left: 30.01%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\niederlande.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 63.34%; left: 69.99%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\irland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
</tr>

<tr>
<td style="position: absolute; top: 70.01%; left: 36.68%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\malta.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 70.01%; left: 63.32%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\italien.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 76.68%; left: 43.35%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\luxemburg.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 76.68%; left: 56.65%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\lettland.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 36.68%; left: 50%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\spanien.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
</tr>

<tr>
<td style="position: absolute; top: 50%; left: 36.66%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\vereinigteskoenigreich.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 50%; left: 63.34%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\tschechien.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 63.34%; left: 50%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\ungarn.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 83.33%; left: 50%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\litauen.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
<td style="position: absolute; top: 50%; left: 50%;"><div align="center"><img height="50" src="C:\WINDOWS\Desktop\flaggen\zypern.png" style="filter:Alpha(opacity=100, finishopacity=0, style=2);" width="50"></div></td>
</tr>
</table>
</body>
</html>
 

Anhänge

  • eustaaten.jpg
    eustaaten.jpg
    6,6 KB · Aufrufe: 177
Zuletzt bearbeitet:
DANKE!

Danke danke danke für deine Hilfe!

Hatte auch schon so nen Ansatz mit JavaScript, aber so was wird einem ja nicht in nem Einsteigerkurs vermittelt...
Alexander
 
EU Flagge mit allen Mitgliedern

Hallo Alexander

Ich bin mich am blöd suchen im Internet nach einer Flagge mit allen EU Mitgliedern der EU, bis ich auf dein Frage im Forum gestossen bin.

Könntest Du mir bitte zumailen, wäre Dir sehr sehr dankbar. Ich weiss es war eine Menge Arbeit, aber ich könnte es zurzeit nicht selber machen.

Vielen Dank

Dave
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück