[Résolu] Concernant le tuto "Design à 2 colonnes"

Bonjour à tous,

J'ai cherché sur plusieurs forums en vain. Tous mes tests ne sont pas concluants... donc je postes!

Ma question est bête : si je veux centrer le header h1 "2cols4u" dans le tuto, je fais comment? Car c'est du texte (donc on peut pas fixer de taille de width), et en plus en absolute.......

Merci d'avance....
Modifié par Skeud (20 Jun 2008 - 02:23)

Hello Skeud,

puisque le position: absolute; pose problème, il suffit de ne pas le mettre ...

Sinon, il s'agit bien de texte mais il est contenu dans la balise h1 et c'est donc sur cette dernière que tu vas pouvoir agir. Pour un simple centrage horizontal tu pourrais par exemple faire :

#header h1 {
	padding: 0;
	font: 3em Georgia, serif;
	[b]margin: auto[/b];
	[b]width: 400px[/b];   /* à adapter...  */
	[b]text-align: center[/b];
}

Pour plus d'infos, voir le tutoriel : Centrer les éléments ou un site web en CSS.

A+

Heyoan a écrit :
Hello Skeud,

puisque le position: absolute; pose problème, il suffit de ne pas le mettre ...

Sinon, il s'agit bien de texte mais il est contenu dans la balise h1 et c'est donc sur cette dernière que tu vas pouvoir agir. Pour un simple centrage horizontal tu pourrais par exemple faire :

#header h1 {
	padding: 0;
	font: 3em Georgia, serif;
	[b]margin: auto[/b];
	[b]width: 400px[/b];   /* à adapter...  */
	[b]text-align: center[/b];
}

Pour plus d'infos, voir le tutoriel : Centrer les éléments ou un site web en CSS.

A+

Non car si je ne le mets pas, ce qui se passe c'est que je peux plus mettre mon texte collé en bas.
De plus, je ne veux pas fixer de width car imagine sur un ordi où la police est grossie, ca décalera tout....

Je précise que je veux laisser le texte exactement disposé pareil au niveau vertical, je veux juste qu'en plus il soit centré horizontalement.
En espérant être clair...

Skeud a écrit :
Non car si je ne le mets pas, ce qui se passe c'est que je peux plus mettre mon texte collé en bas.

Ah oui... effectivement .

Skeud a écrit :
De plus, je ne veux pas fixer de width car imagine sur un ordi où la police est grossie, ca décalera tout....

D'où l'intérêt de mettre un width assez large pour supporter quelques agrandissements. Mais sans largeur, pas de centrage.

Skeud a écrit :
Je précise que je veux laisser le texte exactement disposé pareil au niveau vertical, je veux juste qu'en plus il soit centré horizontalement.
En espérant être clair...

Oui ! Cette fois ça y est .

Du coup tu pourrais essayer :

#header h1 {
	font: 3em Georgia, serif;
	position: absolute;
	[b]width: 400px;[/b]    /* à adapter... */
	[b]margin: 0 -200px;[/b]    /* à adapter... */
	[b]left: 50%;[/b]
	[b]text-align: center[/b];
	padding: 0;
	bottom: 10px;
}

A+
Modifié par Heyoan (19 Jun 2008 - 08:03)

Salut,

tu pourrais imposer la largeur du h1 à 100% de la largeur du conteneur principal et centrer le texte à l'intérieur :

#header h1 {
  bottom:  0;
  left:    0;
  margin:  0;
  padding: 0;
  text-align: center;
  width:   100%;
}

Heyoan a écrit :
Ah oui... effectivement .

D'où l'intérêt de mettre un width assez large pour supporter quelques agrandissements. Mais sans largeur, pas de centrage.

Oui ! Cette fois ça y est .

Du coup tu pourrais essayer :

#header h1 {
	font: 3em Georgia, serif;
	position: absolute;
	[b]width: 400px;[/b]    /* à adapter... */
	[b]margin: 0 -200px;[/b]    /* à adapter... */
	[b]left: 50%;[/b]
	[b]text-align: center[/b];
	padding: 0;
	bottom: 10px;
}

A+

Excuse moi juste pour info le margin avec valeur négative ne pose-t-il pas de problème sous IE???? je crois que j'avais lu cela qqpart mais peut-être que je me trompe.

Skeud a écrit :
Excuse moi juste pour info le margin avec valeur négative ne pose-t-il pas de problème sous IE???? je crois que j'avais lu cela qqpart mais peut-être que je me trompe.

Peut-être dans le lien que je t'avais donné plus haut et qui parle d'Explorer Mac ?

De toute façon la version proposée par Thomas est plus intéressante puisqu'en l'occurrence on ne verra pas les bordures du conteneur du texte (h1) et qu'il est donc inutile de le centrer. Il suffit donc effectivement de centrer le texte avec un simple text-align:center; !

Ok je testes la soluce de Thomas dès que je rentre. Même si il me semble que je ne pourrais pas mettre le titre collé en bas (idem que proposé dans ta premiere soluce) mais bon je verrais ca...

Skeud a écrit :
Même si il me semble que je ne pourrais pas mettre le titre collé en bas (idem que proposé dans ta premiere soluce) mais bon je verrais ca...

Le code était un exemple mais tu peux faire :

#header h1 {
	font: 3em Georgia, serif;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10px;
	text-align: center;
	width: 100%;
	left: 0;
}

Heyoan a écrit :
Le code était un exemple mais tu peux faire :

#header h1 {
	font: 3em Georgia, serif;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10px;
	text-align: center;
	width: 100%;
	left: 0;
}

Et bien voilà!!! Merci beaucoup Heloyan!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
En fait je pensais qu'on pouvait pas mettre du absolute avec du pourcentage...je croyais avoir déjà testé cette solution mais en fait non...
En tout cas, encore une fois merci à tous et surtout à Alsacréations

Skeud a écrit :
Et bien voilà!!! Merci beaucoup Heloyan!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Euh... C'est qui ça Heloyan ?
De toutes façons tu voulais sûrement dire "Merci Thomas!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!" je suppose !


Est-ce que cela veut dire que tu considères ce sujet comme [Résolu] ?
Modifié par Heyoan (20 Jun 2008 - 02:21)

Oups désolé......merci à vous 2 dans tous les cas.
Et re-oups j'oublie encore de mettre RESOLU!!!!

Bye et merci bien