Discussion :

[Hayabusa]

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 :

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>

ça donnait un truc ma foi bien plaisant :


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>

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

le bord noir de div.entete_menu ne sert à rien, c'est juste pour mieux visualiser, je vais le virer après.

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

[mLk92]

met un repeat sur l'image de font de ton texte " à propos" , Exemple:

Code :

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

background: url(images/menu-about3.jpg) top repeat;

il existe le repeat-x ou repeat-y selon tes désires

[Candygirl]

Code :

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

1
2
3
4
5
6
7
 
	div.titre_menu{
		width: 100%;
		background-image: url(../images/barres/barre2.jpg);
		display: inline;
		height: 100%;
		}

problèmes : le div du milieu ne prend pas toute la partie disponible comme
voulu.

C'est normal, tu le transformes en inline ce qui implique qu'il s'adapte à la longueur du texte au lieu d'occuper toute la largeur à disposition et que donc tes height et width ne servent à rien.

Au vu de ton code html et css, je te suggère de lire les bases de la sémantique en html afin d'utiliser les bonnes balises et de te documenter sur les positionnements css avant de te lancer dans des montages trop avancés. Voir un fixed + un absolute + un float attribués à un seul sélecteur, sans compter sur le inline avec un width et height, me fait penser qu'un petit peu de théorie pourrait bien t'aider pour la suite et t'éviter bien des prises de tête