28172 sujets

CSS et mise en forme, CSS3

Etiquette sur bloc, numéro sur div...

Bonjour,
J'ai une page qui contient 3 colonnes (comme sur l'image). La colonne de gauche contient texte & images et potentiellement des blocs (couleur) de la colonne centrale et de la colonne de droite. Je souhaite mettre en place des 'étiquettes' pour nommer chaque bloc de la colonne centrale et droite (voir flèches rouges et numéro entouré de rouge sur l'image).
Une idée !
upload/1592228945-23311-position-numero-bloc-envoi-fo.jpg
On t'a répondu sur ton autre topic que tu as posté tout à l'heure, tu n'as même pas eu la politesse élémentaire de dire merci.
Je suis foncièrement désolé. Un grand merci pour vos réponses, mais je n'ai pas avancé, je ne sais pas comment faire. J'ai bien lu la documention signalée, mais rien à faire.
Coucou, quelque chose du genre ? 


.block {
counter-reset: counter-name;
}

.block::before {
counter-increment: counter-name;
content: counter(counter-name) ' '; /* les guillemets sont importants. */
}

Modifié par vzytoi (15 Jun 2020 - 17:09)
Merci vzytoi pour ta réponse. Ce que tu me donnes c'est pour avoir l'indice du bloc si je ne me trompe pas. Ce dont j'ai besoin c'est comment faire pour afficher ces étiquettes (code css et éventuellement html. Je pense que cela concerne le positionnement, mais c'est du chinois pour moi.
Encore merci.
Administrateur
Bonjour,

Le positionnement absolu te permet de faire cela. Il n'est pas grand chose sans le positionnement du bon ancêtre et pour ça il y a ce bon vieil article d'Openweb sur le positionnement relatif et le 3e de la série sur le positionnement absolu. Ne fais pas l'impasse sur le 1er ! Par contre le 2e sur float euh oui. On ne s'en sert plus que pour ce pour quoi il a été inventé : faire "couler" du texte autour d'une image et plus pour de la mise en page Smiley murf (entre temps ont été inventés et mis en place Flexbox et Grid Layout).
Tout d'abord un grand merci pour vos réponses.
Je vais reprendre ma demande. J'ai trois colonnes. Dans la colonne centrale et droite, des blocs avec un titre sur fond noir, une info de durée, une image (lien vers une vidéo) et enfin un texte descriptif (voir l'image dans le début de mon post). Cette page n'est pas responsive.
Mon but est de mettre une 'étiquette' à cheval sur le bloc noir du titre (à sa gauche) pour chaque bloc de couleur (bleu et mauve). J'ai beaucoup de mal avec le positionnement, j'ai fait de nombreux essais, mais rien de bien saillant.
Merci.
JF
J'ai avancé un peu mais pas de résultat intéressant. Je vous joins une image du résultat et le code (html et css) de mon test. Merci.
upload/1592298515-23311-capturedaeacran2020-06-16aa11.png 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
.bloc-main {
	background-color: #000;
	height: 65px;
	width: 332px;
	margin-bottom: 30px;
}
body {
	margin-left: 40px;
	margin-top: 40px;
}
.bloc-main-texte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #FFF;
	text-align: center;
	height: 65px;
	width: 332px;
	vertical-align: middle;
	display: table-cell;
	line-height: 65px;
}
.indice-bloc {
	background-color: #FFF;
	height: 20px;
	width: 20px;
	position: relative;
	z-index: 9999;
	top: 22px;
	right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	border-radius: 10px;
	border: 1px solid #000;
}
</style>
</head>

<body>
<div class="bloc-main">
  <div class="indice-bloc">10</div>
  <div class="bloc-main-texte">Placez ici le contenu de  class "bloc-main-texte"</div>
</div><!-- bloc-main -->


<div class="bloc-main">
  <div class="indice-bloc">00</div>
  <div class="bloc-main-texte">Placez ici le contenu de  class "bloc-main-texte"</div>
</div><!-- bloc-main -->

</body>
</html>
Modérateur
Salut luxojr,

Effectivement avec un petit bout de code html/CSS ca serait plus facile pour nous.
Mais bon rien de trop compliqué ici, il y a juste eu des cafouillages car on a eu du mal a cerner ton problème (vzytoi comme nous tous on a cru que tu voulais afficher des numéros comme sur ton image Smiley lol )

Alors il faut tu tu rajoute un élément "étiquette" dans chaque block comme tu le fait pour ton titre. Un truc du genre (on connait pas ta structure vu que tu ne nous a pas donné de code) :

<div class="article">
  <div class="titre">Titre</div>
  <div class="etiquette">étiquette</div>
  <div class="contenu">image et blablabla</div>
</div>


Et ensuite il faut positionner .etiquette en "position:absolute;" comme suggéré plus tot par les autres un peu comme ça :
.etiquette {
    position: absolute;
    top: 10px;
    left: -20px;
}

(soit avec un left négatif soit avec un right positif selon l'alignement que tu veux faire de tes étiquettes)
Il faut juste ne pas oublier de positionner le parent en "relative"
https://jsfiddle.net/undless/hewjbkna/

Hésites pas a nous faire des retours sur tes post (sur les autres aussi), que ca marche, que ca ne marche pas ou que tu n'en ai plus besoin... c'est toujours désagréable de ne plus avoir de nouvelle pour quelqu'un qui passe un peu de son temps a t'aider. Merci Smiley smile

Bonne continuation et tient nous au jus ! Smiley cligne
C'est ok, merci à tous pour votre patience et votre compréhension.
Bien à vous tous.
JF
Sujet clos
Aller à