css utilisation de :before sur un bloc, espace laissé vide

LaPomme

Membre
Bonsoir tout le monde et joyeux noël !

C'est un peu triste mais je passe noël seule loin de mes parents, c'était un peu compliqué de se rejoindre.
Du coup je suis sur la construction de mon site et je bloque sur un problème de contenu que j'affiche avec la propriété before sur un bloc de titre.

HTML
<div class="bloc-du-titre">
    <h3>
        Le titre de mon site
    </h3>
</div>
CSS
.bloc-du-titre {
    margin: 0 10px;
    padding: 8px;
    background: #f3f3f3;
    border: 1px solid #ededed;
    box-shadow: 1px 0 3px rgba(0,0,0,0.25);
}

.bloc-du-titre:before {
    content: url(image/icon-titre.png);
    position: relative;
    right: 30px;
}
J'utilise cette méthode parce que je place l'icône hors du canvas principal mais par contre juste avant le titre de la page, puisque je décale l'icône vers la droite il laisse un espace vide (son emplacement original). De plus comme l'icône est assez grand (50x50px) il étire le bloc titre en hauteur...

Comment remédier à ce comportement ?
Est-ce que j'utilise la bonne méthode ou bien il y a mieux à faire ?

Merci !!
 
Solution
Si si ça fonctionne, à condition que je te donne le bon code CSS
retire le flex-direction: row; (sans indication flex-direction est toujours à row) et rajoute align-items: start;
CSS
.bloc-flex {
    display: flex;
    align-items: start;
}

Nicolas

Membre
Salut @LaPomme et joyeux noël quand même !

Pour l'espace laissé vide à gauche du titre, un simple margin-left: -50px appliqué à bloc-du-titre devrait suffire.
Par contre pour l'étirement vertical ça me semble plus délicat en l'état.

Pourquoi ne pas utiliser flex ?

HTML
<div class="bloc-flex">
    <div class="bloc-icone">
        <img src="images/icone.png" />
    </div>
    <div class="bloc-du-titre">
        Le titre de mon site
    </div>
</div>
CSS
.bloc-flex {
    display: flex;
    flex-direction: row;
}

.bloc-icone {
    position: relative;
    right: 60px;
}
 

Cascadeur

Membre
Ben non ça ne peut pas fonctionner, tes deux blocs sont liés.
Ni avec :before et content: url() ni avec flex tu n'arriveras à tes fins...

Mais je ne comprends pas bien ce que tu veux faire, mettre une icône plus grande qu'un titre pourquoi pas, mais en quoi ça te gène que cela modifie la hauteur de la div titre ? Visuellement qu'est-ce que tu cherches à faire ?
 

LaPomme

Membre
Merci Cascadeur de t'intéresser au problème.
Effectivement je m'exprime peut-être mal sur ce que je veux faire, donc voici un croquis.
Comment placer l'icône (roue crantée ici) hors du body en haut à gauche ?
Capture d’écran 2020-12-25 222413.png
 

Nicolas

Membre
Si si ça fonctionne, à condition que je te donne le bon code CSS
retire le flex-direction: row; (sans indication flex-direction est toujours à row) et rajoute align-items: start;
CSS
.bloc-flex {
    display: flex;
    align-items: start;
}
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut