image s'affiche en local mais pas en ligne

5 décembre 2021 à 17:51:34

Bonjour, j'ai démarré mon propre site par sa page de garde (en quelques sortes pour m'entraîner :-).

Actuellement sur cette page de garde j'ai placé 2 images. Les deux s'affichent très bien en local mais seulement une quand la page est en ligne.

EN LIGNE :

EN LOCAL :

Voici le code html concerné :

<!doctype html>

<html lang="fr">

<head>

  <meta charset="utf-8">
  
  <title>grubblle</title>
  
  <link rel="stylesheet" href="./design/styley.css">
 
  
</head>

<body>

 <br>


    <br>
    <br>
			<div align-left/><img src="./images/logo_grubblle.png" id='logo' width=50% height=50%</div>
     <br>
	 <br>


				<div class="container" id="container">
				<div id="photo2"><p>quelques experimentations Internet</p></div>
				<div id="photo1"><p>une sélection de mes photos personnelles</p></div>
				<div class="item">une oeuvre d'art collective : A VENIR !</div>
	  
</body>
</html>

Voici le code css concerné :

body {
   padding: 20px;
   font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 * {box-sizing: border-box;}
 
 
 .container {  
   border: 5px solid rgb(126, 122, 125);
   border-radius: .5em;
   padding: 10px;
   display: flex;
   width: 1400px;
 }
 
 .item {
   padding: 10px;
   background-color: rgba(253, 250, 253, 0.3);
   border: 2px solid rgba(44, 43, 44, 0.5);
   width: 460px;
   height:421px;
 }
#photo1 {
	padding: 10px;
	font-size: 2.3em;
	text-align: justify; 
         color: white;
	background-image: url("../images/carambar2.JPG");
         width: 460px;
         height: 421px;
         background-size: 100% auto;
		 
        
}

#photo2 {
	padding: 10px;
	font-size: 2.3em;
	text-align: justify; 
         color: white;
	background-image: url("../images/immeuble.jpg");
         width: 460px;
         height: 421px;
         background-size: 100% auto;
		 
        
}

Si vous avez des idées ce serait super !! :-)) (à priori, les images sont nommés correctement et figure sur le serveur distant)

merci par avance et bonne fin de weekend,

cordialement

Andy

AbcAbc6

5 décembre 2021 à 18:00:05

Bonsoir,

>> Si vous avez des idées ce serait super !! :-))

Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/#validate_by_input

La balise <br> est un retour ligne, elle s'insère dans une portion de texte, elle ne sert absolument pas à espacer les éléments pour ce faire il existe les padding et margin en CSS. Plusieurs <br> à la suite n'ont donc aucun sens.

-
Edité par AbcAbc6 5 décembre 2021 à 18:01:53

Domi65

5 décembre 2021 à 22:25:24

« Plusieurs <br> à la suite n'ont donc aucun sens. »

Disons que c'est une mauvaise pratique (bien que répandue). Le sens est le même que celui des très nombreux traitement de texte qui font la même chose en pressant 6 fois la touche Entrée pour faire de l'espace sous l'adresse du destinataire. On ne leur dit pas pour autant que ça n'a aucun sens. ;-)

AbcAbc6

6 décembre 2021 à 1:08:04

@Domi65 Dans mon propos, je voulais parler de sémantique.....

Voir la note de la documentation et la partie accessibilité

https://developer.mozilla.org/fr/docs/Web/HTML/Element/br