Demande d'aide pour premiers pas CSS

Hallo33 Messages postés 358 Statut Membre -  
Hallo33 Messages postés 358 Statut Membre -
Bonjour,

Je débute dans le CSS

Je souhaite mettre mon logo en haut à gauche de la page mais rien ne s'affiche.

Voilà mon code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
<link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css" />
<title>Mon titre</title>
</head>
<body>
</body>
</html>

Et CSS:

body
{
background: url("../images/logos.png") no-repeat top left scroll;
}

J'ai oublié quelquechose?

Merci pour votre aide...


20 réponses

  1. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    CSS
    body{   
      background: #000;   
    }   
    
    img{   
      border: none;   
    }   
    
    #logos{   
      height: 50px;   
      margin-left: 50px;   
      margin-top: 20px;   
      width: 150px;   
      background: url(../images/logos.png) /*le lien vers l image est par rapport a la CSS et pas a la page html , d ou le "../" !*/  
    }


    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   
    "http://www.w3.org/TR/html4/strict.dtd">   
    <html>   
      <head>   
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">   
        <link rel="stylesheet" media="all" type="text/css" title="Design" href="css/design.css">  <!-- la le lien est par rapport a la page html, donc PAS de "../ "-->  
        <title>   
          Mon titre   
        </title>   
      </head>   
      <body>   
        <div id="logos"></div>   
      </body>   
    </html>


    exemple de ce que ca donne

    ? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
    1
  2. Hallo33 Messages postés 358 Statut Membre 29
     
    Finalement j'ai fait comme ça

    HTML

    <body>
    <img src="images/logo.png" alt="Logo du site" id="logo" />
    </body>

    CSS

    #logo
    {
    no-repeat top left scroll;
    }

    Mon logo s'affiche bien, j'ai pas fait d'erreur ?
    0
  3. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    Salut

    la tu met l image sur la totalite de ta page , puisque tu le met sur le <body>

    le mieux est de creer une <div> de lui attribuer une"class" et de mettre l image en background de cette div !
    il faudra alors que tu donne IMPERATIVEMENT un "height" et un " width" a cette div

    un exemple !

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css">
        <title>
          Mon titre
        </title>
    <style type="text/css">
    <!--
    body {
      background-color: #CCCC99;
    }
    
    .logos {
      background: url(../images/logos.png);
      background-color: #FF0033;
      height: 50px;
      width: 150px;
      margin-top: 20px;
      margin-left: 50px;
    }
    -->
    </style>
      </head>
      <body>
        <div class="logos"></div>
      </body>
    </html>
    


    Un petit tuto s impose dans ton cas :-))
    https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

    A+
    0
  4. Hallo33 Messages postés 358 Statut Membre 29
     
    Merci RADZONE

    Je suis bien sur le tuto du zéro mais à force d'aller dans tous les sens avec toutes ces propriétés et attributs j'ai un peu le tournis lol

    - si je comprends bien si je veux un fond tout noir, il faut que je le mette sur la partie HTML c'est bien ça ? Rien là dessus sur la partie CSS ? Ou peut-être dans les deux ?

    - et si j'ai bien compris ce que tu m'as mis entre <!-- et --!> c'est ce qui va dans le CSS ?

    Je voulais utiliser un ID pour le logo comme conseillé sur le site du zéro, mais je vois que tu me propose d'utiliser un CLASS c pas grave c'est pareil ?

    Je ne vois pas le body (partie HTML) dans ton exemple et ça me trouble...

    Reviens... Merci pour ton aide ;-)
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    le bg ce met aussi bien sur le body !

    dans ce cas precis l utilisation de class ou id n a pas de reel importance , mais une id est peut etre plus approprier , etand donne que tu ne vas en principe n utiliser qu une seule fois cette balise !

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
      <head> 
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
        <link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css"> 
        <title> 
          Mon titre 
        </title> 
    <style type="text/css"> 
    <!-- 
    body { 
      background-color: #000000;     /* COULEUR DU BG DE LA PAGE est donne au body */ 
    } 
    
    #logos {   /* mettre un"#" 
    a la place du "." pour designer une id*/ 
      background: url(../images/logos.png); 
      background-color: #FF0033; 
      height: 50px; 
      width: 150px; 
      margin-top: 20px; 
      margin-left: 50px; 
    } 
    --> 
    </style> 
      </head> 
      <body> 
        <div id="logos"></div>   <!-- donner une id a la place de la class --> 
      </body> 
    </html>


    Je ne vois pas le body (partie HTML) dans ton exemple et ça me trouble...

    regarde mieux :-))

    A+

    ? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
    0
  7. Hallo33 Messages postés 358 Statut Membre 29
     
    Ben je crois en fait que tu as mis le CSS dans la même pas dans ton exemple or moi j'utilise une page externe.

    je suis totalement embrouillé j'ai plus rien sur mon écran maintenant, quand je prévisualise.

    HTML

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

    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
    <link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css" />
    <title>Bienvenue sur Enfindesbonsplans.com - Enfin un site qui propose de vrais bons plans!</title>
    </head>
    <body>
    <div id="logo"></div>
    </body>
    </html>

    CSS

    body
    {
    background-color: black; /* BACKGROUND PAGE */
    }

    #logo /* LOGO */
    {
    background: url(../images/logo.png);
    background-color: black;
    height: 75px;
    width: 455px;
    margin-top: 20px;
    margin-left: 20px;
    }

    C'est où que je fais une erreur, je me torture l'esprit depuis ta l'heure sans trouver :(
    0
    1. Hallo33 Messages postés 358 Statut Membre 29
       
      Je précise que dans le dossier de mon site j'ai deux dossiers: images + css
      0
    2. Hallo33 Messages postés 358 Statut Membre 29
       
      je viens de trouver ce qui n'allait pas dans le code ci-dessus:
      href="../css/design.css" />
      il fallait enlever les ../ avant /css
      et ça fonctionne now ;)
      0
  8. Hallo33 Messages postés 358 Statut Membre 29
     
    up!

    apparemment RADZONE est parti donc si il y a qqun d'autre pour me help :(
    0
  9. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    c est certainement un probleme de lien ou de doublon dans la CSS

    si il est en ligne met un lien que je vois !
    0
  10. Hallo33 Messages postés 358 Statut Membre 29
     
    ben le problème c'est que je m'entraîne en local, donc je n'ai pas d'hébergement

    mon code ci-dessus te paraît bon?

    j'ai une page blanche quand je regarde sur firefox :(
    0
    1. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
       
      alors decris moi comment est structurer ton site .

      son arborescence ! ou ce trouve les dossiers "css" et "image" par rapport a la page html !
      0
  11. Hallo33 Messages postés 358 Statut Membre 29
     
    pourquoi par exemple le fait d'insérer

    body
    {
    background-color: black; /* BACKGROUND PAGE */
    }


    dans ma partie css ne rends pas ma page noir ?

    c d'abord ça qui m'intrigue...?
    0
  12. Hallo33 Messages postés 358 Statut Membre 29
     
    J'ai un dossier qui contient 2 dossiers:
    - css (qui comprend design.css)
    - images (qui comprend logo.png)
    et mon fichier index.htm
    0
    1. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
       
      cole le code du fichier "design.css" que je vois
      0
  13. Hallo33 Messages postés 358 Statut Membre 29
     
    CSS

    body
    {
    background-color: black; /* BACKGROUND PAGE */
    }

    #logo /* LOGO */
    {
    background: url(../images/logo.png);
    background-color: black;
    height: 75px;
    width: 455px;
    margin-top: 20px;
    margin-left: 20px;
    }
    0
  14. Hallo33 Messages postés 358 Statut Membre 29
     
    Ben bizarrement en recopiant tes codes j'ai la page qui devient noire

    bon je vais pas chercher midi à quatorze heure, je ne vois pas où était le problème dans mon code précédent mais je vais simplement réutilisé tes codes (avec ta permission ;)

    Presque 3h pour mettre ma page en noire avec un logo en haut à gauche... ça promet lol

    maintenant j'ai un autre soucis, j'ai utilisé un générateur de menu CSS et il ma fourni un dossier qui contient:
    - un dossier "images"
    - et un fichier css nommée menu_style.css

    comment dois-je faire pour mettre ce menu sur ma page?

    dois-je faire un changement sur la ligne de mon html suivante ou en rajouter une deuxième? sur cette ligne je veux dire:
    <link rel="stylesheet" media="all" type="text/css" title="Design" href="css/design.css">

    Merci pour ta patience avec moi... vivement que cette discussion soit un vieux souvenir :)
    0
    1. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
       
      en rajouter une deuxième !!

      <link rel="stylesheet" media="all" type="text/css" title="Design" href="css/design.css">  
      <link rel="stylesheet" media="all" type="text/css" title="menu" href="menu_style.css "> 
      0
  15. Hallo33 Messages postés 358 Statut Membre 29
     
    Merci

    j'ai réussi à avoir la page noire grâce à toi mais aucune trace de mon logo toujours...

    que dois-je inscrire dans le body de l'html s'il te plait ?
    0
  16. Hallo33 Messages postés 358 Statut Membre 29
     
    NICKEL !!!

    Ca fonctionne !!!

    Je garde ce sujet ouvert car je sors là mais j'ai une ou deux petite questions à te poser encore si ça ne te dérange pas... car j'aimerai comprendre plutôt que copier coller bêtement, si tu vois ce que je veux dire ;)

    encore merci c cool
    0
  17. Hallo33 Messages postés 358 Statut Membre 29
     
    je viens de trouver ce qui n'allait pas

    dans le code de lien vers la feuille de style, il fallait supprimer les deux petits point et le slash ../ avant css

    moi j'avais mis:
    href="../css/design.css" />

    alors qu'il fallait mettre:
    href="css/design.css" />

    je crois que c'est de là que viens l'erreur ;)
    0
  18. brookville Messages postés 6 Statut Membre 3
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
    <style>
    body
    {
    background: url("images/logos.png");
    background-repeat:no-repeat;
    background-position:left top;
    }
    </style>
    <title>Mon titre</title>
    </head>
    <body>
    </body>
    </html>
    0
  19. Hallo33 Messages postés 358 Statut Membre 29
     
    Ok merci à tous pour votre participation, ça commence à prendre forme ;)

    passé le header ça commence à devenir moins hardu :)

    j'ai encore un petit souci css (décidement celui-là) ;)

    j'ai donc réussi grâce à vous à mettre mon logo en haut avec un menu (issu d'un générateur de menu css) et maintenant sur ma page je souhaite faire un bloc en carré avec 4 cellules pour mettre des trucs dedans...

    avant avec un tableau c'était facile, mais là avec le CSS et malgré les conseils du site du zéro je suis un peu perdu...

    il faut faire des div c'est ça? mais comment pour avoir le résultat que je souhaite obtenir?

    Merci pour votre temps les CCMiens c'est gentil de m'accompagner.
    0
  20. Hallo33 Messages postés 358 Statut Membre 29
     
    J'ai mis ça pour essayer de faire la 1ère ligne du carré de 4 cellules

    HTML

    <div class="blublublu1"> blablablablabla <class="blublublu2"> blablablablabla</div>

    et en CSS

    .blublublu1 {
    margin-left: 250px;
    }

    .blublublu2 {
    margin-left: 750px;
    }

    Mais le PROBLEME c'est que je me retrouve avec

    blublublu1 blublublu2

    sur la même ligne et seulement séparé par un espace :(
    0
  21. Hallo33 Messages postés 358 Statut Membre 29
     
    RADZONE? ;)
    0