Website anpassen

[Strange_Thing]

Hallo liebe Leute.

Ich bin neu hier und habe folgendes Problem. Ich habe mit Photoshop eine Seite erstellt (weil ich Teile des Bildes mit Hyperlinks hebne wollte. Dies habe ich mit der Sliceoption erstellt.

Habe dann auch für web abgespeichert und alles hochgeladen (images Ordner und die index.html Datei).

Doch wenn ich jetzt auf die Seite gehe, dann ist das Bild nicht in Originalgröße, sondern viel kleiner - es füllt nicht das ganze Fenster aus. Was muss ich da im Quelltext ändern, damit das Bild ganz ist und für alle Auflösungen angepasst ist? Wäre sehr für Hilfe dankbar.

Meine HP

Mit besten Grüßen

[j4nk3y]

Hallo und Willkommen,

1 . Tabelen Layout ist einfach nur falsch.

Doch wenn ich jetzt auf die Seite gehe, dann ist das Bild nicht in Originalgröße, sondern viel kleiner - es füllt nicht das ganze Fenster aus. Was muss ich da im Quelltext ändern, damit das Bild ganz ist und für alle Auflösungen angepasst ist? Wäre sehr für Hilfe dankbar.

Meine HP

2 . Welches Bild?

3 . <img src="xxx" alt> ist ungültig, das alt muss schon einen Wert bekommen damit es ein valides HTML document ist alt="xx" .

Gruß
Jo

[Strange_Thing]

Wie gesagt, ich habe das mit Photoshop gemacht. Das ganze Bild besteht durchs Slicen ja auch mehreren Teilen, aber obwohl das ganze eigendlich 1920x1080 ist bedeckt es nicht die ganze Seite.

Was muss ich denn bei alt eintagen?

[Gunnar Bittersmann]

@@Strange_Thing

Was muss ich denn bei alt eintagen?

Den Alternativtext, der ausgegeben wird, wenn das Bild nicht ausgegeben werden kann (wenn das Bild nicht geladen wird; wenn auf dem jeweiligen Ausgabegerät gar keine Bildausausgabe möglich ist).

So, wie du es bei
<img src="images/aw.jpg" alt="Armored Warfare" width="691" border="0" height="202">
schon getan hast.

LLAP 🖖

[Gunnar Bittersmann]

@@j4nk3y

<img src="xxx" alt> ist ungültig

Sagt wer?

das alt muss schon einen Wert bekommen

Den hat es.

“Attributes can be specified in four different ways:
Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.” [Spec §8.1.2.3]

Damit es ein sinnvolles HTML-Dokument ist, muss alt natürlich einen sinnvollen Wert haben.

LLAP 🖖

[j4nk3y]

Hallo Gunnar Bittersmann,

<img src="xxx" alt> ist ungültig

Sagt wer?

Du, jedenfalls hab ich das so verstanden, dass alt="" mindestens gesetzt sein muss.

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

Sagt wer?

Du,

Was interessiert mich mein Geschwätz von gestern? ;-)

Nö, hab ich nicht gesagt.

jedenfalls hab ich das so verstanden, dass alt="" mindestens gesetzt sein muss.

Und genau das ist auch gesetzt, wenn man alt ohne explizite Wertzuweisung schreibt.

Das soll jetzt aber keine Empfehlung sein, das so zu tun. alt="" ist sprechender Code; das würde ich vorziehen.

Ich wollte nur sagen, dass alt ohne explizite Wertzuweisung (zwar) auch valide ist. Aber eben nicht unbedingt ratsam.

LLAP 🖖

[JürgenB]

Hallo,

… Was muss ich da im Quelltext ändern, …

nachdem ich das hier gesehen habe:

    <tr>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="45"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="168"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="523"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="128"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="14"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="305"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="493"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="208"></td>
      <td> <img src="images/Abstandhalter.gif" alt="" height="1" width="36"></td>
      <td></td>
    </tr>

ändere alles bzw. fang von vorne an. Sorry für die harten Worte.

Gruß
Jürgen

[Strange_Thing]

Also im Prinzip möchte ich nur eine ganz einfache Starterpage haben, wo ich

http://www.bilder-upload.eu/show.php?file=98e5fb-1481807366.png

