18041 sujets

Questions générales et questions de débutants

Tutoriel deux colonnes

Bonjour,

en parfait amateur,
J'ai plusieurs remarques à vous soumettre au sujet de ce tutoriel.

D'une part, il me semble y avoir une erreur dans la définition des zones flottantes;
elles sont déclarées, l'une «left», l'autre  «right» alors qu'elles devraient avoir le même positionnement.

D'autre part, pourquoi avoir défini deux colonnes «flottantes» et non pas une fixe et l'autre flottante ?

Quel est l'intérêt recherché ?
Modifié par David Marec (03 May 2009 - 20:02)
David Marec a écrit :
D'une part, il me semble y avoir une erreur dans la définition des zones flottantes;
elles sont déclarées, l'une «left», l'autre  «right» alors qu'elles devraient avoir le même positionnement.

Il y avait d'autres solutions, mais avoir une colonne en float:left et l'autre en float:right est une solution valide. Il ne s'agit donc pas d'une erreur.

Si les deux colonnes avait été en float:left, il aurait fallu jouer sur du margin ou du padding pour créer l'écart entre les deux colonnes. Ici, en définissant deux largeurs dont le total est inférieur à la largeur du parent, et en faisant flotter chaque colonne d'un côté différent, on retrouve l'écart voulu sans avoir à passer par ce type de mécanisme. Mais ça serait une solution correcte également.

David Marec a écrit :
D'autre part, pourquoi avoir défini deux colonnes «flottantes» et non pas une fixe et l'autre flottante ?

Le terme n'est pas «fixe» mais simplement «non flottante». À moins que tu ne veuilles parler du positionnement fixe, mais je doute que ce soit le cas ici.

On peut effectivement faire flotter uniquement le premier élément, et restreindre la largeur du second avec une marge latérale ou en utilisant un contexte de formatage. Ce serait aussi une solution correcte.

David Marec a écrit :
Quel est l'intérêt recherché ?

Choisir une solution parmi les 4-5 variantes possibles dans l'utilisation du positionnement flottant pour créer deux «colonnes».
Florent V. a écrit :

Il y avait d'autres solutions, mais avoir une colonne en float:left et l'autre en float:right est une solution valide. Il ne s'agit donc pas d'une erreur.


Je pointais surtout sur la différence entre le texte explicatif et le code qui l'accompagne.

a écrit :

On peut effectivement faire flotter uniquement le premier élément, et restreindre la largeur du second avec une marge latérale ou en utilisant un contexte de formatage. Ce serait aussi une solution correcte.


Oui, pour me familiariser avec les différentes techniques, j'ai testé les méthodes que vous citez.
Même si le résultat semble identique, ma question porte surtout sur la pertinence de chaque technique selon les cas.
David Marec a écrit :
Je pointais surtout sur la différence entre le texte explicatif et le code qui l'accompagne.

Il y a effectivement une erreur dans le texte qui introduit le code.

David Marec a écrit :
Même si le résultat semble identique, ma question porte surtout sur la pertinence de chaque technique selon les cas.

Difficile de dire à l'avance quelle variante sera pertinente dans quel cas. Les différences ne sont pas énormes et dans l'absolu ces techniques se valent, même s'il peut y avoir des subtilités.

Il y a un cas où on n'utiliser qu'un seul flottant: quand une seule des deux colonnes a une largeur déterminée, l'autre prenant l'espace restant. Voir par exemple: http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html
Administrateur
Florent V. a écrit :

Il y a effectivement une erreur dans le texte qui introduit le code.

En effet, merci d'avoir signalé cette coquille. Je viens de la corriger.
Bonjour,

je suis assidûment ce tuto et j'en suis à l'étape 3 "couleurs et images de fond". De mon côté, j'ai un petit problème avec le pied de page qui déborde sur la droite de quelques pixels comme on peut le voir ici

Si quelqu'un veut y regarder de plus près, je laisse ci-dessous le fichier css et je précise que j'utilise Firefox mais le même problème apparait sous IE.

Merci à celles et ceux qui se pencheront sur mon problème
Olivier

le fichier .css est :

