Pb d'image sur un site web.
Résolu
garnouil
Messages postés
17
Date d'inscription
Statut
Membre
Dernière intervention
-
garnouil -
garnouil -
Bonjour,
Je me forme seul avec l'espoir de me réorienter en SRC. Je crée actuellement un site web pour une association en programmant en langages XHTML et CSS (grâce à l'aide du site du 0). J'ai bien avancé mais je bloque sur le problème suivant: je voudrais centrer une image sur ma page pour qu'elle s'adapte à toutes les tailles de fenêtres. Pour l'instant, elle reste en haut, à gauche sans que je réussisse à la mettre au milieu de l'écran. Y a-t-il un code spécial à utiliser que j'ignore? Je cherche depuis plusieurs jours sans réussir à obtenir ce résultat.
Ma page va contenir une migne de présentation et la photo en-dessous, voilà ce que j'ai fait mais "ça ne marche pas"!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<p> </p>
<div id="corps">
<div style="position: absolute; left: 50%; top: 50%;">
<img src="affiche.png" alt="Bannière d'Entrée"/>
</div>
</div>
<div id="pied_de_page">
</div>
</body>
</html>
Si vous pouviez m'aider rapidement et m'expliquer mes erreurs, ce serait formidable!
Merci d'avance ...
Je me forme seul avec l'espoir de me réorienter en SRC. Je crée actuellement un site web pour une association en programmant en langages XHTML et CSS (grâce à l'aide du site du 0). J'ai bien avancé mais je bloque sur le problème suivant: je voudrais centrer une image sur ma page pour qu'elle s'adapte à toutes les tailles de fenêtres. Pour l'instant, elle reste en haut, à gauche sans que je réussisse à la mettre au milieu de l'écran. Y a-t-il un code spécial à utiliser que j'ignore? Je cherche depuis plusieurs jours sans réussir à obtenir ce résultat.
Ma page va contenir une migne de présentation et la photo en-dessous, voilà ce que j'ai fait mais "ça ne marche pas"!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<p> </p>
<div id="corps">
<div style="position: absolute; left: 50%; top: 50%;">
<img src="affiche.png" alt="Bannière d'Entrée"/>
</div>
</div>
<div id="pied_de_page">
</div>
</body>
</html>
Si vous pouviez m'aider rapidement et m'expliquer mes erreurs, ce serait formidable!
Merci d'avance ...
A voir également:
- Pb d'image sur un site web.
- Création site web - Guide
- Site de telechargement - Accueil - Outils
- Web office - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
5 réponses
text-align: center ==> c'est pour centrer du texte,
pour centrer une image
<div style="width: 50%; margin-left: 25%;"><img /></div>
pour centrer une image
<div style="width: 50%; margin-left: 25%;"><img /></div>
Soit tu la mets dans un paragraphe (ou un titre h1 par ex.) centré
Mais si l'image est plus grande que la largeur de l'écran du visiteur cela va créer l'apparition d'un ascenseur horizontal (attention, le alt n'est pas du tout pertinent : soit c'est une image de déco tu laisses le alt vide ; soit c'est le titre de ton site et tu mets ce titre clairement)
Soit tu la mets en background mais si ton image est le titre de ton site, ce n'est pas judicieux pour le référencement et l'accessibilité.
CSS :
<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote>
<p style="text-align:center"><img src="affiche.png" alt="Bannière d'Entrée"/></p>
Mais si l'image est plus grande que la largeur de l'écran du visiteur cela va créer l'apparition d'un ascenseur horizontal (attention, le alt n'est pas du tout pertinent : soit c'est une image de déco tu laisses le alt vide ; soit c'est le titre de ton site et tu mets ce titre clairement)
Soit tu la mets en background mais si ton image est le titre de ton site, ce n'est pas judicieux pour le référencement et l'accessibilité.
<div id="banniere"></div>
CSS :
#banniere {
height: ici la hauteur de l'image;
background:white url(affiche.png) no-repeat top center
}
<blockquote cite="Shakespeare">To be or not to be ; That is the question...</blockquote>
Premièrement les erreurs : peut être est ce juste quand tu a coupé ton code mais ton div de menu n'a pas de fin.
et a tu entendu parler de la sémantique? sinon va voir sur le site du zéro tu trouvera surement le cours, ça te permettra d'être mieux référencé et c'est plus pro
Sinon pour ton problème moi je ferais <div align="center"> ou tu peu remplacé center par right et left.
Si tu a d'autre question demande moi
et a tu entendu parler de la sémantique? sinon va voir sur le site du zéro tu trouvera surement le cours, ça te permettra d'être mieux référencé et c'est plus pro
Sinon pour ton problème moi je ferais <div align="center"> ou tu peu remplacé center par right et left.
Si tu a d'autre question demande moi
Voir la réponse précédemment postée ;)
https://forums.commentcamarche.net/forum/affich-20369934-pb-d-image-sur-un-site-web#4
https://forums.commentcamarche.net/forum/affich-20369934-pb-d-image-sur-un-site-web#4
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question