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

Version imprimable

28/11/2007, 16h15
Shuny

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

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
28/11/2007, 16h20
Sheriff

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 />
++

Ca ne marche pas :(

Mon code HTML :

Code:

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:

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;
}

L'arrondi gauche se retrouve collé a l'arrondi droite et le centre du menu est une ligne en dessous :(

28/11/2007, 17h20
BnA

Essaie avec un float:left; sur ta première image (le coin arrondi de gauche)
28/11/2007, 17h23
Shuny

Citation:

Envoyé par BnA

Essaie avec un float:left; sur ta première image (le coin arrondi de gauche)

Ca marche !:oops:

Merci beaucoup de votre aide ;)
28/11/2007, 19h34
Sheriff

et le tag :resolu: alors