Bien l'bonjour
Voilà je me suis mis à transformer la mise en page de mon site de tableaux vers div...
J'ai des menus classique, avec une petite "entete" au dessus, le titre des menus.
En html ça donnait ca :
ça donnait un truc ma foi bien plaisant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <table width="98%" cellpadding="0" cellspacing="0" border="0" class="menu_haut" align="center"> <tr> <td><img src="jouez/images/barres/barre1.jpg" class="img_haut"></td> <td class="menu_haut">à propos</td> <td><img src="jouez/images/barres/barre3.jpg" class="img_haut"></td> </tr> </table>
mais j'arrive pas à le refaire en CSS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <div class="entete_menu"> <img src="jouez/images/barres/barre1.jpg" class="entete_menu_gauche"> <div class="titre_menu">à propos</div> <img src="jouez/images/barres/barre3.jpg" class="entete_menu_droite"> </div>le bord noir de div.entete_menu ne sert à rien, c'est juste pour mieux visualiser, je vais le virer après.
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
24
25 div.entete_menu{ width: 170px; border-width: 1px; border-style:solid; position: absolute; } div.titre_menu{ width: 100%; background-image: url(../images/barres/barre2.jpg); display: inline; height: 100%; } img.entete_menu_gauche { margin: 0px;padding: 0px; height: 20px;width: 13px; float: left; } img.entete_menu_droite{ margin: 0px;padding: 0px; height: 20px;width: 13px; float: right; position: fixed; position: absolute; top: 0px; right:0px; }
Firefox me donne ça :
problèmes : le div du milieu ne prend pas toute la partie disponible comme
voulu.
je ne sais pas centrer le div avec le bord noir (div.entete_menu)
Comment faire ?
Merci de votre aide
Partager