Design-Objekte per HTML positionieren?

**Xaar**

Hallöchen!

Folgendes Problem: Ich will für eine kleine "Notvisualisierung" mit auf einer Webseite ein paar Tasten (mit Beschriftung, keine Grafik weiter) vor einer PNG-Grafik positionieren lassen und bei Druck auf diese Taste dann einfach in einem neuen Tab/Fenster 'ne bestimmte Adresse aufrufen. Im Prinzip also nix wirklich komplexes.

Ich will also aus dem hier:

Das hier machen:

Die beiden Tasten sollen entsprechend positioniert (Koordinatenangabe?) werden und beim Klick einfach auf einen hinterlegten Link verweisen. Die Buttons selbst sollen jetzt kein besonderes Design haben - ein "Standard-Button" aus Windows tut's ganz gut.

Wenn das mit den Tasten nicht geht: Wie kann ich wenigstens normale Links (<a href="ich.bin.eine.adresse.com">Bla</a>) an einer bestimmten Stelle der Webseite positionieren?

Jetzt ist meine Frage: Wie kann ich sowas als Webseite umsetzen? Laufen muss das Ganze unter Windows XP auf dem IE 7 (oder war's der 8?), im Prinzip steht auch nur HTML oder JavaScript zur Verfügung. Java (7) steht theoretisch auch noch zur Verfügung - allerdings würd' ich's gern vermeiden. Am Liebsten wär's mir, wenn es rein mit HTML ginge

**DosAmp**

Das einzige Problem ist, dass Bilder keine Container-Elemente sind, gegenüber denen man Kindelemente positionieren kann. Man muss den Umweg gehen, das Bild als Hintergrundbild z. B. eines <div>-Tags zu setzen, dann kann man absolute Positionierung (was ein CSS2-Feature ist, aber an sich problemlos von IE6+ unterstützt wird) mithilfe position: absolute und top/left verwenden.

Dieses Beispiel in JSFiddle

HTML

<style>
.box {
  background-image: url(https://i.imgur.com/EGG9MZH.jpg);
  /* nur weil ich in dem Fall ein größeres (960x1280) Bild zum Testen nutze */
  background-size: 480px 640px;
  width: 480px;
  height: 640px;
  /* als Anker für absolut positionierte Kind-Elemente,
     sonst wird <html>, also die ganze Seite herangezogen */
  position: relative;
}


.knopf {
  /* für div-tags eigentlich nicht benötigt, für ein <img> aber schon */
  display: block;
  /* absolute Positionierung ggü. einem übergeordnetem Element */
  position: absolute;
  width: 300px;
  height: 130px;
  /* nur zur Demonstration, man kann hier auch einfach Bilder verwenden */
  background-color: silver;
  text-align: center;
  /* 130 + 70 = 200 Pixel */
  padding-top: 70px;
}


.box a {
  /* bitte keinen blauen Links */
  color: inherit;
}


#knopf1 {
  left: 20px;
  top: 20px;
}


#knopf2 {
  left: 20px;
  top: 240px;
}
</style>


<div class="box">
  <a href="https://www.winhistory-forum.net/showthread.php?tid=15127">
    <div class="knopf" id="knopf1">
      Knopf 1
    </div>
  </a>
  <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position">
    <div class="knopf" id="knopf2">
      Knopf 2
    </div>
  </a>
</div>

Alles anzeigen

In der Hinsicht kann man jedes Element auch an einer beliebigen Stelle der Seite festnageln, wenn kein übergeordnetes Element per position: relative eine Ausrichtung vorgibt.

**Xaar**

Theoretisch müsste es doch reichen, wenn ich die Grafik als Hintergrundbild für die Seite einrichte, oder? Damit dürfte die Positionierung doch relativ zur Seite und damit auch zum Hintergrundbild sein. Also im <head> sowas:

Code

<style>
	body	{ background-image: url("hier_ist_das_Hintergrundbild.png"); }
</style>

**DosAmp**

Wenn man sonst keine Seitenelemente hat, geht das natürlich auch.

**Xaar**

Okay, danke Hab' mittlerweile noch eine andere Möglichkeit von shadowtux erhalten:

