nicht angemeldet
Ich habe folgendes Dokument:
<html>
<head>
<title>Test</title>
<style type="text/css">
#services {
position: relative;
background-color: #00ffff;
margin-left: 0px;
height:140px;
padding:10px;
font-family: Courier, Monaco, Monospace;
text-align:middle;
border-style: solid;
border-color: #ff0000;
}
#serv1 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:20px;
top:20px;
}
#serv2 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
left:140px;
border: 1px solid #ff0000;
top:20px;
}
#serv3 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;;
left:260px;
top:20px;
}
#serv4 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:380px;
top:20px;
}
#serv5 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:500px;
top:20px;
}
</style>
</head>
<body>
<div id="services">
<div id="serv1">Service 1</div>
<div id="serv2">Service 2</div>
<div id="serv3">Service 3</div>
<div id="serv4">Service 4</div>
<div id="serv5">Service 5</div>
</div>
</body>
</html>
Der Container "Services" macht schön mit, wenn man das Fenster vergrössert. Was ich nun erreichen möchte, ist dass die anderen Container "serv1, serv2, etc.." den ganzen Raum nutzen, falls der Container "Services" sicht vergrössert. Die Container in sich sollen nicht grösser werden, nur der Abstand zwischen den soll grösser werden.
Wie kann ich das erreichen? Der Ansatz mit position:abolute ist bestimmt falsch.
Struppi