als Hintergrundbild habe, aber die einzelnen Logos (armored warfare, Dark Orbit, etc.) als Verlinkung auf die Folgeseiten (z.B. auf: http://closed-section.community/aw/aw/ ), weswegen ich das mit Photoshop versucht habe.

Ich versuche das mit NVU, aber wie schon geschrieben, bin ich noch neu und grad verzweifelt^^

[j4nk3y]

Hey,

als Hintergrundbild habe, aber die einzelnen Logos (armored warfare, Dark Orbit, etc.) als Verlinkung auf die Folgeseiten (z.B. auf: http://closed-section.community/aw/aw/ ), weswegen ich das mit Photoshop versucht habe.

Dann nimm doch jedes Bild als Hintergrund für einen <a>Link</a>.

Gruß
Jo

[JürgenB]

Hallo,

schau dir mal diese Seite im Wiki an.

Gruß
Jürgen

[Maetzzen]

Hallo Strange_Thing

Doch wenn ich jetzt auf die Seite gehe, dann ist das Bild nicht in Originalgröße, sondern viel kleiner - es füllt nicht das ganze Fenster aus.

Bei dir ist das Bild viel kleiner - bei mir ist es viel zu groß. Beachte immer, dass jeder Besucher deine Seite mit verschiedenen Browser und Viewports auch verschieden dargestellt bekommt.

Ich zum Beispiel muss seitwärts scrollen, um den ganzen Inhalt zu sehen - etwas was viele Besucher nur sehr ungern machen.

Webseiten sind nicht aus Papier

Gruß Maetzzen

[Maetzzen]

Hallo Strange_Thing

hier noch etwas, weshalb du deinen tabellarischen Aufbau überdenken solltest:

Zoom: 80%

Zoom: 100% (Standard bei mir)

Deine Platzhalter sind vielleicht für dich unsichtbar und das Bild wird bei Dir richtig dargestellt, bei mir aber nicht!

Gruß Maetzzen

[Gunnar Bittersmann]

@@Strange_Thing

Ich habe mit Photoshop eine Seite erstellt (weil ich Teile des Bildes mit Hyperlinks hebne wollte. Dies habe ich mit der Sliceoption erstellt.

Die Funktion mag tauglich sein, um mal für sich selbst was auszuprobieren. Nicht aber für webtaugliche Seiten.

Was muss ich da im Quelltext ändern, damit das Bild ganz ist […]

Für webtaugliche Seiten schneidest du das Bild besser nicht kaputt, sondern belässt es in einem Stück. In Photoshop ermittelst du die Koordinaten der zu verlinkenden Flächen. Daraus kannst du eine verweis-sensitive Grafik erstellen. Das ist allemals besser als das, was dir Photoshop als HTMüll ausspuckt.

(Und wie du siehst, sollten auch die area-Elemente alt-Attribute haben. title eher nicht.)

[…] und für alle Auflösungen angepasst ist?

Da man bei area die Koordinaten nur in Pixeln und nicht in Prozenten angeben kann, lässt sich eine solche verweis-sensitive Grafik nicht skalieren.

Da kommt dann SVG ins Spiel, wie JürgenB schon verlinkt hatte.

LLAP 🖖

[Martl]

Hallo Strange_Thing,

wie ich sehe hast du die Anregung von JürgenB aufgenommen, und eine Image Map eingebaut. So ist das aber nicht das Gelbe vom Ei, weil das Layout keinerlei Formatänderung mitmacht.

Grundsätzliche Überlegung:

1. Keine kaputte DTD wie <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> verwenden, das ergibt den Kompatibilitätsmodus (Quirks), sondern nach HTML5 aktuell <!DOCTYPE HTML>.
2. Statt <meta content="text/html; charset=ISO-8859-1"> aktuell <meta charset="utf-8"> verwenden. (Den Quelltext natürlich auch in diesem Format speichern!)
3. Bild als Hintergrund für <body> festlegten und über die ganze Breite und Höhe aufziehen.
4. Die Links in ein <ul> packen und mit position:absolute über den Logos plazieren.

Das sieht dann so aus:

HTML

<!DOCTYPE HTML>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Multigaming
		</title>
		<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>
		<h1>Willkommen &hellip;</h1>
		<ul>
		<li>
		<a href="#" class="zeile1 spalte11" title="link-1-1"><span>LINK-1-1</span></a>
		</li>
		<li>
		<a href="#" class="zeile1 spalte12" title="link-1-2"><span>LINK-1-2</span></a>
		</li>
		<li>
		<a href="#" class="zeile2 spalte21" title="link-2-1"><span>LINK-2-1</span></a>
		</li>
		<li>
		<a href="#" class="zeile2 spalte22" title="link-2-2"><span>LINK-2-2</span></a>
		</li>
		</ul>
	</body>
</html>

CSS

body {
	background-image: url(index.png);
	background-size: 100vw 100vh;
}
ul {
	list-style-type: none;
}
a {
	position: absolute;
	display: block;
	width: 36vw;
	border: 1px solid transparent;
	border-radius: 1rem;
}
a:hover {
	border-color: gold;
	box-shadow: 0 0 5px gold;
}
.zeile1 {
	top: 25vh;
	height: 17vh;
}
.spalte11 {
	left: 2.5vw;
}
.spalte12 {
	left: 62vw
}
.zeile2 {
	top: 70vh;
	height: 20vh;
}
.spalte21 {
	left: 11vw;
}
.spalte22 {
	left: 48.5vw;
}
span, h1 {
	visibility: hidden;
}

So wird die Seite flexibel und erfüllt Deine Anforderung "...für alle Auflösungen angepasst..." so gut wie möglich.

Weitere Infos findest Du im Wiki - CSS.

Grüße, Martl

[Gunnar Bittersmann]

@@Martl

wie ich sehe hast du die Anregung von JürgenB aufgenommen, und eine Image Map eingebaut.

Hehe, es war nicht JürgenB, der das anregte. ;-)

2. Statt <meta content="text/html; charset=ISO-8859-1"> aktuell <meta charset="utf-8"> verwenden. (Den Quelltext natürlich auch in diesem Format speichern!)

In dieser Zeichencodierung.^[1] „Format“ wäre eher sowas wie HTML.

		<a href="#" class="zeile1 spalte11" title="link-1-1"><span>LINK-1-1</span></a>

Wozu die spans?

Und da sollten natürlich vernünftige Linktitel stehen, nicht „LINK-1-1“.

body {
	background-image: url(index.png);
	background-size: 100vw 100vh;
}

Das verzerrt doch aber das Bild‽

vw und vh werden weitgehend unterstützt, aber % sollte es hier auch tun.

span, h1 {
	visibility: hidden;
}

Nein! Damit wird der Inhalt auch vor Screenreadern versteckt. Damit der Inhalt zugänglich bleibt, darf er nur visuell versteckt werden.

LLAP 🖖

---

1. Was’n das für’n blöder gelber Kasten in der deutschen Übersetzung‽ Gleich mal einen Knoten ins Taschentuch machen … ↩︎

[Martl]

Hallo Gunnar,

Hehe, es war nicht JürgenB, der das anregte. ;-)

Trags mit Fassung. :-}

