Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] CSS3 - HTML5

ceylia_6438

Par ceylia_6438
dans Programmation

 Partager

Messages recommandés

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
  • 2 mois après...
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...