Pb de centrage div

Bonjour,

J'ai un petit soucis avec CSS.

Je n'arrive pas à centrer le bloc en orange dans l'image ci-dessous. Je bloque

http://souk-pc.com/img.bmp

Voici le code CSS

a écrit :

#relative {
margin:0pt;
padding-top:10px;
}

.separateur {
border:0pt none;
clear:both;
font-size:0pt;
height:0pt;
line-height:0pt;
margin:0pt;
padding:0pt;
}



.titre2 {
border-bottom:1px solid #888888;
height:27px;
margin:0pt;
padding:0pt;
/* width:100%; */
}

.titre2_left {
background:url(images/titre2_left.gif);
background-repeat:no-repeat;
float:left;
height:27px;
/* margin-left:10px; */
margin-left:10px;
width:7px;
}
.titre2_center {
background:url(images/titre2_center.gif);
background-repeat:repeat-x;
color:#FFFFFF;
float:left;
font-size:1.3em;
height:27px;
padding-top:0px;
}

.titre2_right {
background:url(images/titre2_right.gif);
background-repeat:no-repeat;
float:left;
height:27px;
width:7px;
}

.guide {
/* float:left; */
padding:5px;
width:125px;
}

Voici le code HTML

a écrit :

<td align=center>
<div id="relative">
<div class="separateur">
</div>
<div class="titre2">
<div class="titre2_left">
</div>
<div class="titre2_center">
Boîtiers
</div>
<div class="titre2_right">
</div>
</div>
<div class="separateur">
</div>
<a href='/composants/cm/' title="Boîtiers"><img src=/img/boitier6.jpg border=0></a>
<div class="separateur"></div>
</div><div class="guide"></div>
</div>

Merci d'avance.

J'aurais tendance à dire que ton code est peut-être plus complexe que nécessaire...

Une div pour ton onglet :
- tu centres ton image de contenu
- tu mets un border-bottom:1px solid black;

Une div pour ton image :
- tu centres ton contenu
- et un peu de margin

non ?

L'onglet est divisé en 3 images (le coin gauche, la partie centrale qui varie en fonction du texte, et le coin droit).

Ce serait difficile de mettre cela en une seule div, non ?

????????????

dj_mez a écrit :
L'onglet est divisé en 3 images (le coin gauche, la partie centrale qui varie en fonction du texte, et le coin droit).

Ce serait difficile de mettre cela en une seule div, non ?

Tu peux remplacer tes trois DIV par le code suivant:

<a href="..."><span>Le texte</span></a>

Il faut ensuite jouer sur les images de fond de ces deux éléments (peut-être tous deux en display: block si nécessaire), et sur un peu de padding pour le conteneur (le lien A). Notons que tu peux à priori utiliser une image unique (suffisamment large) pour les deux fonds.

Pour le reste, à voir ton code HTML, tu es atteint de divite aigüe.
Autrement dit, ton code est mal structuré.
Modifié par Florent V. (02 Oct 2008 - 00:48)

Désolé mais j'ai rien compris à ton inervention...

dj_mez a écrit :
Désolé mais j'ai rien compris à ton inervention...

Dans ce cas tu devrais peut-être chercher à comprendre les bases du CSS avant de venir poster ici...

SolMJ a écrit :


Dans ce cas tu devrais peut-être chercher à comprendre les bases du CSS avant de venir poster ici...

Apparament tu as les bases pour intervenir ici, donc, merci de me donner un ptit coup de main...

Toutes les informations pour parvenir à l'effet que tu demandes t'ont été données dans les messages précédents.

Explique nous ce que tu ne comprends pas, avec des mots, plutôt qu'avec des smileys ou de la ponctuation, on te comprendra plus facilement.

Je n'arrive tout simplement pas à comprendre comment on peut remplacer les 3 div par un <a href="..."><span>Le texte</span></a>

Et mettre les 3 div en une div, encore moins vu qu'il y a 2 images fixes (arrondi de droite et arrondi de gauche) et une partie variable en fonction du texte.