28182 sujets

CSS et mise en forme, CSS3

Marges intérieures pour Toutes les pages

Bonjour,

Comment appliquer les marges intérieures à toutes les pages d'un site web? Pouvons-nous ajouter quelques lignes au CSS principal?
Par exemple, de droit et de gauche: 20 pixels. (Non visible et sans bordures bien sûr!)
Un peu comme "cellpadding" dans les anciens tableaux HTML.
Si oui, quelles lignes faut-il ajouter au CSS principal? Et dans quelle partie?

Actuellement, j'ai ceci:
body {
max-width: 560px;
margin: 0 auto;
font-family: Tahoma;
line-height: 200%;
}

Merci par avance.
Bien cordialement,
Modérateur
Bonjour,

Tu peut tenter de jouer sur des valeurs qui en devenant négatives ne sont plus valident pour du padding.

Idée pour passer de 0 à 20px en marge interne:

padding-inline:min(calc(25vw - 150px) * 1 + 20px),20px);

Cela te donne une marge interne qui va entre 520 et 580px de largeur de fenêtre passer de 0 à 20px.

Attention les marges externes acceptent les valeurs négatives.
Administrateur
Hello,

Si tu veux "juste" des marges internes à gauche et à droite de 20px exactement et sur toutes les pages, le plus simple est : 

body {
…
padding-inline: 20px;
…
}


Par contre, si tu veux une valeur de marge flottante, voir la proposition de gcyrillus.
Bonjour,

Merci "gcyrillus" pour votre réponse.
En effet, votre solution me semble un peu délicate compte tenu de mon niveau bas de connaissances en HTML et CCS. Je suis débutant.
Comme, toujours je mets le contenu des pages concernées dans les tableaux, j'ai essayé une solution que je l'espère correcte et compatible avec les navigateurs.

Voici la solution pour les tableaux (Non pas dans CSS principal), à tester bien sûr:
.auto-style1 {
border-collapse: separate;
border-spacing: 20px;
}

Bien cordialement,
Modifié par AM250 (20 Oct 2024 - 19:41)
Administrateur
AM250 a écrit :
Comme, toujours je mets le contenu des pages concernées dans les tableaux, j'ai essayé une solution que je l'espère correcte et compatible avec les navigateurs.
C'est une solution fonctionnelle, mais personne ne va te la conseiller : les mises en page avec tableaux sont obsolètes depuis des décennies pour des raisons nombreuses (peu accessibles, peu performantes, peu maintenables, etc.).

EDIT : je comprends qu'en tant que débutant tu trouves la solution de gcyrillus complexe (même s'il s'agit de la plus malléable), mais… tu trouves que la mienne est également trop complexe ?
Modifié par Raphael (20 Oct 2024 - 19:48)
Raphael
a écrit :
Si tu veux "juste" des marges internes à gauche et à droite de 20px exactement et sur toutes les pages, le plus simple est :

Bonjour,

Merci, Raphael.
Je viens juste de lire votre réponse.
C'est très intéressante et facile à utiliser. Beaucoup plus facile que la solution que j'ai trouvée.
Je vais essayer votre solution.

Merci encore une fois.
Bien cordialement,
Modifié par AM250 (20 Oct 2024 - 20:23)
@Raphael
Une question encore :
Si j'ai bien compris, il me faut supprimer margin: 0 auto; et le remplacer par padding-inline: 20px; dans le CSS principal, sans changer d'autres lignes.
Cela suffira pour toutes les pages ?
Modifié par AM250 (20 Oct 2024 - 20:16)
Administrateur
Non. Ce sont deux fonctionnalités différentes. Les margin agissent *autour* de l'élément : ici, elles permettent de centrer horizontalement body, donc ta page.
Raphael
a écrit :
Non. Ce sont deux fonctionnalités différentes.

Bonjour,
Désolé pour avoir retardé mes remerciements.
Merci encore, et bien cordialement,
Prévenir un modérateur
Répondre au sujet
Aller à