28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens de réaliser un site avec une mise en page centrée de 960px de large. Tout est parfait sous une résolution de 1024. Seulement, quand on est en 800x600, la page est reste centrée et coupe une partie du texte.

le site en question est www.abolition.fr

Qui d'entre vous à une idée sur la méthode la plus simple à adopter pour régler ce souci ?

Merci d'avance.
Modifié par themoz (22 Jan 2007 - 17:22)
Administrateur
Hello et bienvenue,

Comme tu t'en doutes, les membres vont avoir du mal à deviner comment tu as procédé et donc comment t'aider. Rare sont ceux qui vont décortiquer le code de la page, surtout si l'url n'est pas fonctionnelle car tu l'as écrite sans tenir compte des règles du forum.

As-tu utilisé les marges latérales automatiques ou un centrage "barbare" en position absolue ?
Si c'est la seconde solution, ton problème est effectivement normal. Cette solution est à éviter !

Pour rappel, le tutoriel sur le centrage
Modifié par Raphael (22 Jan 2007 - 16:39)
Désolé pour l'URL.

L'URL du site est donc http://www.abolition.fr/ecpm/index.php
L'URL de la feuille de style est : http://www.abolition.fr/ecpm/css/ecpm.css

J'ai utilisé la position "absolute" pour centrer mon container de 900px de large.
Style du container

#container {
	position: absolute;
	top: 0px;
	left: 50%;
	margin: 0px 0px 0px -450px;
	width: 900px;
}


Je pensais que ce systeme s'adapterait aux autres résolutions avec un scroll en bas de page.

En fait, c'est ma marge de -450px qui pose souci ? Si elle était de -400 elle serait mieux prise en compte ?
Modifié par themoz (22 Jan 2007 - 17:21)
Administrateur
themoz a écrit :
J'ai utilisé la position "absolute" pour centrer mon container de 900px de large.
Je te conseille très vivement de changer de méthode de centrage (cf tutoriel sus-cité).

themoz a écrit :
Je pensais que ce systeme s'adapterait aux autres résolutions avec un scroll en bas de page.
Non justement, le centrage en position absolue empêche le scroll, contrairement à celui des marges latérales automatiques.

themoz a écrit :
En fait, c'est ma marge de -450px qui pose souci ? Si elle était de -400 elle serait mieux prise en compte ?
Non non, c'est la méthode de centrage en elle-même qui pose problème.
J'ai fait un test avec qq changements dans le style

#container {
	position: absolute;
	top: 0px;
	left: 49%;
	margin: 0px 0px 0px -385px;
	width: 900px;
}

Le résultat est plus ou moins corrects temporairement.

Dans le tutoriel, on parle d'une methode avec des marges relatives, mais celle-ci n'interprète pas les positions absolute ensuite, si je comprends bien. Donc je suis bloqué ?
Modifié par themoz (22 Jan 2007 - 17:22)
Administrateur
Attention à bien écrire tes codes conformément à ce qui est attendu sur le forum (relire les Règles s'il le faut) Smiley cligne

a écrit :
Le résultat est plus ou moins corrects temporairement.
Tant que ton container sera positionné en absolu, cela ne peut pas fonctionner.

a écrit :
Dans le tutoriel, on parle d'une methode avec des marges relatives, mais celle-ci n'interprète pas les positions absolute ensuite, si je comprends bien. Donc je suis bloqué ?
Non tu n'es pas bloqué, sauf si tu n'as pas lu tout le tutoriel.

La partie "Cas des éléments positionnés." explique comment faire pour centrer à l'aide de marges automatiques un site contenant des éléments en position absolue.
Finalement, après relecture et test, je viens de modifier mon style et cela semble bien fonctionner.


#container {
	position: relative;
	margin: 0px auto 0px auto;
	width: 900px;
}

Merci à vous
Modifié par themoz (22 Jan 2007 - 17:22)
Administrateur
themoz a écrit :
Finalement, après relecture et test, je viens de modifier mon style et cela semble bien fonctionner.
Merci à vous

Voilà c'est exactement ça.

Par contre, attention à la rédaction des codes sur ce forum (seconde édition) et comme les règles t'y invitent, merci de bien vouloir marquer ton sujet comme [Résolu] si tel est le cas Smiley cligne