html, body
{
	height: 100%;
	margin: 0;
	background: #ddd url(fondcarbone.gif);
}

#global
{
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url(global.png) center repeat-y;

}

#header
{
	background: #7fcf2e url(header1.jpg) no-repeat;
	color: #fff;
	height: 201px;
}

#header h1
{
	margin: 0;
}

#center
{
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: auto;
}


#content
{
	float: left;
	width: 530px;
}
#sidebar
{
	float: right;
	width: 200px;
}


#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	background: #7fcf2e url(img/footer.png) repeat-x;
	color: #fff;
	}
Salut,

c'est normal puisque tu as width: 100%; au lieu de width: 750px;.

Le 100% se réfère donc à #global qui fait 750px + 20px (padding) soit 770px. Lire le modèle de boîte.

Sinon, la prochaine fois ouvre ton propre sujet. Smiley cligne
ok merci, y'a donc une petite erreur dans le tuto...et désolé, je pensais justement que c'était mieux d'utiliser un topic traitant du même tuto. Promis, on ne m'y reprendra plus Smiley cligne

@+
Olivier
diaboliv a écrit :
ok merci, y'a donc une petite erreur dans le tuto...
Ah ben oui tiens... Merci pour l'info.
diaboliv a écrit :
je pensais justement que c'était mieux d'utiliser un topic traitant du même tuto

Il est vrai que c'est la pratique mise en avant sur nombre de forums. C'est en partie le cas sur Alsacréations, mais avec quelques nuances (de taille):

1. Pour traiter d'un sujet en général, et pour peu que ce sujet soit assez précis (ex: «Publication du RGAA» est précis, «Accessibilité» est imprécis et d'ailleurs il y a un salon dédié à ça), il vaut mieux avoir un sujet unique que l'on peut enrichir au fur et à mesure.

2. Cependant, la plupart des sujets créés sur ce forum ne sont pas des discussions générales, mais des remarques précises et surtout des demande d'aide sur un problème précis. Et il est difficile de traiter des demandes différentes, par des personnes différentes, dans un même sujet. Même si ça porte sur le même sujet général, ou un même tutoriel, chaque demande est unique.

3. Lorsque deux demandes se rencontrent dans un sujet, on risque fort de se retrouver avec deux discussions en parallèle: «Machin, peux-tu nous montrer une page en ligne avec ton problème?», «Bidule, je pense que tu devrais utilise le positionnement flottant plutôt que le positionnement absolu», «Machin, euh non ce message et cet exemple de code ne s'adressaient pas à toi», etc.

4. Enfin, les demandes d'aide sont à classer en «[Résolu]» lorsqu'elles aboutissent. Et seul la personne qui a créé le sujet (ou un modérateur) peut le faire. Et que faut-il faire si un même sujet regroupe des demandes A, B et C? Attendre que les trois aboutissent pour classer en résolu?
Et pour cette deuxième erreur dans le tutoriel (finalement, on rejoint le sujet de départ Smiley cligne ), voici la version actuelle (capture d'écran):

http://dl.getdropbox.com/u/145744/screens/alsa-designcss2-piedpage-avant.png

Et voici la correction proposée (capture d'écran itou):

http://dl.getdropbox.com/u/145744/screens/alsa-designcss2-piedpage-apres.png

Je laisse donc les autorités compétentes (avec accès au FTP) s'en charger. Smiley cligne

Je précise les corrections proposées:
- correction de l'erreur sur la largeur (100% n'est pas utilisable ici);
- on précise un left:10px car ça peut aider IE6-7, qui buguent souvent sur le positionnement latéral d'un élément positionné en absolu (problème revenu plusieurs fois sur le forum au sujet de sites créés à partir de ce tutoriel);
- le changement dans le paragraphe d'info est pédagogique, on fait référence au coin inférieur gauche plutôt que supérieur gauche, vu que c'est ce coin qui, un peu plus haut dans le code proposé, est utilisé comme référence.

La première correction est indispensable, les deux suivantes sont à la discrétion du correcteur final.
Modifié par Florent V. (08 May 2009 - 21:08)
Sujet clos
Aller à