image de fond d'une nav bar en tableau

**ml1234** · 01/06/2009, 19h21

Bonjour,
j'ai une barre de navigation de 902 (wrapper)x34 (table) entre un header et un maincontent. j'ai trouvé le tableau plus simple que les dic car j'avais un prolème pour mettre cette barre float left ou float right aisément.

Quel est l'endroit le plus approprié et la commande pour afficher dans la barre de navigation une image de fond de 720x34 ou une image 12x34 en repeat-x
à la place de mon fond orange ?

j'ai préféré ajouter le code au cas où je ne serais pas clair

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	z-index: 2;
	color: #0000FF;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
 
 
.navText {
	color: #26354A;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	}
 
#navigation a {
	color: #26354A;
	text-decoration: none;
	border-right:1px solid #FF6600;
	display: block;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	font-family: "Trebuchet MS";
	font-size: 15px;
	line-height: 30px;
	}
 
#navigation a:hover {
	color:#ffffff;
	background-color: #3366FF;
	}
  </style>  
</head>
 
<body>
 
 
 
<div class="menu">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
 
 
        <tr bgcolor="#FFCC00">
			<td width="15" nowrap="nowrap">&nbsp;</td>
			<td width="705" height="34">
		  		<table border="0" cellpadding="0" cellspacing="0" id="navigation">
        			<tr>
          				<td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Accueil</a></td>
          				<td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">News & articles</a></td>
          				<td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Saison des courses</a></td>
          				<td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Voyages & Evènements</a></td>
          				<td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Enchères</a></td>
                        <td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Clubs</a></td>
                        <td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Forum</a></td>
                        <td class="navText" align="center" nowrap="nowrap"><a href="javascript:;">Liens</a></td>
        			</tr>
      			</table>	
             </td>
 
			 <td width="100%">&nbsp;</td>
       </tr>
 
 
       </table>
			<!-- <br style="clear: left" /> -->
		</div>
 
 
</body>
</html>

merci d'avance
Marc

**HiRoN** · 02/06/2009, 09h21

Bonjour,

Envoyé par ml1234

Quel est l'endroit le plus approprié et la commande pour afficher dans la barre de navigation une image de fond de 720x34 ou une image 12x34 en repeat-x
à la place de mon fond orange ?

Au niveau de la construction, l'utilisation d'une liste ul /li aurait été plus pertinente sémantiquement parlant.

Pour le fond du menu, le mieu serait de le mettre sur ton div #menu avec :

Code CSS :

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

#menu { background:url(ton_image.png) repeat-x; }

Idem sur tes liens pour leur ajouter un fond (peut-être à mettre en display:block (car élément de type inline) et spécifier les dimensions, à tester)

En espérant avoir compris la demande...

**ml1234** · 02/06/2009, 19h35

Merci Hiron,
j'avais pas du tout pensé à la mettre dans le div menu.

Sinon, de façon générale, pas de commande pour mettre une toile de fond dans un tableau ? j'ai pas trouvé dans mes bouquins

j'essaye depuis plusieurs jours de faire une barre de navigation avec ul et li et je galère. le code publié avec des tableaux m'a pris à tout caser 15 minutes.

je pense que je vais copier mon code ul/li dans un autre post sinon je resterai éternellement avec mes tableaux

Ce que je ne comprends pas c'est que les barres de navigation sont souvent flash ou faites avec fireworks et exportées en tableaux vers dreamweaver.
Donc je ne vois pas pourquoi un tableau de navigation choque par rapport à ul/li

merci pour les commentaires
Marc

**HiRoN** · 02/06/2009, 20h33

Envoyé par ml1234

Sinon, de façon générale, pas de commande pour mettre une toile de fond dans un tableau ? j'ai pas trouvé dans mes bouquins

Dans l'idée, c'est à gerer en CSS (mise en forme), via un la propriété background (voir background-position, repeat en version courte).

Envoyé par ml1234

Ce que je ne comprends pas c'est que les barres de navigation sont souvent flash ou faites avec fireworks et exportées en tableaux vers dreamweaver. Donc je ne vois pas pourquoi un tableau de navigation choque par rapport à ul/li

Pour résumer :
Créer un menu avec un tableau est en fait une utilisation détournée de celui-ci (normalement réservé à de l'affichage de données tabulaires).
Dreamweaver et autres éditeurs WYSIWYG ne générant pas un code sémantiquement juste et ils utilisent (très) facilement des balises dans un contexte détourné ce qui donne au fin un code lourd, pas "propre", et non pertinent pour le référencement du site.

image de fond d'une nav bar en tableau

Tableau en CSS

Discussions similaires

Partager

Partager