Contenu avec un menu dynamique

**Norin** · 02/07/2008, 17h03

Bonjour,

Alors voila la situation... J'ai un menu à la gauche de mon site web, initialement, on ne voit que les titres des sections avec un petit + pour ouvrir les différents liens. À la droite du site, j'ai une autre barre avec des liens quelconques.

Donc, à partir de là, j'aimerais créer mon menu au centre du site. Celui-ci est en fait un codage javascript générant une série de <tables> selon un fichier JSON fourni. Et là, cata! J'ai tenté plusieurs essais, ça ne donne jamais le bon résultat :S

Les tables sont générés par ce code-ci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	for(i = 0; i < dataNews.nouveautes.length; i++){
		states += '<table class="news">';
		states += '<tr bgcolor="#00A569">';
		states += '<td width="75%">' + dataNews.nouveautes[i].titre + '</td>';
		states += '<td width="25%">' + dataNews.nouveautes[i].date + '</td>';
		states += '</tr><tr>';
		states += '<td colspan=2>' + dataNews.nouveautes[i].contenu + '</td>';
		states += '</tr>';
		states += '</table>';
		states += '<br>';
		}

Ceux-ci sont générés dans un DIV, voici son CSS:

Code :

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

1
2
3
div#content{
	margin-top: 10;
}

Et finalement, voici le CSS du table:

Code :

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

1
2
3
4
5
6
table.news{
	width: 100%;
	border-width:1;
	border-style:ridge;
	border-collapse:collapse;
}

Quelqu'un saurait m'éclairer svp?

Merci d'avance

**FraK** · 03/07/2008, 11h26

sans trop de convictions mais peut etre devrais tu renseigner un height max dans ton css.
Sinon ajouter peut etre aussi un display: block; et float: left;

**Norin** · 03/07/2008, 14h28

J'avais essayé de mettre les float:left et display:block dans mes CSS
-div#contant
-div.news
-table.news

Mais le résultat n'est pas celui escompté... Sous FF, les tables sont d'une largeur très petite, sous IE ils sont entassés l'un à la suite de l'autre sur la même ligne.

Lorsque je ne les mets pas, les largeurs sont parfaites mais dès qu'une nouveauté se trouve sous le menu, celle-ci est décallée à gauche...

Aussi, lorsque je crée un <center></center> autour de mes tables de nouvelles, l'affichage est exactement comme je le veux, mais dès que j'ouvre mon menu, les news se trouvant à la hauteur du déroulement du menu se trouve décallées vers la droite.

PS: Mettre un height n'a pas fonctionné

**FraK** · 03/07/2008, 14h46

Juste dans table.news suffit.
Et ton css a l'air assez incomplet.
Tu ne devrais pas avoir de <center> dans ton html, mais plutôt un attribut text-align: center; dans ton css sur le div correspondant.

exemple :

div content = div dans lequel sera contenu le site
div menu_gauche = div dans lequel sera contenu le menu de gauche
div news = div dans lequel sera contenu le sous menu
div menu_droit = div dans lequel sera contenu le menu de droite avec tes liens

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
 
body{
width: 100%;
text-align: center;
margin: 0 0;
}
 
#content{
margin-top: 10px;
width: 900px;
height: 500px;
}
 
#menu_gauche{
width: 150px;
height: 500px;
display: block;
float: left;
}
 
table.news{
width: 600px;;
height: 500px;
display: block;
border-width: 1;
border-style: ridge;
border-collapse: collapse;
float: left;
}
 
#menu_droite{
width: 150px;
height: 500px;
display: block;
float: left;
}

le html :

Code :

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

1
2
3
4
5
6
7
8
 
<body>
   <div id="content">
       <div id="menu_gauche"></div>
       <table class="news"></table>
       <div id="menu_droit"></div>
   </div>
</body>

la normalement comme cela, l affichage sera fixe et ne bougera pas, quel que soit le naviguateur.

**Norin** · 03/07/2008, 14h50

J'ai ces CSS, je ne les croyais simplement pas pertinents à mon problème...

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
div#content{
	background-color: #FFFFFF;
}
 
div#menuLeft{
	display:block;
	float: left;
	width: 200px;
	background-color: #003366;
}
 
div#menuRight{
	display:block;
	float: right;
	width: 200px;
	background-color: #003366;
}

En ce qui a trait au text-align: center, cela centre le texte lorsque je le met dans mon CSS de table et ne fait rien si je le met dans mon contenu ou dans mon news...

EDIT: Oulah, je viens de remarquer que mes menus ne sont pas dans mon div content... J'essai de les insérer mais ça n'est pas vraiment facile... Tout est généré automatiquement par des scripts javascript :/

