28173 sujets

CSS et mise en forme, CSS3

3 colonnes, 2 colonnes voire 1 colonne

Bonjour à tous,

J'ai découvert il y a environ 2 semaines les superbes possibilités offertes par le XHTML et le CSS.

J'avais toujours codé mes sites en HTML 4 et php avec des tableaux pour la mise en forme.

Voilà pour le passé...

Parlons maintenant du présent puisque je me suis entrepris à faire passer mon site des tableaux au XHTML/CSS.
Et je rencontre malheureusement d'énormes difficultés.

J'ai écumé la FAQ, le forum, pleins d'autres forum, des sites en anglais, même en espagnol ! Et je n'ai pas trouvé la réponse que je cherchais !!

Si ça continue je vais finir par retourner aux tableaux !! Smiley cligne

Voici mon problème :

La mise en page de mon site est complètement dynamique.
Elle se compose :
- d'un conteneur général qui contient :
- d'un header
- d'une colonne de gauche (menu avec width=20%)
- d'une colonne au cente (qui va contenir le corps du site, prend la largeur restante)
- d'une colonne de droite (menu menu avec width=20%)
- d'un footer

Jusque là, tout va à peu près bien...

Ces 5 "cadres" (on va les appeler comme cela) sont gérés en BDD.
Une fonction php permet de me ramener les cadres actifs (car certains peuvent être inactifs).

Ainsi, un utilisateur ayant des droits suffisants, peut "désactiver" le menu de droite par exemple.
J'aimerais donc que le cadre de gauche, ben reste à gauche, et que la colonne centre s'étende en largeur jusqu'au bout du conteneur général.

De même, si on désactive aussi le menu de gauche, il faudrait que la colonne du centre fasse la largeur max du conteneur général.

Auriez-vous une idée sur le "Comment faire cela ?"

En effet, j'ai essayé avec plein de truc : float, absolute, fixe...
Je n'y arrive pas !

Merci d'avance pour votre aide !
Administrateur
oVa a écrit :
J'aimerais donc que le cadre de gauche, ben reste à gauche, et que la colonne centre s'étende en largeur jusqu'au bout du conteneur général.

De même, si on désactive aussi le menu de gauche, il faudrait que la colonne du centre fasse la largeur max du conteneur général.

Hello et bienvenue,

En fait, il suffit tout simplement de ne pas imposer de taille à un bloc pour qu'il occupe toute la largeur restante.

Tu devrais donc régler ton problème avec :
- un bloc droit flottant et dimensionné
- un bloc gauche flottant et dimensionné
- un bloc central non dimensionné qui s'adaptera

Bonne chance Smiley smile
Salut et merci pour ta réponse ultra rapide !

Je m'attendais un peu à cette réponse car c'est effectivement la seule solution qui me paraissait la plus convenable...

Toutefois, je bute sur pas mal de problèmes avec cette solution et notamment celui-ci :
- si le texte contenu dans le cadre "centre" est long, il passe "sous" le menu de gauche et/ou sous le menu de droite !

