nicht angemeldet
Danke für dein Beispiel, Stück für Stück bin ich damit weiter gekommen, aber ich befürchte mich nun in einer Sackgasse zu befinden:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>background-image</title>
<style type="text/css">
body html
{
margin: 0;
padding: 0;
}
.oli {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid blue;
margin: 5px;
}
.ore {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid green;
margin: 5px;
}
.uli {
position: relative;
clear: both;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid blue;
margin: 5px;
}
.ure {
position: relative;
float: left;
width: 200px;
height: 200px;
background-image: url('http://ac52.de/img/1.png');
background-repeat: no-repeat;
border: 2px solid green;
margin: 5px;
}
#ol {
position: absolute;
bottom: 20%;
right: 20%;
color: red;
font-size: 2em;
font-family: sans-serif;
}
#or {
position: absolute;
bottom: 30%;
right: 50%;
color: red;
font-size: 2em;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="oli"><span id="ol">test</span></div>
<div class="ore"><span id="or">test</span></div>
<div class="uli"><span id="ol">test</span></div>
<div class="ure"><span id="or">test</span></div>
</body>
</html>
Soweit es die Anordnung und die Textpositionierung betrifft weiß ich nun was ich zu machen habe.
Nur ist das noch nicht ganz, was ich will und brauche. Width und heigth ist hier ja auf 200px festgenagelt. Das soll im endgültigen Layout, sofern das dann überhaupt geht, als Prozentangabe des Elternelements definiert werden.
_Und_ ich möchte das HG-Bild in diesen Bereich hineinskalieren (so wie das ja mit <img> geht, das verlinkte Bild zeigt ja eigentlich beide Diagonalen, sollte es zumindest) und nicht irgendetwas abschneiden. Soweit ich sehe ist diese letzte Anforderung mit einem HG-Bild nicht zu erfüllen ... oder doch?
Der Martin