28173 sujets

CSS et mise en forme, CSS3

Bonjour,
J'aimerai savoir s'il est possible de faire un site en deux colonnes, celle de gauche en pourcentage et celle de droite en pixel.
La taille totale des deux colonnes devant faire 99% de la largeur d'affichage...

En gros... :

#content{
	width:99%;
	margin:0 auto 0 auto;
}
#gauche{
	width:*;
	float:left;
	border-left:1px solid #fdd;
}
#droite{
	width:300px;
	float:left;
}


<div id="content">
	<div id="gauche">
		Contenu a largeur variable
	</div>
	<div id="droite">
		Contenu a largeur fixe de 300px.
	</div>
</div>


Pouvez-vous m'aider ??

Merci!!
Nicolas. Smiley smile
Modifié par Seraph (20 Feb 2007 - 11:48)
Bonjour,

Le plus simple serait de faire flotter ta colonne de droite et de laisser le contenu dans le flux en lui attribuant une marge supérieure ou égale à la largeur de la colonne fixe.

En pratique, on obtient par exemple quelque chose comme ceci:

[#black][b]HTML[/b][/#]
<div id="droite">
...
</div>

<div id="content">
...
</div>


[#black][b]CSS[/b][/#]
body {width:98%; margin:0 auto;}
#content {margin-right:300px;}
#droite {float:right; width:300px;}
Je me suis cassé la tete pour ca et en relisant ta solution je me suis rendu compte que c'est ce que j'avais deja fait hier pour une autre colonne... Smiley biggol
Quel idiot... Smiley bawling


Merci Benjamin!!
Benjamin D.C. a écrit :
Bonjour,

Le plus simple serait de faire flotter ta colonne de droite et de laisser le contenu dans le flux en lui attribuant une marge supérieure ou égale à la largeur de la colonne fixe.


De manière plus robuste, remplacer la marge du flux par un contexte de formatage.
Laurent Denis a écrit :
De manière plus robuste, remplacer la marge du flux par un contexte de formatage.

J'ai déjà posé la question ailleurs, mais pourquoi plus robuste ?
L'utilisation d'un contexte de formatage est fonctionnelle, mais impose un correctif pour les IE 6 et inférieurs, non ?
Seraph a écrit :
Je me suis cassé la tete pour ca et en relisant ta solution je me suis rendu compte que c'est ce que j'avais deja fait hier pour une autre colonne... Smiley biggol
Quel idiot... Smiley bawling


Merci Benjamin!!
Pas de quoi! Smiley cligne

Sinon, tout comme Florent, j'aimerais savoir en quoi l'utilisation d'un contexte de formatage serait plus fiable? Je ne vois pas bien...
Le colonnage obtenu par un contexte de formatage est indépendant de la largeur et de la présence des colonnes, tout simplement.

Dans une architecture un tant soit peu complexe, où des menus contextuels peuvent être présents dans certaines pages seulement, la gestion et la mutualisation des styles est considérablement simplifiée.
Modifié par Laurent Denis (20 Feb 2007 - 16:51)
Laurent Denis a écrit :
Le colonnage obtenu par un contexte de formatage est indépendant de la largeur et de la présence des colonnes, tout simplement.

Ah oui, pas idiot ça.
Maintenant que j'y pense, ça permet aussi de gérer de manière plus souple l'écart entre les colonnes si celles-ci sont dimensionnées en pourcentages.

Reste la question du contexte de formatage dans IE6 et inférieurs. Il faudra utiliser le HasLayout pour émuler le comportement d'un contexte de formatage, si je ne m'abuse ? Par contre, rien à corriger pour IE7.
Florent V. a écrit :
Il faudra utiliser le HasLayout pour émuler le comportement d'un contexte de formatage, si je ne m'abuse ?


Oui, bien-sûr. Ce qui n'a rien de problématique.

<edit>Les questions de mutualisation des CSS sont nettement "plus cruciales" (sic) que les détails de technique de gestion d'IE dans les choix de ce type.</>
Modifié par Laurent Denis (20 Feb 2007 - 19:01)
Florent V. a écrit :

Maintenant que j'y pense, ça permet aussi de gérer de manière plus souple l'écart entre les colonnes si celles-ci sont dimensionnées en pourcentages.


Disons que l'écart est géré par l'élément en marge, et non plus par l'élément de contenu principal. Et indépendament des largeurs respectives. Ce qui simplifie en effet les choses.