Coller une image à coté d'un DIV avec background

**Shuny** · 28/11/2007, 16h15

Bonjour,

J'ai un petit problème avec la découpe de mon site :'(

J'explique très rapidement la situation :

menul.jpg est le coté arrondi gauche de mon menu
menur.jpg est le coté arrondi droit de mon menu

Au milieu et pour pouvoir modifer mon menu quand je veux, j'aurais aimé que l'image centrale, menubg.jpg soit considéré en tant que background.

C'est pourquoi j'ai mis cette image comme background no repeat dans un div au milieu des deux images de coté arrondi.

Seul problème, le div crée un saut de ligne avant et après ce qui sépare le design complet du menu sur trois lignes :/

Comment empecher le div d'ajouter des sauts de ligne ?

Merci d'avance

Shuny

**Sheriff** · 28/11/2007, 16h20

salut !
utilise la propriété le style float:left ; je te suggérerais de mettre les deux bords dans des div aussi.
cette fois-ci, pour insérer un saut de ligne tu devras utiliser <br clear=all />
++

**Shuny** · 28/11/2007, 17h17

Ca ne marche pas

Mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
MonSite</title>
</head>
<body>
<div id="centrer">
<img src="images/header.gif" class="imgblock" alt="" />
<img src="images/menul.gif" alt="" /><div id="menu"> Index | Menu | Autres | Liens </div><img src="images/menur.gif" alt="" />
 
</body>
</html>

Mon style.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#centrer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
#menu {
background-image:url(images/menubg.jpg);
background-repeat:no-repeat;
float: left;
height: 32px;
}
 
.imgblock {
display: block;
}
 
img {
border: 0px;
}
 
body {
background-color: #eeeeee;
}