Organiser son code CSS

**arwin** · 14/10/2020, 18h40

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

**NoSmoking** · 15/10/2020, 08h00

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;
  }
}

**arwin** · 15/10/2020, 20h46

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 ?

**NoSmoking** · 16/10/2020, 14h43

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.

**arwin** · 17/10/2020, 21h55

Merci beaucoup NoSmoking, c'est clair et net. Bravo

Organiser son code CSS

CSS

Discussions similaires

Partager

Partager