18041 sujets

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

Problème de redimensionnement de page HTML

Bonjour à tous je viens de me mettre au HTML donc un peut nouveau dans le monde de la création de page web.

Voici mon problème, je veux faire un site web en HTML avec une image de font, 3 images au centre de la page et une image sur le bas. Vous pouvez allez voir sur matieresombre.free.fr pour plus de concrète, j'ai aussi un bout en css.

Je souhaiterai que lorsqu'une personne avec un écran en 800*600 ou avec une autre résolution la page se redimensionne automatiquement pour que les images reste correctement centrées par rapport à l'image de font.

Merci d'avance pour vos réponse. Smiley biggrin
Bonjour,

Réponse hors-sujet, purement ciblée sur les images : effectuez des modifications sur les images elles mêmes (avec un logiciel d'édition d'image) lorsque vous souhaitez réduire leurs définitions, n'utilisez pas les attributs width et height, qui eux, ont pour fonction d'annoncer les dimensions réelles. Vous y gagnerez en poids et en vitesse de restitution.
Modifié par original.defeat (01 Feb 2007 - 16:28)
Bonjour,

Ça n'a pas de sens de redimensionner les images pour chaque visiteur...
Par contre, on peut exprimer leur dimension en pourcentage, encore faut-il bien déterminer de quoi.
Tu veux mettre une image de fond, elle fait donc toute les page; les autres images..., elles viennent au dessus ?
Sans quoi tu mets ton image de fond dans une div en width 100% height d'une hauteur voulue, en position absolute.
Dans celle-ci, tu mets d'autres div en position relative, toujours en pourcentage, et dimensionnées en pourcentage. Je sais, ce n'est pas l'idéal, ce serait mieux en script.
Mais on arriverait logiquement à positionner les images comme ça, ou avec le style float: left.

Excuse Original-Defeat, j'ai lu ton message trop vite...
Modifié par Deny (01 Feb 2007 - 16:59)
Deny a écrit :
Bonjour,

Ça n'a pas de sens de redimensionner les images pour chaque visiteur...
Par contre, on peut exprimer leur dimension en pourcentage, encore faut-il bien déterminer de quoi.
Tu veux mettre une image de fond, elle fait donc toute les page; les autres images..., elles viennent au dessus ?
Sans quoi tu mets ton image de fond dans une div en width 100% height d'une hauteur voulue, en position absolute.
Dans celle-ci, tu mets d'autres div en position relative, toujours en pourcentage, et dimensionnées en pourcentage. Je sais, ce n'est pas l'idéal, ce serait mieux en script.
Mais on arriverait logiquement à positionner les images comme ça, ou avec le style float: left.

Excuse Original-Defeat, j'ai lu ton message trop vite...


Là, je tente aussi de suivre:

j'ai fabriqué une bannière. Je l'ai placée dans le CSS et elle a actuellement une taille fixe. Y aurait-il une autre solution ?

Je suis en train de construire 2 DIV dans le CSS actuellement: un horizontal pour les menus principaux et un pour les sous-menus verticaux liés aux horizontaux.

Puis-je donner une largueur automatique, donc qui s'adapte à l'écran de l'utilisateur pour l'horizontal ? Même question pour la bannière ?

Ce n'est pas très français, désolée.

Un très gros merci pour les réponses
Je mets ici une réponse au moins partielle à ta question.
Au fait, je ne vois pas pourquoi tu écrits que ce n'est pas très français. C'est très français. J'ai lu que viens de Belgique mais...
Moi de Lille.
Bref, Je te mets ici un html avec styles qui marche avec Internet Explorer 6, Firefox 1.5.0.6 et Opera 9.
Je t'y ai laissé des essais que j'ai faits en haût, pour voir.
Voir les dernières lignes, le plus simple, une programmation en absolute et %.


<html>
<body>
<div style="position:absolute;left:0px;top:20px;width:400px;height:100px;border:2px solid black">
<div style="position:relative;left:+40%;top:+10%;width:60%;border:dotted 2px black;">essai
</div>
</div>
<div style="position:absolute;left:0px;top:140px;border:2px solid black;width:50%;">Gauche
<div style="position:relative;left:+100%;top:0px;width:100%;border:solid 2px black;padding:5px;">Droite
</div></div>
<div style="position:absolute;left:0;top:340px;border:2px solid black;width:50%;">&nbsp;&nbsp;Bas gauche</div>
<div style="position:absolute;left:50%;top:340px;border:2px solid black;border-left-width:0px;width:50%;">&nbsp;&nbsp;Bas droite</div>
</body>
</html>


À noter que seul IE6 affiche la page en 100% sans déborder.
Modifié par Deny (02 Feb 2007 - 14:01)
Sujet clos
Aller à