nicht angemeldet
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:
- 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>.
- Statt <meta content="text/html; charset=ISO-8859-1"> aktuell <meta charset="utf-8"> verwenden. (Den Quelltext natürlich auch in diesem Format speichern!)
- Bild als Hintergrund für <body> festlegten und über die ganze Breite und Höhe aufziehen.
- 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 …</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
JürgenB
Matthias Apsel