• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"spezielle" Anordnung von Grafiken

gaga11

gaga11

Neues Mitglied
Hallo,
nach einigen stunden der verzweiflung habe ich (ein absoluter neuling auf dem gebiet) meine idee noch nicht umsetzen können. ich will eine startseite erstellen die im grundlegenden aus 3 grafiken besteht und sich je nach bildschirmauflösung anpasst. ich habe das mal hier in paint skizziert:

layout.jpg



  • das rote dreieck stets links unten in der ecke (ein scrollen soll nicht möglich sein)
  • das gelbe dreieck immer in der rechten oberen ecke
  • der blaue kreis soll immer in der mitte sein und wenn der benutzer eine zu niedrige auflösung hat sich evtl mit den dreiecken überschneiden, außerdem soll der kreis ein link sein
ich wäre euch super dankbar, wenn ihr mein leid beenden könntet ;)

gute nacht ><
 
Was meinst du mit anpassen je nach Auflösung? Meinst du damit die wirkliche Größe, also Auflösung der Grafiken?
Ich hoffe das meinst du nicht, das ist mit HTML und CSS allein auch nicht zu bewerkstelligen, da bräuchtest du zumindest JavaScript zusätzlich für.

Wenn die Grafiken in der Auflösung gleich bleiben hast du es deutlich einfacher:
Absolute Positionierung (möglicherweise auch fixed) von rot und gelb, rot mit bottom und left 0, gelb mit top und right 0, blau mit margin:auto ohne absolute positionierung. z-index für blau am höchsten, rot und gelb niedrieger mit einer Stufe Unterschied.

gn8

edit: meine Alternative war für die Prüfung morgen früh zu lernen, also hab ich mich mal eben dran probiert.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>www.clegue.com clemens guenthermann portfolio</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<img src="rot.gif" style="position:absolute; z-index:-1; bottom:0px; left:0px;" alt="" />
<img src="gelb.gif" style="position:absolute; z-index:-2; top:0px; right:0px;" alt="" />
<div style="position:absolute; left:50%; top:50%; width:210px; height:210px; margin: -105px 0 0 -105px;">
   <img src="blau.gif" alt="" />
</div>
</body>
</html>
Das Problem ist die verikale Zentrierung.. da muss man tricksen, da es dafür keine CSS Eigenschaft gibt. Wie das geht ist hier wunderbar erklärt, hatte ich selbst vorher auch noch nichts mit zu tun: Cascading Style Sheets { Tutorials : Zentrieren eines Block-Level-Elements }

Dem div Layer der den Kreis umschließt gibst du die Breite und Höhe des Bild, den beiden negativen Marginwerten gibst du genau die hälfte davon, das erste ist ist die halbe Höhe, der letzte wert die halbe Breite - war bei mir halt quadratisch.

Falls du dir das Beispiel angucken willst kannst du hier auch noch die zugehörigen Bilder haben. http://www.materialordner.de/zvHwYfxvJTa7DWXIepKDAhhKIsjqgHTF.html
 
Zuletzt bearbeitet:
super genial, vieeeeeelen dank!!

und ich hoffe die prüfung lief gut, bei mir gehts auch bald damit los ;)

schönes WE noch
 
Dieser Inhalt wurde entfernt.
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben