18073 sujets

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

[Resolu]Probleme d'image et resolution

bonjour a tous,

j'ai un probleme avec deux images sous IE (sous firefox, ca passe niquel).

voila le code:

<body bgcolor="#BBBBBB">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
	<td width="100%"><img src="images/bandeau.jpg" width="100%"></td>
</tr>
<tr>
	<td width="100%"></td>
</tr>
<td width="100%" valign="bottom"><img src="images/pied.jpg" width="100%"></td>
</tr>
</table>
</body>
</html>


Je voudrais que les images restent à la largeur de la page meme si on redimensionne. La, les images gardent leur taille originale.
Modifié par robined (24 Mar 2005 - 10:50)
Bonjour et bienvenue robined Smiley biggrin

Attention, tu as dû oublier de jeter un oeil sur les règles du forum...

Pour une lecture plus facile des échanges, il est demandé que les lignes de codes soient affichées entre les balises "code". Ne fais pas un nouveau post, tu peux normalement utiliser le bouton "Editer" présent sur ton message Smiley cligne

Autre point, ton tableau est-il destiné à la présentation de ta page ou est-il là pour afficher des données tabulaires ?
Modifié par dominique (24 Mar 2005 - 10:46)
En fait, les lignes du haut et bas sont utlisées pour la présentation et celle du milieu recevra un texte inclus.

Désolé pour les balises code.
Bonjour,
fais quelques essais pour étirer et écraser tes images en mettant des valeurs fixes en pixels... Tu verras l'effet des écrasements et étirements...(à moins d'avoir une image adaptée, mais je vois mal comment !).
Merci d'avoir édité ton message Smiley cligne

Sauf erreur de ma part, il s'agit donc d'une présentation via un tableau.
Ici, c'est un forum dédié aux standards du web et à l'accessibilité et cette méthode de construction de page via un tableau n'est pas conforme aux recommandations du W3C...

Si tu désires faire un site propre et conforme, tu recevras toute l'aide nécessaire ici Smiley cligne ... En attendant, je t'invite à découvrir ces quelques tutoriels

Si tu souhaites te présenter, tu trouveras au bar un sujet dédié aux présentations

Bon courage Smiley smile
Modifié par dominique (24 Mar 2005 - 11:08)
Dominique, je sais que les tableaux ne sont pas très propres et d'habitude, je suis plutot css mais la les css ne répondent pas à ce que j'attends donc je me suis retourné logiquement vers les tableaux...

Si tu as la solution pour les images soient a la taille de la page en css, je suis preneur. Moi, j'ai essayé et elles sont tronquées et pas redimensionnées.
Et dans une page avec mise en tableau, il y a de fortes chance que tes images obtiennent le même traitement...
Je vous remercie de vos reponses mais j'ai trouvé!!

Dominique, tu seras content ( moi aussi d'ailleurs) ma solution est en css simple.

A plus tout le monde.
Modifié par robined (24 Mar 2005 - 11:41)
Super que tu ais trouvé la réponse Smiley cligne

Peux-tu la donner ici, elle servira certainement à d'autres qui rencontreront le même soucis Smiley smile ... Merci d'avance !
Biensur, pas de probleme, la voila:

<style type="text/css">
.banniere {
	width:100%;
	position: absolute;
	left:0px;
	top:0px;
}

.pied {
	width:100%;
	position: absolute;
	bottom:0px;
	left:0px;
}

.identification {
	height:15%;
	position:absolute;
	top: 18%;
	right:15%;
}

.principale {
	position:absolute;
	overflow:auto;
	height:75%;
	width:90%;
	top: 20%;
	left:5%;
}
</style>
<body bgcolor="#BBBBBB">
<div class="banniere"><img src="Interface/images/bandeau.jpg" width="100%"></div>
<div class="principale"><? include("presentation.html");?></div>
<div class="pied"><img src="Interface/images/pied.jpg" width="100%"></div>
</body>
</html>
à robined

ba va jusqu'au bout de la logique css

body {
background-color:#bbb;
}

img.fullwidth {
width:100%;
}

et html


<body>
<div class="banniere"><img src="Interface/images/bandeau.jpg" class="fullwidth"></div>
<div class="principale"><? include("presentation.html");?></div>
<div class="pied"><img src="Interface/images/pied.jpg" class="fullwidth"></div>
</body>


sinon il manque les attributs alt dans tes balises img

si en plus d'adapter tes images à la largeur de l'écran tu veus garder les proportions tu peus rajouter un height:auto; c'est reconnu même par IE (à partir de la version 6)

++
Modifié par clb56 (24 Mar 2005 - 13:00)
merci pour le fullwidth, je connaissais pas.

Pour le height=auto, la proportion est déja prise en compte, ce ne serait pas pris par defaut par hasard?

Pour les alt, je suis pas fan mais bon, je vais voir

Encore merci.
alt ça signifie alt...ernatif.

c'est un texte qui remplace une image quand on ne peut la voir (navigateurs non graphiques, lecteurs d'écrans etc...) c'est donc absolument obligatoire pour l'accessibilité des documents web.
heu... permettez à un utilisateur de ces fameux outils d'accessibilité de pointer ce qui a une conséquence ilmmédiate pour lui ?

D'abord et avant tout, choisissez, image après image :
- alt="Ici un texte utile apportant une information nécessaire"... quand l'image véhicule une information nécessaire à la compréhension du document et non contenue ailleurs dans le contexte.
- alt="" qui évacuera totalement l'image, son éventuel contenu alternatif et tout, pour mon plus grand bonheur quand elle n'apporte aucune information nécessaire à la compréhension du document.

Les alt="N'importe quoi pour avoir un alt et satisfaire le validateur" sont exaspérants. Mais ils sont légions Smiley eek

Vous aviez certainement tout ça en tête, mais ça ne coûte rien de répéter un peu Smiley cligne
Modifié par Laurent Denis (24 Mar 2005 - 13:56)
Sujet clos
Aller à