EDIT2: Voila, tout est dans mon content, mais ça ne fonctionne pas plus... Même mon menu droit est problématique maintenant... Il est désormais à la droite mais en-dessous des nouveautés :S

**FraK** · 03/07/2008, 15h03

Le text-align dans le body centrera tes div
Ensuite tu met un text-align : left; dans chaque div pour remettre comme il faut.
Pour finir, tes div menus doivent avoir une largeur finie, regarde dans ton JS les indications qu'on te fournit sur ces données, et inclus les dans ton css.
J'ai fait pas mal de site ressemblant à ce que tu décris, et avec la méthode que je t'ai donné, tout passe très bien.
Après cela dépend de comment tu codes aussi, il y a peut être des petites coquilles par ci par là.

**Norin** · 03/07/2008, 15h06

Le text-align du body ne se rend pas à mes tables... Le site est entièrement géré par javascript pour permettre la modification en tout temps de toutes ses parties... (Pas trop le choix... Site dynamique sans PHP ou ASP... Faut se replier sur json et encore... :/)

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
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<link rel="stylesheet" href="css/global.css" type="text/css">
	<script type="text/javascript" language="JavaScript1.2" src="js/global.js"></script>
</head>
 
<body onLoad="loadApplications('json/applications.json'); loadNews('json/nouveautes.json')">
	<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="js/header.js"></SCRIPT>
	<div id="topRefresh">
	<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="js/menuTop.js"></SCRIPT>
	</div>		
	<div id="content">
		<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="js/menuLeft.js"></SCRIPT>
		<div id="news"></div>
		<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="js/menuRight.js"></SCRIPT>
	</div>
	<div id="footer">Copyright &copy; 2008</div>
</body>

**FraK** · 03/07/2008, 15h12

Envoyé par Norin

Code :

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

<div id="news"></div>

table au lieu de div déjà, dans ton css tu déclares un tableau et non un div
ensuite c'est une class et non un id.
Ensuite, enfermes tes menus dans des divs, sinon ça va vitre être le fouillis
Ton div content doit contenir tout ton site, footer et top menu inclus aussi.

**Norin** · 03/07/2008, 15h16

Le div est pour que mon script loadNews envoi les tables

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for(i = 0; i < dataNews.nouveautes.length; i++){
	states += '<table class="news">';
	states += '<tr bgcolor="#00A569">';
	states += '<td width="75%">' + dataNews.nouveautes[i].titre + '</td>';
	states += '<td width="25%">' + dataNews.nouveautes[i].date + '</td>';
	states += '</tr><tr>';
	states += '<td colspan=2>' + dataNews.nouveautes[i].contenu + '</td>';
	states += '</tr>';
	states += '</table>';
	states += '<br>';
}			
document.getElementById('news').innerHTML = states;

Je sais... C'est assez bordelique :/

EDIT: Pour les menus, ils sont dans des divs dans le fichier JS exemple:

Code :

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

1
2
3
4
5
6
 
document.write('<div id="menuRight">'
  + '		<center>'
  + '			<div id="zone"></div>'
  + '			</center>'
  + '			</div>');

**FraK** · 03/07/2008, 15h20

Grave de chez grave lol
Construis bien l'ossature en css avant de faire quoi que ce soit en JS.
Après tu inclus tes JS dans ton code HTML, une fois que ta mise en page css est OK.

**Norin** · 03/07/2008, 15h22

Heh, le merveilleux monde de l'informatique où l'ont doit reprendre le travail d'autres ^^

**FraK** · 03/07/2008, 15h24

Toujours, chacun à une façon de travailler bien spéciale a lui, et souvent, faut tout refaire.
Quand j 'ai débarqué dans ma boite, j ai repris tous les sites car trop sales le code ...
Des tables et td partut au lieu de divs, des css générés par dreamweaver direct dans le html, lui aussi sous dream ...
Tu peux pas y couper lol

**Norin** · 03/07/2008, 15h27

Mais doit-on toujours définir une hauteur? Car même en recommençant le tout, les utilisateurs peuvent ajouter/supprimer des liens à tout moment de la journée et les tables ne sont jamais de même hauteur [il ne faut pas de "..."].

**FraK** · 03/07/2008, 15h36

pas forcément, comme ca elle pourra se modifier d'elle même à l ajout de contenu.

**Norin** · 03/07/2008, 15h49

D'accord, merci

Je laisse le topic ouvert pour plus tard au cas où... Ça évitera de créer 10 000 topics

Contenu avec un menu dynamique

CSS

Discussions similaires

Partager

Partager