28111 sujets

CSS et mise en forme, CSS3

[Résolu] Photo dans page web

bonjour,
j'ai réalisé un site web et tout fonctionne bien sauf la page d'accueil (fichier index.html)
Celle-ci se compose d"une colonne gauche dans laquelle s'affiche le fichier pagegauche.html sans problème et d'une colonne droite dans laquelle doit s'afficher à l'ouverture du site la page CENTRALACCUEIL.html.
Pas de souci sur un pc mais dès que je veux consulter mon site sur une tablette, alors que le reste du site fonctionne parfaitement, l'affichage en colonne droite de CENTRALACCUEIL.HTML est tronqué. Il ne s'agit pourtant que d'une photo centré dans une page sur fond noir.
La consultation de votre site m'a donné des pistes mais lorsque j'essaie d'adapter celles-ci à mon cas particulier, cela ne marche plus Smiley decu . Je dois commettre une erreur tellement grosse que je ne la vois pas...
Je remercie par avance la ou les bonnes âmes qui pourraient nn pas faire mon taf mais me corriger mes erreurs pour je fasse mieux la prochaine fois. Merci par avance
Modérateur
Bonjour,

Il y a peut-être une erreur mais ça va être difficile à trouver sans code ou page d'exemple , ne penses-tu pas ? Smiley cligne

Amicalement,
Bonjour Parsimonhi,
En effet, ce serait plus simple (au temps pour moi).
Voici donc les codes de la "coupable" CENTRAL_ACCUEIL
le HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<titleCENTRAL_ACCUEIL_2/title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="pourCentralAccueil.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>
<body>
	<div id="wrap">
	  <div align="center"><img src="Berny2.jpg" alt="berny" width="1329" height="886" align="absmiddle" longdesc="Berny2.jpg" /></div>
	  <div id="footer">Footer</div>
</div>
</body>
</html>


Puis la CSS PourCentralAccueil.css

@charset "utf-8";
    #wrap{margin:0px; padding:20px;max-width:1750px;min-width400px;margin:auto;background:#000000;}
    #content{margin-left:0px;center auto;min-height:100px;backgraound:#000000;}
	#content img{width:100%;}
	#image{max-width:100%;heigh:auto;}


En vous remerciant par avance pour vos remarques: j'ai hâte de m'améliorer

Cordialement
Modérateur
Bonjour,

Il me semble avoir compris qu'en fait, la page d'accueil incluait 2 "sous"-pages? Comment est assemblé tout ça ? dans des iframes ?

Sinon, en ce qui concerne l'affichage du code que tu as montré, si on essaie d'afficher ça, comme l'image a un attribut width="1329" d'une part, et comme le width:100% dans le css ne peut s'appliquer qu'à des images contenues dans un élément ayant un id="content", et qu'enfin il n'y a aucun élément ayant cet id dans le code que tu as fourni, l'image ne peut que dépasser dès que l'écran fait moins de 1329 pixels de large (et pas seulement sur une tablette).

Amicalement,
bonsoir,
D'abord merci de ta réponse qui m'ouvre de nouvelles pistes. En effet, ma page index est composée comme suit (le problème vient peut être de là) :

<FRAMESET cols="20%,80%" frameborder="no">
	<FRAME SRC="PANNEAU_GAUCHE.html" name="colGauche">
	<FRAME SRC="CENTRAL_ACCUEIL.html" name="colDroite">
</FRAMESET><noframes></noframes>

Suite à tes conseils, j' ai modifié apporté les modifications suivantes sur CENTRAL_ACCUEIL
au niveau HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<titleCENTRAL_ACCUEIL_2/title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="pourCentralAccueil.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>
<body>
	<div id="wrap">
	<div id="content">
	  <div align="center"><img src="Berny2_small.jpg" alt="berny" width="886" height="591" longdesc="Berny2_small.jpg" /></div>
	  <div id="footer">Footer</div>
</div>
</div>
</body>
</html>

et sur la CSS

@charset "utf-8";
    #wrap{margin:0px; padding:20px;max-width:1500px;min-width400px;margin:auto;background:#000000;}
    #content{margin-left:0px;center auto;min-height:auto;backgraound:#000000;}
	#content img{width:auto;}
	#image{max-width:auto;heigh:auto;}


J'ai poussé et sur ma tablette (samsung galaxy tab A) c'est OK; par conte, sur mon PC, la page d'accueil INDEX propose une image étirée. Par contre, en autonome, l'apercu de CENTRAL_ACCUEIL est bon.
Je progresse, mais il doit y avoir un problème à la base. Qu'en penses-tu?
Modérateur
Bonjour,

1) Frameset et Frame sont des balises obsolètes. Même si elles marchent encore il faut arrêter de les utiliser. A la place de <frame>, on peut utiliser <iframe> qui fait à peu près la même chose. A la place de <frameset>, bah une balise quelconque.

2) <iframe>, elle, n'est pas obsolète mais en général c'est une mauvaise idée de concevoir un site avec des <iframe> sur toute les pages. C'est à réserver pour des utilisations particulières comme quand on inclut des composants qui sont faits par d'autres. Mais quand il s'agit de parties de page qu'on a fait soi-même, c'est rarement justifié.

3) A la place de
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<titleCENTRAL_ACCUEIL_2/title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


mieux vaut utiliser

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CENTRAL_ACCUEIL_2</title>


On notera au passage que pour ta balise <title> il manquait un > et un <.

4) Avec tout ce qui précède, on ne règle rien, on est juste un peu plus moderne. Pour l'image, tu peux supprimer les attributs width="886" height="591". En effet, quand ces attributs sont présents, si ensuite, tu modifies seulement le width dans le css, le height, lui, sera toujours celui de l'attribut, et c'est ça qui provoque la déformation de l'image. Si par contre tu retires ces deux attributs et que tu donnes une width à l'image dans le css, la height sera automatiquement ajustée pour que l'image ne soit pas déformée.

Amicalement,
Modifié par parsimonhi (05 Nov 2020 - 00:15)
Bonsoir Parsimonhi,

je vais m'atteler à mettre tes conseils en pratique, conseils dont je te remercie chaleureusement.

C'est vrai que je suis un peu "en retard"...

Je te tiens au courant

Amicalement et bonne soirée
Bonsoir Parsimonhi
j'ai testé et cela marche vraiment bien. U%n grand merci à toi. Cela m'a donné l'envie d'enrichier mon site photo et, en parallèle, de creuser la question du fluide et du responsive. J'ai vu qu'il y a des tutos et un cours sur le site. Je vais y aller voir.

Bon WE à toi et encore merci
Meilleure solution
Sujet clos
Aller à