28221 sujets

CSS et mise en forme, CSS3

J'aurais du commencer par Firefox, ce n'est pas encore un réflexe...sous IE, tout va bien, mais sous Frfx c'est fou ce que ça dégénère Smiley biggol
voici la page :
http://miltonis.free.fr/pronos/testpage.php

le code HTML :
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td>
<div class="header">
  <div class="headerLeft"></div>
	<div class="headerCenter"><!--<img src="photos/entete.gif">-->&nbsp;</div>
	<div class="headerRight"></div>	
</div>
<div class="bar"></div>
<div class="middle">

<div class="middleCenter">
	<div class="menu">menu 01<br>menu 02<br>menu 03<br>menu 04<br>menu 05<br></div>
	<div class="content">
		<div class="content01">&nbsp;</div>
		<div class="content02">
		 C'est certainement la plus belle et élégante des danses péruviennes. le nom de "La marinière" est né d'un hommage à Miguel Grau, héros naval du 
		 Pérou. C'est un mélange de diverses autres danse aujourd'hui presque oubliées.<br>
		 La Marinera « parle » de la séduction simultanée d’un couple faisant tournoyer un mouchoir blanc de la main droite. Ce mouvement sert à porter le 
		 rythme de la complexe chorégraphie de cette danse. La Marinera est connue pour ses pas assez caractéristiques qu’on appelle le « coqueteo » 
		 (disons la séduction) avec tournoiements et changements de la posture du corps, combiné aux habiles trépignements des pieds.</div>
	</div>
	<div class="rightNav"></div>
</div>
	
<div class="footer">
	<div class="footerCenter"></div>
</div>
</td></tr></table>
</body>
</html>


et le CSS :

/*****  corps de page  *****/
html, body {
  margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
}

/*****  partie supérieure(titre)  *****/
.header { background-color : #FFFFFF; height : 10%; padding-left:198px; padding-right:198px; }
.headerCenter {
  background-color : #DDDDDD;
	float : left;
/*  margin-left : 2px;
	margin-right : 2px;*/
	width : 735px;
	height : 100%;
	color : #000000;	
}	  

/*****  barre horizontale  *****/
.bar {  background-color : #000000; width:1131px; height : 3%; color : #FFFFFF; }

/*****  Partie du milieu  *****/
.middle { background-color : #CC3300; height : 80%; padding-left:198px; padding-right:198px;}
.middleCenter {
  background-color : #FFFFFF;
	float : left;
/*	margin-left : 2px;
	margin-right : 2px;*/
	width : 735px;
	height : 100%;
}
	.menu {
		background-color : #336699;
		float : left;
		padding-left : 10px;
		padding-top : 10px;		
		width : 130px;
		height : 100%;
		color : #FFFFFF;
		font-family : Verdana, Arial;
		font-size : 10pt;
		font-weight : bold;		
	}
	.content {
		float : left;
		vertical-align : top;						
		width : 475px;
		height : 80%;
		color : #000000;
		font-family : Arial;
		font-size : 8pt;
		font-weight : normal;		
	}
		.content01 {
			background-color : #CCCCCC;
			text-align : center;		
			vertical-align : top;
			padding-left : 0px;
			padding-right : 0px;
			padding-top : 0px;		
			padding-top : 0px;					
		}
		.content02 {
			text-align : justify;	
			vertical-align : top;
			padding-left : 12px;
			padding-right : 12px;
			padding-top : 12px;		
			padding-top : 12px;			
			height : 10%;
		}	
	.rightNav {
		background-color : #63829C;
		float : left;
		width : 130px;
		height : 100%;
		color : #FFFFFF;
	}

/*****  partie du bas (crédits)  *****/	
.footer { background-color : #FFFFFF; height : 5%; }
.footerCenter{
/*  background-color : #1A4B7C;*/
  background-color : #333333;	
	float : left;
/*	margin-left : 2px;
	margin-right : 2px;*/
	width : 735px;
	height : 100%;
}


j'ai regardé dans quelques billets, j'ai amélioré mais pas réolu (pas encore!); un coup de main? Smiley smile
merci
Bonsoir,
Félicitation pour ton bel enthousiasme à vouloir utiliser un tableau pour la mise en page.

Tu n'as qu'un tableau dans ta page, tu pourrais aisément t'en séparer, voici entre autre pourquoi dans cette présentation: En quoi la mise en page par tableaux est-elle stupide: problématique définie, solutions offertes

Comme te le rappelais Stephan aujourd'hui tu as peut-être une tendance (bien naturelle au début Smiley cligne ) à multiplier les div, voici un article de Raphaël:XHTML : trop de <div> tue les <div> ! et aussi celui-ci:Maladies exotiques des CSS ?

Plus que tout si tu te lances dans la conception web sans détourner les tableaux de leur objectif premier de présentation de données (et non de mise en page), je te conseille encore de nouvelles lectures, en particulier ces quelques articles sur le positionnement d'Openweb et d'Alsacréations:
http://del.icio.us/Igor/cssp

Ainsi que ces quelques ressources sur les doctypes qui sont obligatoires dans les pages html et xhtml entre autres et dont ta page est exempte:
http://del.icio.us/Igor/dtd

Voilà, j'espère que la lecture ne te rebutes pas trop, car passer aux css en nécessite quelques unes. Smiley cligne

Une petite dernière pour la route, cet article de Dave Shea (traduit par Chantal Ide) qui est une série de recommandations pour passer aux standards de conception web: Un cheminement vers les standards dont je te cite un extrait:
Dave Shea a écrit :
Arrêtez ! Avant de faire quoi que ce soit, la chose la plus importante à apprendre durant votre processus est d'accepter que a) ça va prendre du temps, et b) vous allez ressentir des frustrations pendant votre cheminement.

Mais vous n'êtes pas seuls. La majorité d'entre nous, ceux qui ont fait le saut vers les standards, sont passés par les mêmes épreuves et il y a de plus en plus de documents voués à rendre vos épreuves plus faciles. Les vétérans ont dû apprendre seuls les trucs et techniques qui sont maintenant monnaie courante ; heureusement, certains d'entre nous, arrivés plus tard, peuvent profiter de leur sueur et de leurs larmes ! (...)

Modifié le 11 Jan 2005 - 19:52
merci pour tes explications Igor, je vois que je suis encore loin de toucher au but.
Aussi je reviendrai un peu plus tard, lorsque je serai plus "au point".
a bientot