Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Organiser son code CSS


Sujet :

CSS

  1. #1
    Nouveau membre du Club
    Organiser son code CSS
    Ma question est un peu générale. J'aimerais savoir comment vous faites pour utiliser un élément (pour mon cas un cœur animé donc deux images et une animation) dans des contextes différents : par exemple sur la page d'accueil le coeur est dans une div positionnée en haut et dans les pages intérieures on retrouve notre petit cœur dans différents paragraphes. En plus, pour corser l'affaire, kid des medias query ? Je me sen un peu perdu, j'ai lu qu'il fallait utiliser plusieurs classes mais je n'arrive pas à le faire correctement et proprement. Avez-vous une idée ou un petit tuto qui parle de se sujet ? Merci

  2. #2
    Modérateur

    Bonjour,
    tu mets tous tes éléments dans un conteneur et tu t'occupes de positionner ce conteneur et lui seul selon ton besoin.

    En utilisant une classe cela te permet de mettre les différent positionnement dans le même fichier CSS.

    Par exemple :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #logo {
      width: 5em;
      height: 5em;
      background: #ABC;
    }
    .main-page #logo {
      position: absolute;
      left: 1em;
      top: 1em;
    }

    et le HTML correspondant
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    <div id="logo"></div>

    l'élément se placera dans le flux sauf si ton <body>, par exemple possède la classe main-page, <body class="main-page">.

    Idem pour l'utilisation des média-queries, par exemple :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    @media (max-width: 767px) {
      #logo {
        display: none;
      }
    }

  3. #3
    Nouveau membre du Club
    Merci NoSmoking,
    et si jamais je veux utiliser ce logo dans un autre endroit en lui modifiant une ou deux règles (par exemple les dimensions ou la couleur, par exemple pour une media-query > 932px la taille du logo change) je dois créer un autre logo ou comment ?

  4. #4
    Modérateur

    je dois créer un autre logo ou comment ?
    tu peux te créer de nouvelles règles associées, ou non, à des média-queries :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    @media (max-width: 968px) {
      #logo {
        background: #F00;
      }
    }

    tu fais ce que tu veux en fonction des points de rupture que tu choisis.

  5. #5
    Nouveau membre du Club
    Merci beaucoup NoSmoking, c'est clair et net. Bravo

###raw>template_hook.ano_emploi###