https://jsfiddle.net/e90nzzq8/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>aussagekräftiger Titel der Seite</title>
	<style>
		body
		{
			background-image: url("http://www.tactic.at/wp-content/gallery/herbst-im-salzkammergut-wallpaper/herbst-im-salzkammergut-wallpaper-1.jpg");
			background-size: fill:
			background-repeat: no-repeat;
		}


		div#buttons ul,
		div#buttons ul li
		{
			padding-left: 0em;
			list-style: none;
		}
	
		div#buttons ul li
		{
			position: absolute;
		}


		div#buttons ul li a
		{
			display: inline-block;
			background: #fcfcfc;
			color: #000000;
			font-size: 1em;
			border-radius: 1px;
			border-style: none;
			padding-top: 0.3em;
			padding-bottom: 0.3em;
			padding-left: 1em;
			padding-right: 1em;
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			border-style: solid;
			border-width: 1px;
			border-color: #dddddd;
			outline: 0;
		}


		div#buttons ul li a:active
		{
			background: #c1c1c1;
			outline: 0;
		}
	</style>
	<base target="_blank">
</head>
<body>
	<div id="buttons">
		<ul>
			<li style="top: 100px; left: 300px; width: 100px"><a href="http://de.wikipedia.org">Ich bin Button 1</a></li>
			<li style="top: 200px; left: 100px; width: 100px"><a href="http://duckduckgo.com">Ich bin Button 2</a></li>
			<li style="top: 10px; left: 1px; width: 100px"><a href="http://www.google.de">Ich bin Button 3</a></li>
		</ul>
	</div>
</body>
</html>

Alles anzeigen

Gefällt mir eigentlich ganz gut, die Lösung - auch mit der Möglichkeit von hover und focus (ist noch nicht drin, aber geht ja flott). Muss ich mal etwas rumprobieren, inwiefern der IE7 da mitmachen will.

**DosAmp**

background-size funktioniert schon mal nicht in IE<9, da es eine CSS3-Eigenschaft ist. IE5-8 brauchen einen DirectX-Filter (oder ein Polyfill, was in diesem Fall aber nur unnötig Javascript hinzufügt) dafür.
Auf ein paar Kleinigkeiten wie border-radius trifft das auch zu, aber das kannst du in diesem Fall mangels Sichtbarkeit auch ganz entfernen.

mrshadowtux

Warum mangels Sichtbarkeit? border-radius impliziert nicht, dass ein border-style gesetzt ist. Auch ohne einen Border hat man die Rundungen. Inwieweit der IE das dann rund zeigt, hängt natürlich vom IE ab.

**DosAmp**

Zitat von mrshadowtux

Warum mangels Sichtbarkeit?

Ein Radius von 1px ist witzlos, weil man durch einen einzelnen Pixel keinen Kreis zeichnen kann. Selbst mit HiDPI und Zoom erahnt man erst ab 3px, dass sich überhaupt jemand die Mühe gemacht hat, die Ecken abzurunden.

**Xaar**

Den border-radius hab' ich auf 1px gesetzt - im Original von shadowtux waren's mehr

Ist doch aber erstmal gut zu wissen, was denn theoretisch möglich ist - auch wenn's technisch tlw. veraltet ist. Mir wär's auch lieber, wenn ich 'nen etwas neueren Browser nutzen könnte, aber XP mit IE 7 ist leider der Stand, mit dem ich auskommen muss.

Das mit dem background-size dürfte auch nicht so problematisch sein - mir reicht eigentlich die Einbindung (also das reine background-image, wie es in #3 steht), da das Hintergrundbild eh größentechnisch auf die zur Verfügung stehende Fläche angepasst sein wird. Wichtig ist nur, dass das Bild nicht irgendwo rumskaliert wird - weil sonst die Positionierung der Buttons nicht hinhaut.

mrshadowtux

Dann lass das background-size: fill weg. Danach wird es nur in seiner Ursprungsgröße gezeigt, ohne zu scalen.

Design-Objekte per HTML positionieren?

Jetzt mitmachen!

Benutzer online in diesem Thema