Aller au contenu


Photo
- - - - -

[Résolu] CSS3 - HTML5


  • Veuillez vous connecter pour répondre
17 réponses à ce sujet

#11 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 264 messages

Posté 11 juillet 2016 - 03:43

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é ?!


  • 0

PUBLICITÉ

    Annonces Google

#12 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 28 658 messages

Posté 11 juillet 2016 - 04:18

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.


  • 0

#13 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 264 messages

Posté 17 juillet 2016 - 11:59

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


  • 0

#14 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 28 658 messages

Posté 17 juillet 2016 - 03:01

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.

 

384343motif.jpg

 

À 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.


  • 0

#15 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 264 messages

Posté 19 juillet 2016 - 05:41

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.


  • 0

#16 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 28 658 messages

Posté 19 juillet 2016 - 07:33

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

183788html.jpg

 

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


  • 0

#17 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 264 messages

Posté 26 septembre 2016 - 12:36

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é par ceylia_6438, 26 septembre 2016 - 12:36 .

  • 0

#18 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 28 658 messages

Posté 26 septembre 2016 - 12:50

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


  • 0









Sujets similaires :     x