Créer une feuille de style CSS

Utilisateur anonyme -  
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

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
    1. creadiff
      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);
}
      1. Utilisateur anonyme
        OK, donc si je met ce que tu m'a mis, logiquement, cela fonctionne ?
        3. Utilisateur anonyme
          J'ai mis le code suivant 
          {
background-image: url(http://expomatique.free.fr/portail/crbst_Logo_20Expomatique_20orange.jpg) 
}


          Mais je n'est pas de bannière !
          1. Giorgiolino Contributeur
            Salut,

            il te manque un point-virgule (;) à la fin de ta ligne. 

            background-image: url(http://expomatique.free.fr/portail/crbst_Logo_20Expomatique_20orange.jpg) ;  <-- ici
          2. Utilisateur anonyme
            OK, je regarde cela tout de suite !!
        6. Utilisateur anonyme
          Bah, j'ai mis cela pour la bannière :

          {
          background-image: url(http://expomatique.free.fr/portail/crbst_Logo_20Expomatique_20orange.jpg) ;
          }

          Mais j'ai pas de bannière qui s'affiche !!
          1. 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) .
            1. Utilisateur anonyme
              Ok, alors le code c'est : 

              <!-- code Css généré sur www.service-webmaster.fr -->
<style>
A:link 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: normal; 
font-weight: normal; 
 }
A:visited 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }
A:active 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }
A:hover 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }

 {
background-image: url(http://expomatique.free.fr/portail/crbst_Logo_20Expomatique_20orange.jpg); 
} 
 
</style>
<!-- © 2007 - Generateur css by Service-Webmaster.fr -->
              1. notobe
                1. Si c'est une feuille de style externe, il ne faut pas mettre les balises <style></style>
                2. Si c'est une feuille de style interne, la syntaxe correcte est <style type="text/CSS">
              2. Utilisateur anonyme
                Qu'est ce que tu veut dire par feuille externe, une feuille venant d'un autre site ?
              4. Utilisateur anonyme
                Ok,
            4. 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]
              2. 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 .
                1. 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à
                  1. 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
                    1. Utilisateur anonyme
                      Bon, voilà le code de ma feuille .css, mais ça ne fonctionne toujours pas : 

                      <!-- code Css généré sur www.service-webmaster.fr -->
<style>
A:link 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: normal; 
font-weight: normal; 
 }
A:visited 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }
A:active 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }
A:hover 
 {
text-decoration: none; 
color: #3366ff; 
font-family: Arial; 
font-size: 12pt; 
font-style: none; 
font-weight: normal; 
 }

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

 
</style>
<!-- © 2007 - Generateur css by Service-Webmaster.fr -->

                      1. 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.
                        1. Utilisateur anonyme
                          Moi, j'ai juste fait un fichier CSS, j'ai pas fait de dossier !
                          1.  Giorgiolino Contributeur
                            As-tu un élément avec id="header" dans tes pages de contenu (html, php,..) ?
                            Si oui, sur quelle balise se trouve cet id (<div>, <p>, etc) ?
                          2. Utilisateur anonyme
                            J'ai pas !, mais de toute façons, je veut juste ajouter une bannière sur mes page PHP !
                          3. notobe
                            s'il n'y a pas de id="header" dans le code html, ça ne peut pas être pris en compte !!
                        • 1
                        • 2