Wozu die spans?

Damit der Text in der Bildansicht nicht stört, aber ohne CSS was zum Lesen da ist.

Und da sollten natürlich vernünftige Linktitel stehen, nicht „LINK-1-1“.

... als Platzhalter?

Das verzerrt doch aber das Bild‽

Ja, sieht aber trotzdem ganz nett aus und bleibt sowohl im Hoch- als auch im Querformat bedienbar.

Nein! Damit wird der Inhalt auch vor Screenreadern versteckt.

Lies die von Dir verlinkte Seite, da wird auf „display:none“ Bezug genommen; meiner Kenntnis nach wird „visibility:hidden“ ausgewertet.

Grüße, Martl

[Gunnar Bittersmann]

@@Martl

Nein! Damit wird der Inhalt auch vor Screenreadern versteckt. Lies die von Dir verlinkte Seite, da wird auf „display:none“ Bezug genommen; meiner Kenntnis nach wird „visibility:hidden“ ausgewertet.

Deine Kenntnis ist nicht korrekt.

LLAP 🖖

PS: Ich sollte meinen dort verlinkten Pen mal als unbrauchbar kennzeichnen. Die Tabs sind zwar responsive, aber nicht (tastatur-)bedienbar.

Edit: Huch, sind sie ja doch.

[Martl]

Hallo Gunnar,

touché.

Grüße, Martl

[JürgenB]

Hallo Gunnar,

wie ich sehe hast du die Anregung von JürgenB aufgenommen, und eine Image Map eingebaut.

Hehe, es war nicht JürgenB, der das anregte. ;-)

ich habe die „Verweissensitive Grafik“ bewusst nicht erwähnt, da ma sie nicht skalierbar bekommt. Welche Idee besser ist, die Skalierbarkeit über SVG oder prozentual-absolut positionierte Links zu realisieren, weiß ich allerding nicht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ich habe die „Verweissensitive Grafik“ bewusst nicht erwähnt, da ma sie nicht skalierbar bekommt.

Ich habe sie dennoch bewusst erwähnt wegen „Das ist allemals besser als das, was dir Photoshop als HTMüll ausspuckt.“

Welche Idee besser ist, die Skalierbarkeit über SVG oder prozentual-absolut positionierte Links zu realisieren, weiß ich allerding nicht.

Ich hab zweiteres noch nicht ausprobiert und mag nicht abschätzen, was das für Fallstricke mit sich bringt.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Was’n das für’n blöder gelber Kasten in der deutschen Übersetzung‽ Gleich mal einen Knoten ins Taschentuch machen …

Die Darstellung auf dem Handy auch nicht optimal.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Die Darstellung auf dem Handy auch nicht optimal.

Auf dem Desktop auch nicht, IMHO.

Das liegt aber nicht gerade in meinem Einflussbereich. Oder doch? Ich könnte Richard mal drauf ansprechen. Oder einfach machen und einen Pull Request erstellen.

LLAP 🖖