Neue Antwort schreiben 
 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Design-Objekte per HTML positionieren?
Xaar Offline
Wahnsinnige Geschwindigkeit - und los!

Beiträge: 21.092
Registriert seit: Jul 2009
Beitrag #1
Design-Objekte per HTML positionieren?
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:
[Bild: Unbenannt1.png]

Das hier machen:
[Bild: Unbenannt2.png]

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 :D

«Ich verstehe Ihre Frage so: Dass es Menschen gibt, die wünschen, dass ein solches OS als "Retro-OS" bezeichnet wird, ja? Mir ist nicht bekannt, dass solche Absichten bestehen, da HP-UX 9.x einfach ein altes OS ist. Niemand hat die Absicht, ein "Retro-OS" zu bauen.» Xaar, 2014

Prozessor gesucht? -> Prozessoren, die ich abgeben kann (unter "Available for trading")
"Überschüssige" Prozessoren oder Hardware? -> Einfach PN an mich schicken b1 -> Hardware, die ich suche
12.05.2017 19:56
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
DosAmp Offline
reach out, touch face

Beiträge: 11.362
Registriert seit: Jul 2008
Beitrag #2
RE: Design-Objekte per HTML positionieren?
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
Code:
<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>

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.


(Dieser Beitrag wurde zuletzt bearbeitet: 12.05.2017 21:04 von DosAmp.)
12.05.2017 21:03
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Xaar Offline
Wahnsinnige Geschwindigkeit - und los!

Beiträge: 21.092
Registriert seit: Jul 2009
Beitrag #3
RE: Design-Objekte per HTML positionieren?
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>

«Ich verstehe Ihre Frage so: Dass es Menschen gibt, die wünschen, dass ein solches OS als "Retro-OS" bezeichnet wird, ja? Mir ist nicht bekannt, dass solche Absichten bestehen, da HP-UX 9.x einfach ein altes OS ist. Niemand hat die Absicht, ein "Retro-OS" zu bauen.» Xaar, 2014

Prozessor gesucht? -> Prozessoren, die ich abgeben kann (unter "Available for trading")
"Überschüssige" Prozessoren oder Hardware? -> Einfach PN an mich schicken b1 -> Hardware, die ich suche
(Dieser Beitrag wurde zuletzt bearbeitet: 12.05.2017 21:39 von Xaar.)
12.05.2017 21:34
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
DosAmp Offline
reach out, touch face

Beiträge: 11.362
Registriert seit: Jul 2008
Beitrag #4
RE: Design-Objekte per HTML positionieren?
Wenn man sonst keine Seitenelemente hat, geht das natürlich auch.


12.05.2017 21:39
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Xaar Offline
Wahnsinnige Geschwindigkeit - und los!

Beiträge: 21.092
Registriert seit: Jul 2009
Beitrag #5
RE: Design-Objekte per HTML positionieren?
Okay, danke :) Hab' mittlerweile noch eine andere Möglichkeit von shadowtux erhalten:

https://jsfiddle.net/e90nzzq8/
Code:
<!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>

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.

«Ich verstehe Ihre Frage so: Dass es Menschen gibt, die wünschen, dass ein solches OS als "Retro-OS" bezeichnet wird, ja? Mir ist nicht bekannt, dass solche Absichten bestehen, da HP-UX 9.x einfach ein altes OS ist. Niemand hat die Absicht, ein "Retro-OS" zu bauen.» Xaar, 2014

Prozessor gesucht? -> Prozessoren, die ich abgeben kann (unter "Available for trading")
"Überschüssige" Prozessoren oder Hardware? -> Einfach PN an mich schicken b1 -> Hardware, die ich suche
(Dieser Beitrag wurde zuletzt bearbeitet: 12.05.2017 22:06 von Xaar.)
12.05.2017 22:02
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
DosAmp Offline
reach out, touch face

Beiträge: 11.362
Registriert seit: Jul 2008
Beitrag #6
RE: Design-Objekte per HTML positionieren?
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.


(Dieser Beitrag wurde zuletzt bearbeitet: 12.05.2017 22:50 von DosAmp.)
12.05.2017 22:47
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux Offline
Klingt von Vinyl am besten

Beiträge: 26.161
Registriert seit: Jun 2010
Beitrag #7
RE: Design-Objekte per HTML positionieren?
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.
12.05.2017 23:45
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
DosAmp Offline
reach out, touch face

Beiträge: 11.362
Registriert seit: Jul 2008
Beitrag #8
RE: Design-Objekte per HTML positionieren?
(12.05.2017 23:45)mrshadowtux schrieb:  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.


(Dieser Beitrag wurde zuletzt bearbeitet: 13.05.2017 01:26 von DosAmp.)
13.05.2017 01:23
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Xaar Offline
Wahnsinnige Geschwindigkeit - und los!

Beiträge: 21.092
Registriert seit: Jul 2009
Beitrag #9
RE: Design-Objekte per HTML positionieren?
Den border-radius hab' ich auf 1px gesetzt - im Original von shadowtux waren's mehr :D

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.

«Ich verstehe Ihre Frage so: Dass es Menschen gibt, die wünschen, dass ein solches OS als "Retro-OS" bezeichnet wird, ja? Mir ist nicht bekannt, dass solche Absichten bestehen, da HP-UX 9.x einfach ein altes OS ist. Niemand hat die Absicht, ein "Retro-OS" zu bauen.» Xaar, 2014

Prozessor gesucht? -> Prozessoren, die ich abgeben kann (unter "Available for trading")
"Überschüssige" Prozessoren oder Hardware? -> Einfach PN an mich schicken b1 -> Hardware, die ich suche
13.05.2017 08:03
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux Offline
Klingt von Vinyl am besten

Beiträge: 26.161
Registriert seit: Jun 2010
Beitrag #10
RE: Design-Objekte per HTML positionieren?
Dann lass das background-size: fill weg. Danach wird es nur in seiner Ursprungsgröße gezeigt, ohne zu scalen.
13.05.2017 09:28
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Neue Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste