28173 sujets

CSS et mise en forme, CSS3

[Resollu] Installer une marge minimum si la page est réduite.

Bonjour déjà !
J'ai un petit problème.
J'ai centré le contenu de ma page qui à une largeur fixe. Et j'ai mis une image répété horizontalement sur la gauche de la page.
Lorsque la page du navigateur est réduite, le contenu de la page vient s'afficher au dessus de l'image.
Je voulais donc attribuer une largeur minimum évitant que du texte soit superposé à l'image si le navigateur est réduit, tout en gardant le contenu centré si le navigateur est en fenètre normale.
Je n'ai pas trouvé de solution. Peut être me manque-t-il des informations sur la balise necessaire.

Merci de m'aider si vous le pouvez à résoudre ce problème.

PS : Vous pouvez me trouver au bout du mail si vous le souhaitez. Smiley cligne
Merci encore, à bientôt !
Modifié par RoRtO (12 Feb 2006 - 22:20)
la propriété qui permet de mettre une largeur minimum existe c'est
Pour une largeur minimum => min-width
Pour une largeur max => max-width

Le probleme a l'heure actuel avec cette propriété c'est que IE ne la comprend pas, je sais que pour firefox ca marche normalement, pour les autres navigateur je sais pas....

tu peu essailler cette method qui marche chez moi
http://www.svendtofte.com/code/max_width_in_ie/

++

Voila

Smiley cligne
HTML :
<body>
	<div id="page">
	...
	</div>
</body>

CSS :
body {
	padding: 0 100px;
	text-align: center;
}
div#page {
	margin: 0 auto;
	text-align: left;
}

Et voilà le travail.
L'espace réservé, ce sont les paddings gauche et droite de l'élément body. Tout le reste, c'est une histoire de centrage horizontal de la page.

Si, pour centrer ta page, tu avais utilisé la technique des marges négatives, je te conseille plutôt celle ci-dessus.

Tuto Alsacreations sur le centrage des éléments :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Hmm... StyleSho et moi n'avons pas compris la même chose à partir de ta description. Tu n'aurais pas un exemple en ligne ?
mpop a écrit :
Hmm... StyleSho et moi n'avons pas compris la même chose à partir de ta description. Tu n'aurais pas un exemple en ligne ?


ah ...

c'est peu etre moi qui est mal compris Smiley lol je suis parti du principe qu'il avait eu le meme probleme que j'ai eu a un certain moment...

Rorto si tu pouvais preciser ca serait simpa Smiley biggrin
Beinh, voila mon site : http://kikikatchou.free.fr/index_v0.3.php
J'ai la marge fixé à 80px là, et donc le centrage désactivé.
Ce que je voudrais, c'est donc une marge minimum de 80px quand la page est réduite, comme la page actuelle en fait, mais juste quand le navigateur est réduit.
Et une page et le text centré quand la page du navigateur est agrandie.
Voilà, j'espère que ça ira mieu avec l'exemple de mon site.

Merci d'avance.
RoRtO a écrit :
Beinh, voila mon site : http://kikikatchou.free.fr/index_v0.3.php
J'ai la marge fixé à 80px là, et donc le centrage désactivé.
Ce que je voudrais, c'est donc une marge minimum de 80px quand la page est réduite, comme la page actuelle en fait, mais juste quand le navigateur est réduit.
Et une page et le text centré quand la page du navigateur est agrandie.
Voilà, j'espère que ça ira mieu avec l'exemple de mon site.

Merci d'avance.



donc si j'ai bien compris c'est bien un peobleme de taille minimal , et le probleme c'est que la propriete que je t'ai donne marche mais simplement sous Firefox mais il existe des methodes, va voir le liens que je t'ai donnée ou cherche sur google tu vas vite trouver
Oui c'est bien ça le problème, la taille minimale de la marge gauche, celle entre le body et le bord du navigateur gauche.
Enfin, pas de problème si ça bug sous IE, je n'y apporte pas d'importance.
Mais comment je peux faire pour donner une largeur minimum à une marge moi ? Je fais une div vide ? Et à sa droite je cale le reste de la page ?
Paske vu comment est foutu mon site, je vois pas trop comment faire... Smiley ohwell
Et sur google, je sais pas comment exprimer ma recherche, paske j'ai bien sûr commencé par ça... Smiley decu
Modifié par RoRtO (12 Feb 2006 - 20:36)
Alors c'est bien ce que j'avais compris, et donc la solution que j'avais donné est bonne. On peut juste l'optimiser pour ta page :

HTML :
<body>
	<div id="page">[i]<!-- tu fais une div qui contiendra toute ta page -->[/i]
	...
	</div>
</body>

CSS :
body {
	padding-left: 70px;
	text-align: center;
}
div#page {
	margin: 0 auto;
	text-align: left;
}


Et le tour est joué. Il faut juste créer la div#page qui contiendra toute ta page.
Ah oké, j'avais pas compris le code que t'avais mis, c'est pour ça que je buguais !
Bah je vais mettre ça alors, merci ! Smiley cligne
Bah c'est parfait ! Merci beaucoup, ça marche du tonnère !
Zetes vraiment super forts ! Merci beaucoup mpop !
Administrateur
RoRtO a écrit :
Bah c'est parfait ! Merci beaucoup, ça marche du tonnère !
Zetes vraiment super forts ! Merci beaucoup mpop !

Hello,

N'oublie pas de marquer ton sujet comme [Résolu], comme tu as pu le lire dans les Règles du forum Smiley cligne
Sujet clos
Aller à