J'ai lu pas mal de sujet à propos des colonnes qui s'adaptent au centre et la seule solution qui me convenait (je ne souhaite pas utiliser d'images en repeat-y) était l'utilisation du 
display:table-cell


Un peu comme les tableaux quoi...? Smiley langue

Seulement cette technique ne fonctionne pas sous IE !! Donc pas correct !

Y aurait-il un moyen simple que le texte du "cadre" centre ne passe pas "sous" le menu de gauche et/ou sous le menu de droite ??
oVa a écrit :
- si le texte contenu dans le cadre "centre" est long, il passe "sous" le menu de gauche et/ou sous le menu de droite !

Il est extraiment difficile de resoudre un tel problème sans avoir une page ou l'on peut voir le problème et le code associé.

Néanmoins, le remarque que tu fait me laisse présager que tu ne doit pas correctement te servir du flux HTML pour arriver à ce que tu veux. (mais sans code, difficile de le vérifier)


a écrit :
je ne souhaite pas utiliser d'images en repeat-y

Et pour quoi donc ? Cette technique est très efficasse pour masquer la différence de hauteur réel des colones !

Enfin, si tu veux, tu peut t'inspirer de ces techniques de mise en page :
> http://positioniseverything.net/articles/onetruelayout/equalheight

Note, dans le cadre d'une gestion dynamique de l'interface, tu peut aussi envisager de gérer tes CSS dynamiquement en fonctions de tes paramètres.
Bon...effectivement, sans code, c'est pas gagné !

Voici mon code php/XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre de ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $_ROOT_PATH . "design/theme/default/style.css"; ?>" />
</head>

<body>

<div id="globalsite">

<?php
// Ma requête
$result_cadr = $_MYSQL->query("SELECT * FROM CADRES WHERE cadr_actif='1' order by cadr_order";);

// On boucle
while ($row_cadr = $result_cadr->fetch_array(MYSQL_ASSOC)) {

        // Je déclarer chaque div avec le nom du cadre
	echo "<div id=\"" . $row_cadr["cadr_nom"] . "\">";

	<?php 
	// Si le fichier existe, j'appelle la page qui porte son nom
	if (file_exists($_ROOT_PATH . "design/" . $row_cadr["cadr_nom"] . ".php")) {
	   include_once($_ROOT_PATH . "design/" . $row_cadr["cadr_nom"] . ".php");
	}
	else {
		echo $erreur;
	}

        // je ferme chaque div
	echo "</div>";
}

</div>
</body>
</html>


Ma table CADRES est structurée comme ceci :
- cadr_id : id du cadre
- cadr_nom : nom du cadre. Sera utilisé pour nommé le div
- cadr_activ : 0 si inactif, 1 si actif
- cadr_order : permet de gérer l'ordre d'arrivée dans la boucle des cadres

Mes données sont :
1, header, 1, 1
2, menu_left, 1, 2
3, menu_right, 1,3
4, center, 1, 4
5, footer, 1, 5

Et enfin, voici mon code CSS :

html, body {
   	width:100%;
	margin: 0 auto;  /* pour éviter les marges */
	padding: 0 auto; /* pour éviter les marges */
        text-align:center;
        background-color:#99CCFF;
        font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	line-height:150%; /* espace entre les lignes */
}

#globalsite {
	width: 760px;
	\width: 780px; /* Hack */
	w\idth: 760px; /* Hack */
	margin: 0 auto;
	padding:0 auto;
        text-align: left; /* on rétablit l'alignement normal du texte */
        background-color: #FFFFFF;
        border: 2px solid black;
}

#header {
	clear: both; /* Pour être sur quez les float n'empietent pas ! */
   	margin:0 auto;  /* On centre */
  	background-color:#0099FF;
   	border: 1px solid black;
   	text-align:center;
}

#menu_left {
	float:left;
	width: 20%; /* Très important : donner une taille au menu */
	margin:0 auto;
	padding:5px;
	background-color:red;
        border: 1px solid black;
        text-align: left;
}

#menu_right {
	float:right;
	width: 20%; /* Très important : donner une taille au menu */
	margin:0 auto;
	padding:5px;
        background-color: green;
	border: 1px solid black;
        text-align: left;
}

#center {
	margin:0 auto;
	padding:5px;
	background-color:yellow;
        text-align: left;
        border: 1px solid #0066CC;
}

#footer {
	clear:both;
   	width: 100%;
   	background-color: #CC6699;
   	border: 1px solid black;
   	text-align: center;
}


Et voici le résultat :

upload/5195-ScreenShot.jpg

Jep a écrit :
Et pour quoi donc ? Cette technique est très efficasse pour masquer la différence de hauteur réel des colones !

Car l'utilisateur peut redimensionner un des menu s'il le souhaite !
Ce n'est pas possible avec une image de taille fixe, n'est-ce pas ?

Pour le lien que tu m'as donné, je vais regardé ça...


Jep a écrit :
Note, dans le cadre d'une gestion dynamique de l'interface, tu peut aussi envisager de gérer tes CSS dynamiquement en fonctions de tes paramètres.

