[CSS] Immagini in dei div...come metterle tutte attaccate una accanto all'altra? [Archivio]

WilliamBlake

21-10-2009, 14:27

Ciao,
se andate quì potete vedere cosa c'è che non và: http://www.siatec.net/andrea/header/index.html

Praticamente ho dei div: ogni div contiene al proprio interno un'immagine...
in sostanza le immagini devono essere messe una accanto all'altra in modo da formare un'unica immagine ma come potete vedere non mi funziona: l'immagine del div left1 a sinistra, poi attaccata alla sua destra quella del div left2, alla sua destra quella di middle, etcetc

Il codice html è:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<div id="header">
<div id="left1"></div>
<div id="left2"></div>
<div id="middle"></div>
<div id="right1"></div>
<div id="right2"></div>
</div>

</html>

Mentre il codice CSS è:

body{
background-color: #000000;
}

#header{
height: 200px;
width: 980px;
}

#left1{
background-image: url(images/banner1.gif);
background-repeat: no-repeat;
height: 200px;
}

#left2{
background-image: url(images/banner2.gif);
background-repeat: no-repeat;
height: 200px;
float: left;
}

#middle{
background-image: url(images/banner0.jpg);
background-repeat: no-repeat;
height: 200px;
float: left;
}

#right1{
background-image: url(images/banner3.gif);
background-repeat: no-repeat;
height: 200px;
float: left;
}

#right2{
background-image: url(images/banner4.gif);
background-repeat: no-repeat;
height: 200px;
float: left;
}

Mi date una manina?