Créer une feuille de style CSS

Utilisateur anonyme -  
 jah38 -
Bonjour,

Pourriez-vous me dire qu'est ce qu'il faut mettre pour afficher une bannière dans un fichier .CSS s'il vous plait pour mon site ?

Merci d'avance pour vos réponses !

Lepetitwindows56

29 réponses

  • 1
  • 2
Résumé de la discussion

La mise en place d'une bannière via CSS et les choix entre insertion directe dans le HTML ou utilisation d'une feuille de style externe est le sujet abordé. Des explications techniques proposent d'utiliser une balise div identifiée et, selon le contexte, soit d'intégrer la bannière sur chaque page, soit de l'appliquer comme fond via background-image dans la feuille de style. Plusieurs exemples montrent comment écrire la règle CSS .avecbanniere avec background: center top no-repeat url(image.png), et insister sur le besoin de terminer les propriétés par des points-virgules. En cas d'usage d'une feuille externe, les indications évoquent le chargement efficace et le repérage des liens vers les fichiers CSS et images, ainsi que la configuration d'un bloc CSS pour la bannière.

Bobot (l'IA à votre service)
  1. Jah
     
    Salut,

    pour ta question, oui dans le cas ou ta bannière et comprise dans la balise bloc div et indentifié avecbannière. Ceci selon l'explication de creatif.

    Tu a deux possibilité :

    La première: placer ta bannière sur ton document html = ça passe pour une à deux page mais sur la répétition cumulé par le chargement des pages, coté clients ça fait vite lourd.

    exemple:
    [code]
    http://www.creation-du-web.com/honolulu/cours-html-javascript-page5.html
    [/code]

    La deuxième : dans l'idée ou ton image va se répéter sur toutes les pages, il est préférable de la mettre dans la feuille de style comme le montre l'exemple de "creadif". Ceci grâce à la fonction background.

    Exemple:
    [code]
    background-image: url(tonimage.jpg ou png, ou fig)
    va faire un tour ici : http://css.mammouthland.net/image-de-fond-background-css.php

    L'ensemble de tes éléments CSS sont contenu dans { } .
    Ex:

    div.avecbanniere { /*--Nom du bloc div identifié(id) "avecbanniere" --*/
    background: center top no-repeat url(image.png) /*--Élément de décoration , placé au centre (center), en haut (top), sans répétition de l'image (X ou Y) --*/;
    }
    [/code]

    Comment appeler une feuille de style : https://www.alsacreations.com/astuce/lire/54-feuille-de-styles-link-import.html

    voila, tu sais tout sur le background :D En espérent que nous avons pu répondre a tes question
    2
  2. creadiff Messages postés 483 Statut Membre 57
     
    Il y a pas mal de possibilités en CSS...

    par exemple: 

    div.avecbanniere {
    padding-top:100px;
    background:center top no-repeat url(image.png);
}
    0
  3. Utilisateur anonyme
     
    OK, merci ! Je vais regarder tout ça !
    0
  4. jah38
     
    Lepetitwindows56

    Alors que rend le résultat ?
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Utilisateur anonyme
     
    Je suis en train de la faire !!
    0
  7. jah38
     
    Donne nous ton code au complet ou si tu sais la partie a spécifier. Met ça entre deux balises [ code ] codeici [/ code] (sans les parenthèse) .
    0
  8. jah38
     
    lol, désolé, mais sans le code html je pourrais pas t'aider .
    0
  9. Utilisateur anonyme
     
    Le code de ma page .css ?
    0
  10. jah38
     
    non html. Prend le temps de lire les postes .

    PS: J'ai déja trouvé une erreur , mais envoi ton code html complet entre les balises [code] et [/ code]
    0
  11. Utilisateur anonyme
     
    Le code de ma page ou je souhaite mettre le fichier .css ?
    0
  12. jah38
     
    Pour faire simple pour créer un site web il te faut deux parties

    - la première est la structure de ton site soit le document html, qui représente ta base. Elle dois etre correctement renseigner pour permettre une lecture simple sans mise en forme en premier lieux. La première page du site est index.html

    voici une base html
    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">

    <title></title>

    <link rel="stylesheet" type="text/css" media="screen" href="ecran.css">
    </head>
    <body>

    <!-- Document -->

    </body>
    </html>/code
    C'est entre ces deux balise body que le contenu de ton site est rendu visible sur la toile .

    La seconde et les mise en forme de cette structure. Cette mise en forme est renseigner sur la feuille de style ou document CSS, généralement placé à la racine du dossier contenant le site ou dans un dossier appelé depuis le document html.

    en suite viens si greffer la partie dynamique utilisant d'autre forme de langage que je te défend d'utilisé si tu ne comprend pas encore se qu'est un document html ou CSS et comment les renseigner. je t'invite a te former sur le site du zero ou sur alsacreation ou tu trouvera excellents tutoriels.

    Cherche un peu je pense que tu devrais pouvoir nous trouver ça dans ton répertoire. Pas facile de faire un site à l'aide de truc tout près ou l'utilisation de logiciels WYSIWYG.

    Envoi le code now .
    0
  13. Utilisateur anonyme
     
    En faite, j'ai fais un espace membre et un forum en un livre d'or en PHP.

    Et entre les balise <head> et </head>, j'ai mis cela : 

    <link rel="stylesheet" type="text/css" href="style.css" />


    Voilà
    0
  14. jah38
     
    Tu souhaite qu'elle soit affiché ou ta bannière ?

    ceci <link rel="stylesheet" type="text/css" href="style.css" /> correspond à l'appel de la feuille de style. Tu dois donc avoir dans ton répertoire source.

    Bon pour etre encore plus précis et toujours pour ton affaire de bannière.

    Voici un bloc div identifié (id) header
    <div id="header></div> <!-- Ceci est un fragment de code HTML correspondant à l'entete de mon site--!>

    Montent si je veux personnaliser ce bloc via la feuille de style je dois correctement la renseigner pour que les données soit visible
    - ceci ne marche pas et ne fait référence a rien du tout
    ex:

    {
    background-image: url(monimage.jpg);
    }

    - la bonne méthode d'écriture pour ma balise bloc div header est celle ci
    ex:

    #header {
    background-image: url(monimage.jpg);
    }

    Infos:
    - ce symbole "#" correspond à la balise "div" et " . " correspond à au class .
    - Pour répéter une image d'arrière plans(background) background-repeat: repeat-x (horizontale), y (verticale), si dans tout les sens retir background-repeat.

    A présent tout les éléments sont là.

    A toi de trouver l'erreur sur ta feuille de style
    0
  15. jah38
     
    Dans se cas je ne suis pas sur de pouvoir plus d'aider plus que je ne l'ai fais.

    Liste moi a première vue les dossiers et fichiers et leurs extensions que tu a dans le dossier racine qui contiens "style.css".

    J'ai l'impression que tu c'est pas a quoi ressemble un fichier html, et j'aurais besoin de connaitre ta structure html pour pouvoir réellement t'aider .

    Car header est un identifiant parmis tant d'autres (a chaque webmaster son imagination. Chacun nomme ces identifiant comme bon lui semble) voila donc pourquoi

    #header n'est pas forcement approprié à ta balise html si celle que tu cible se nomme <div id="magueule"></div>, ou bien <h3></h3>,... .

    Tu veux un coup de main, donne nous informations nécessaire. Autrement on peut rien pour toi .

    Si tu a firefox, fait clique droit ton site puis code source de la page et copie ici les balises entre les quelles tu veux mettre ta bannière.
    0
  16. jah38
     
    Vive les panneaux d'administration et les kits tout fais ....

    Bon j'ai compris en me rendant sur ton profil. Tu a se que j'appel un gros bordel de code html, généré par une sorte de panneau d'administration ou IWZIWIG qui gère a ta place . y a bien trop de merdié sur ton code pour chercher dedans.

    Un conseil n'ajoute plus d'image et supprimesant meme. Apres je pourrait t'aider à y voir plus clair.

    Si ça te dis, alors a bientot
    Si non bonne continuation . Mais ça ma saoulé ton affaire de background
    0
  17. Utilisateur anonyme
     
    Je crois que vous n'avez pas tous compris, je veut pas ajouter une bannière sur mon profil du site comment ca marche.net, je parle de mon site internet à moi !
    0
  18. Utilisateur anonyme
     
    Ok, mais c'est pas un style intégrer à la page .php mais c'est un fichier externe !
    0
  19. jah38
     
    C'est se que je me tue a lui expliquer .

    Vois sur son profil tout y est . Afin si c'est bien de ce site dont il parle.

    Aucune balise identifié header n'y figure .

    la première balise après le body est un <div id="wa-dialog-container">renfermant par son autre div tout sorte de mise en page en tableau. et le code est comme ça tout du long. A mon sens "Lepetitwindows56", tu devrais faire un site propre à l'aide d'un doc HTML et CSS . Ton site sera bien plus accessible et surtout moins lourd pour le peux d'information qu'il contient.

    A bientôt
    0
  20. Utilisateur anonyme
     
    Mais pourquoi vous parler de profil ?
    0
  21. jah38
     
    Confirmemation suite au poste de "notobe". "Lepetitwindows56", appres recherche dans le code source de ton site (expomatique), il n'y a aucun element identifié header.

    Le premiere élément figurant entre les deux balise BODY est "wa-dialog-container" écrit dans un bloc di, comme ceci <div di="wa-dialog-container">blablabla</div>.

    Par exemple si tu veux mettre une banniere dans pour cette élement, tu dois y faire appel dans ta feuille de style CSS comme ceci.

    /*--ceci correspond à l'element identifie du meme nom sur ton document html--*/
    #wa-dialog-container
    {
    background: url(nomdetonimages.jpg) repeat-x ou y ou no-repeat;

    /*--EN SUITE TU PERSONNALISER HAUTEUR, LARGEUR, COULEUR DU TEXTE,... COMME BON TE SEMBLE --*/
    }

    Tien nous au jus
    0
    1. Giorgiolino Messages postés 250 Date d'inscription   Statut Contributeur Dernière intervention   52
       
      Salut,

      une petite coquille s'est insérée dans ton code. 

      <div di="wa-dialog-container">

      C'est id (comme identifiant) et non pas di !

      Attention à ces petites (mais néanmoins fatales) erreurs. "Lepetitwindows56" me semble avoir déjà du mal à saisir le concept de l'id en css. S'il faut en plus qu'il gère les erreurs de frappes...
      0
  • 1
  • 2