Comment fais-tu cela ? As-tu des exemples ?


bbp a écrit :
Utilise donc le positionnement absolu, tu définiras ainsi explicitement les tailles des blocs et tu peux les positionner en 3 colonnes.

J'ai déjà essayé ! Mais vu que ma gestion des cadres est dynamique, cela ne marche pas...
Ou alors je m'y prends mal ?


papillon41 a écrit :
Bonjour,
As tu regardé dans : Modeles-de-mise-en-page-en-CSS
Tu vas sûrement trouver un gabarit pour un point de départ.

Oui, j'ai déjà regardé ces gabarits mais ils sont basés sur des marges fixes défnies dans le center :

#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}

Or, si je désactive, le cadre gauche, il restera une marge inutilisée.
Es-tu d'accord ?


Merci d'avance pour votre aide !

Vous êtes super sympa de vous intérésser à mon problème ! Smiley biggrin
Modifié par oVa (15 Feb 2006 - 21:30)
Jep a écrit :

Enfin, si tu veux, tu peut t'inspirer de ces techniques de mise en page :
> http://positioniseverything.net/articles/onetruelayout/equalheight


Re,

J'ai fait quelques tests en prenant le code de cette page :
http://positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix

Cela règle le problème des colonnes ajustées à la colonne la plus haute.

Seulement, si je mets en commentaire le div de la colonne de gauche (ce qui se passera sur mon site si je passe le cadre à l'état "désactiver"), le block 1 ne s'étend pas vers la gauche.

Voilà ce que ça donne :
upload/5195-ScreenShot2.jpg

Merci d'avance si tu as d'autres idées...
Modifié par oVa (15 Feb 2006 - 21:31)
C'est à dire "la gestion des cadres est dynamique"? Tu peux redéfinir n'importe quand n'importe quelle propriété CSS en Javascript.
bbp a écrit :
C'est à dire "la gestion des cadres est dynamique"? Tu peux redéfinir n'importe quand n'importe quelle propriété CSS en Javascript.


C'est à dire qu'on peut "activer" ou "désactiver" n'importe quel cadre.
Ce n'est pas fait en javascript (language que je hais d'ailleurs !!) mais en php puisque je récupère via une requête les cadres actifs.

Ensuite, il serait effectivement possible de chercher une solution dans la réécriture du fichier css (lecture / écriture de fichier en php) mais je cherche quelque chose de bcp plus souple si c'est possible...?
Modifié par oVa (15 Feb 2006 - 15:31)
Pour le problème du texte central qui vient se mettre sous le menu de gauche... il suffit d'avoir tout le contenu central dans un seul et même bloc (une div, a priori)...

<div id="gauche"></div>
<div id="droite"></div>
<div id="contenu">
	<h2>...</h2>
	<p>...</p>
	<p>...</p>
</div>
bonjour,

je sais que le sujet date de qq temps mais j'ai été confronté au même problème dont j'ai trouver une solution.
quest ce que j'ai fait?ahahah
1°j'ai sorti les info margin de mon css(tu devras mettre un max et un min)
2°comme tu boucle chaque colonne pour afficher les "bloc" il te suffit de vérifié si il y en a (mysql_num_rows) si il n' y en a pas tu cache le div sinon tu entre.
ex Smiley decu simpliste)

$requete=mysql_query("....");
$nb=mysql_num_rows($requete);
if($nb!=0){
<div id='colonne gauche'>
while($result=mysql_fetch_array){
</div>

}

}
zut j'ai appuyer sur le bouton et j'avais pas vraiment fini
dans tes div (droite ou gauche ç le mm principe)
tu définis des largeurs min et max que le div centre peux prendre si les colonne de gauche existe ou pas.
ensuie tu met un style margin au div centre.
Voilà je peux t'envoyer un code mais je dois d'abord nettoyer pour ne garder que l'essentiel.
si tu est interresser fait le savoir
à bientot
Après de longs mois passés sans mon PC, je me suis remis au dev et je serais très heureux de pouvoir avoir ta solution si ta proposition tiens toujours !
Sujet clos
Aller à