Mise en page en CSS sans tableau

[francoisch]

Bonjour

Je travaille à mettre en page :

9 cellules : certaines contiennent du texte, dautres une image

réparties en 3 lignes * 3 colonnes

en CSS sans tableau

Pour chaque ligne, je fais une Div conteneur ; dans chaque conteneur, je place trois Div : gauche, centre, droit, toutes en float left.

Plusieurs problèmes :

le contenu de chaque cellule est cadré en haut de la cellule : je ne sais pas comment le centrer en hauteur

question: comment faire pour centrer le contenu ?

les dimensions :

pour les Div, jai mis width : 33%

pour les photos insérées avec

<img src="r_cafeteria.JPG" alt="la cafeteria" align="middle" style="width: 240px; height: 160px;">

je narrive pas à exprimer leurs dimensions autrement quen pixels

au total, ça me paraît gênant dexprimer certaines dimensions en % et dautres en pixels

question: comment faire pour tout exprimer en % pour prendre en compte différentes résolutions ?

Merci par avance de votre aide pour résoudre ces deux problèmes.

Francois

[compta]

question: comment faire pour centrer le contenu ?

Créer une Div qui va contenir tous le contenu de la page et centrer son contenu

Exemple :

<div align="center">Le contenu de la div qui peut être soit du texte des div des tableaux...</div>

[captain_torche]

Il serait surtout intéressant de savoir pourquoi tu veux utiliser des divs.

Si tu as besoin de présenter tes données de manière tabulaire, un tableau semble tout de même la meilleure des solutions.

Si tu souhaites t'affranchir des tableaux pour ta mise en page, tu as encore une approche trop centrée "tableaux".

Pourrais-tu décrire plus ce que tu souhaites obtenir ?

[francoisch]

bonjour Compta et merci de ta réponse.

Mon problème est de centrer en hauteur, pas en largeur qui me paraît être l'objet de ta réponse.

Si tu as un moyen pour ce centrage là, merci par avance.

Francois

[francoisch]

bonjour Captain

Oui, j'essaie, un peu pour voir, de me passer de tableau et, Oui, je suis encore dans cette perspective de la mise en page en tableau.

En gros, je veux mettre en page 9 pièces qui sont, soit un texte, soit une image.

Un objectif est aussi d'arriver à une mise en page qui s'adapte aux différentes résolutions, autant que possible.

Suivant la résolution, je fais varier les dimensions des Div, avec le %; j'essaie actuellement de faire varier la dimension des images.

Ensuite, la question suivante est de savoir comment positionner ces 9 pièces.

Créer un seul conteneur? comment arriver à placer mes pièces dans le conteneur, sans utiliser de dimensions en pixels?

En espérant avoir présenté mon sujet correctement.

Merci par avance de tes suggestions.

Francois

[captain_torche]

J'ai encore du mal à me situer avec tes "9 pièces". Pourrais-tu faire un schéma de ce que tu souhaites obtenir ?

Si ces 9 pièces sont disposées en trois lignes et trois colonnes, un tableau fera parfaitement l'affaire.

Ses cellules auraient des dimensions hauteur/largeur de 33%, et tu adapterais de même la hauteur/largeur du tableau (100% si tu veux qu'il prenne toute la page).

[compta]

Pour t'aider voici un lien :

-http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Il parle à la fin du centrage vertical

[francoisch]

Compta

Après plusieurs essais, je spécifie:

#centre4 {
float:left;
text-align: center; 
position:relative;
}

et ça cadre pas mal en largeur et en hauteur.

Merci de ton aide.

-------------------------------------------------------------------------------------------------

Compta, merci de ta réponse.

J'y suis allé voir; apparement, pour IE7, il n'y a pas de solution hormis d'utiliser une table.

Merci encore.

Francois

Modifié 11 Décembre 2007 par francoisch

[francoisch]

Voila, je progresse avec, dans ma page, après le Link à la CSS:

<script language="JavaScript" type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var widthimage = Math.floor(width/4);
var heightimage = Math.floor(widthimage/3*2);

document.write('<script type="text/javascript" '
 + 'src="style0.php?parm1=' 
+ widthimage 
+ '&parm2='
+ heightimage
+ '">' 
+ '</'+'script>');
</script>

(les valeurs widthimage et heightimage sont correctement calculées) et dans style0.php:

<?php
/* reprise en PHP des variables HTML */
$widthimage=$_GET['parm1'];
$heightimage=$_GET['parm2'];

// source: http://sperling.com/examples/pcss/>
header("Content-type: text/css");

$hauteurfront= "120";	 

etc ....

echo <<<CSS

/* --- start of css --- */

etc........

/* --- dimension des images --- */
#image1 {width: $widthimage; height: $heightimage; background-color:#333399; }

/* --- end of css --- */
CSS;
?>

Je progresse car la couleur background que j'ai mise là comme révélateur apparaît bien à l'affichage.

Par contre les images n'apparaissent pas encore, faute probablement d'avoir des dimensions (widthimage et heightimage).

Il me reste peu à trouver.

Merci par avance de votre aide.

Francois

--------------------------------------------------------------

J'ai mis un autre révélateur au début de style0.php:

$widthimage=201;
$heightimage=134;

et mes images affichées ont bien ces dimensions.

Ca confirme que style0.php est bien appellée par:

document.write('<script type="text/javascript" language="JavaScript" src="style0.php?parm1=widthimage&parm2=heightimage"></script>');

Ca semble confirmer aussi que les deux paramètres parm1 et parm2 ne passent pas.

Pourquoi?

Celui qui me le dira aura gagné (rien sinon mes remerciements).

Par avance merci de votre aide.

Francois

Modifié 11 Décembre 2007 par francoisch

[djp1988]

je pense que j'ai ma solution