Discussion :

[friendofweb]

Bonjour,

Voilà, je voudrais avoir votre avis sur la différence qu'il y a entre margin-left et left s'il vous plaît ?
J'utilise un "header" et un "footer" dans un projet dont voici un code simplifié :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<header></header><br /><br />
<a href="https://forum.alsa creations.com/topic-4-49460-1-Quelledifferenceentrelaproprieteleftetmargin-left.html" hreflang="fr" title="infos sur header" target="_blank">Infos sur margin-left ou left</a>
<footer>
	<p><a href="5.htm" title="précédent">précédent</a> Page 6 sur 6 <a href="7.htm" hreflang="fr" title="En constructions...">suivant</a></p>
</footer>

Le header pouvant avoir une image en arrière plan ou pas, en fonction du choix.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
html, body {
 margin:0;
 padding:0;
 }
a {color: white;}
body {background: grey;}
header {/* left, right et top semble être le raccourci de margin... réponse NON ! */
        left: 0px;
        right: 0px;
        top: 0px;
        height: 63px;
        color: white;
        background: linear-gradient(#444, #111);
        /* background: transparent url('chemin de l'image') repeat center top; */
      }
footer
  {
      background: #2B2B2B;
      background: linear-gradient(#444, #111);
      height: 30px;
      border-top: 2px solid #dedede;
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
  }
footer p {
    color: white;
    font: 11px verdana,sans-serif;
    margin: 0;
    padding-top: 12px;
    text-align: center;
}
footer p a {color: #999;text-decoration: none;}
footer p a:hover {color: white;}

J'ai trouvé une réponse et je voudrais vérifier l'info via ce forum.
Si vous voulez voir un aperçu, vous pouvez le faire ici

Concernant l'aperçu, le footer me renvoie une ligne blanche (non voulue) via codepen, mais sur mon pc, ça fonctionne très bien !
Concernant le header , pour pouvoir afficher l'image sur toute la largeur, les astuces semblent être : "de devoir utiliser left et right" (source d'infos)

Dans mon expérimentation, j'ai d'abord conçu un header via la balise div pour ensuite utiliser les balises header et footer.
Peut-être que la réponse est là ? C-à-d que ds une div, left et right sont nécessaires ?

Finalement, je crois que "ma" source explique plutôt bien le sujet.

Cordialement,

[friendofweb]

Elements de réponse :

http://j-willette.developpez.com/tut...osition-fixed/

(mon navigateur bloquait la fonction rechercher)

Voilà, je pense pouvoir résumer les propriétés left, top, right et bottom ainsi : "Ce sont des propriétés de position".

Ci-dessous quelques tutos en relation :

• pseudo-frames
• Glossaire des propriétés CSS
• CSS pour débutant pg 13
• CSS pour débutant pg 12

Entre temps, j'essaye de reproduire le cas où ces propriétés sont nécessaires (pour mon header). Que ce soit une div ou la balise header, avec ou sans image,
Les propriétés suivantes ne semblent plus nécessaires : (j'ai fait le test en les supprimant)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
left: 0px;
right: 0px;
top: 0px;

Cela, alors qu'au départ mon souci était que la largeur ne prenait pas tout l'écran, mais comment j'ai fait ? .
Je fais donc un test accessible en ligne : Test sans les propriétés mentionnées ci-dessus...

Cordialement,