HTML - Wie lege ich verschiedene Bilder ebenen an?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
derwendtde
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
30.04.2011, 15:42

Wenn ich Deine Frage richtig kapier, dann hat ~body> also schon ein background-color{} oder background-image{}.

Dein hautpsächliches HTML müsste dann in einer Art ~div#container stehen.

Die Ebenen von unten nach oben wären demnach:

  1. body
  2. #container
  3. …alles weitere

Willst Du dann visuell eine Zwischeneben "1.b" haben, in der das kleine Bild liegt? Eine Lösung könnte so aussehen (CSS):

div#container{position:relative;}/*brauchst Du, weil das nächste absolut positioniert wird*/

div#container:before {content:~a target="_blank" href="link…"~² ~img src="…" width="50px" height="50px" ~² ~/a~² ; /* credits an xxxcyberxxx */

display:block;

height:50px;

width:50px;

position:absolute; /* freie Positionierung bezogen auf #container */

left:-50px;

top:0;}

Probier mal aus, alles in der "content:"-Zeile in 'Hochkommata' oder in (Klammern) zu setzen, falls es nicht auf Anhieb klappt.

Der Pfad zur Bildquelle muss relativ zur CSS-Datei angegeben werden, nicht zum HTML-Dokument.
derwendtde  16.07.2011, 19:33

Freut mich, wenn ich helfen konnte, und Danke für's Bewerten :0)

0
kuechentiger
30.04.2011, 15:39

Verschiedene Ebenen macht man mit css. Und zwar mit position und z-index.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

Damit stellst du das kleine Bild an die gewünschte Stelle, machst einen Link auf das Bild mit dem Attribut target="_blank".
Dann öffnet sich ein neuer Tab, wenn man draufklickt, aber nur, wenn der User seinen Browser auch so eingestellt hat. Ansonsten gibt es ein neues Fenster.
xxxcyberxxx
30.04.2011, 13:28

mach das doch so: ~a href="link zur website"~²~img src="link des bildes"~²~/a~²

 

und danneinach ~ durch die spitze kalmmer AUF und ~² durch die spitze klammer ZU ersetzen
derwendtde  30.04.2011, 15:18

Das mit dem neue Tab klappt aber nur, wenn im a-Element noch das Attribut target="_blank" dazukommt (mit Unterstrich, ist diesmal kein Platzhalter).

0