[Résolu] CSS3 - HTML5

ceylia_6438 · le 11 juillet 2016

Re Dylav,

Comme j'ai mis mes margins à "auto" :

margin: 60px; auto 80px;

et du moment que j'ai défini largeur/auteur ce devrait être centré ?!

Dylav · le 11 juillet 2016

Je pense que tu voulais écrire (avec un point-virgule en trop),

margin: 60px auto 80px;

Le fait qu'il n'y ait que 3 propriétés signifie que tu fixes les marges haute, gauche=droite, basse. Avec une marge de 60px en haut, de 80px en bas, et des marges droite et gauche calculées automatiquement par le navigateur lors de la construction de la page.

ceylia_6438 · le 17 juillet 2016

Re Dylav,

Je pensais que mon message était passé.

Ok là c'est centré (merci j'avais omis d'enlever ce ";") mais je n'ai toujours pas compris pourquoi je vois un rectangle est fixé sur le bas, rectangle "gris" alors que dans mon body j'ai mis un dégradé dans la page :

body {
    margin: 0;
    padding: 0;
    background: -moz-linear-gradient( to top, #000000, #666666);
}

Bonne fin de week-end,

Ceylia

Dylav · le 17 juillet 2016

Bonjour Ceylia,

Remarque préliminaire : je pense qu'il est inutile de préfixer (-webkit-, -moz-, -o-) la fonction linear-gradient, les versions récentes des navigateurs l'interprètent désormais correctement (la preuve avec mon exemple ci-dessous, affiché dans FF 47.0.1).

Le bloc body n'a pas de hauteur par défaut. Sa hauteur est celle de l'espace occupé par les éléments qui le composent. Si je reprends le premier exemple donné par le W3C (la référence, en matière de programmation Web), et que je l'adapte, c'est flagrant.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background: linear-gradient(red, yellow)}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom (comportement par défaut)</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow.</p>
</body>
</html>

Puisque le contenu n'atteint pas le bas de la fenêtre, le motif se répète automatiquement.

À noter qu'on peut l'en empêcher (et c'est sans doute ce dont tu as besoin),

background-repeat: no-repeat;

Jette également un œil sur la page en français « linear-gradient », qui semble très complète.

ceylia_6438 · le 19 juillet 2016

Bonjour Dylav,

Tu l'as essayé avec le css en mettant le body en haut ?!

Je pense avoir essayé tes solutions ainsi que celles qui sont sur les pages citées.

Pour les anciennes versions, il est préférable de mettre des préfixes mais si je regarde de toutes façons ma version FF 47.0.1, Chrome ça ne le fait pas.

Cela m'enlève même le fond.

Il faut que je réessaye avec une page .html avec une page .css

Ce que je vais essayer de faire, c'est déjà de mettre un background dégradé sur ma page principale (dans le css de mon body) puis je ferai à l'intérieur un rectangle dégradé, un texte sur la droite plus bas sur la gauche.

Je vais mettre un dessin pour t'expliquer :-)

Merci,

C.

Dylav · le 19 juillet 2016

Le fait que la feuille de style soit intégrée au fichier HTML ou qu'elle fasse l'objet d'un fichier CSS séparé (feuille de style externe) ne change strictement rien au résultat final. Voici l'exemple avec l'option no-repeat.

La page HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FeuilleDeStyle.css">
</head>
<body>
<h3>Linear Gradient - Top to Bottom (comportement par défaut)</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow.</p>
</body>
</html>

La feuille de style FeuilleDeStyle.css

body {
    background: linear-gradient(red, yellow);
    background-repeat: no-repeat;
}

Le résultat

Je ne dispose pas de Chrome, et ne pourrai donc pas te conseiller en la matière...

ceylia_6438 · le 26 septembre 2016

Bonjour Dylav

Désolée de ne pas avoir répondu avant mais je n'ai pas pu faire autrement.

J'ai essayé encore de revoir mon dégradé de page. Si je mets un rectangle à l'intérieur, qui comporte des boutons (cela "tire" sur les fichiers .css), la page ne se met pas en dégradé mais il y a toujours ce rectangle "gris" en bas, un bande grise.

Je vais encore "creuser la chose", là je passe à autre chose. Si je réussis, si j'ai des infos je te le ferai savoir, parce que j'ai essayé les solutions données.

Merci de m'avoir aidé en tous les cas,

Je vais clore ce sujet pour un petit moment ;-)

C.

Modifié le 26 septembre 2016 par ceylia_6438

Dylav · le 26 septembre 2016

OK, Ceylia, tu reviens quand tu veux...

Connexion

Pas encore inscrit ?

[Résolu] CSS3 - HTML5

Messages recommandés

ceylia_6438

Dylav

ceylia_6438

Dylav

ceylia_6438

Dylav

ceylia_6438

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer