28172 sujets

CSS et mise en forme, CSS3

[Résolu] Petit problème agaçant

Bonjour

Lorsqu'un utilisateur demande une page qui n'existe pas sur le site, le programme PHP de traitement de l'erreur 404 affiche la page d'accueil avec un message explicatif.
Voir par exemple ce test
Le message disparait quand on clique dessus.

Comme certains utilisateurs n'ont pas l'idée de cliquer sur le message, je désire mettre un petit "×" en haut à droite du message, ce que je fais généralement dans ces situations, et me semble préférable à un bouton "ok".
Pour ce faire, j'ai essayé de définir 
#error404 p:before{
	content:"×";
	font:caption;
	position:absolute;
	right:0.25em;
	top:0.25em;
}

SI vous regardez attentivement, ce petit caractère "×" se trouve à la hauteur du message, à droite de la page.
La raison est très claire: le "p:before" se positionne par rapport au <div id="error404">, qui est en position "fixed", et non par rapport au <p> qui contient le texte.
Ce qui est moins clair, c'est comment arriver au résultat souhaité, c'est à dire avoir le petit "×" à l'intérieur du cadre du message.

Merci de m'apporter vos lumières.
Bonjour.

position : relative;


sur '#error404 p', pour redéfinir l'élément de référence...

(effectivement, j'ai eu du mal à trouver le x... il est bien petit d'ailleurs pour lui cliquer dessus, au moins augmenter son padding ?)

Smiley smile
Merci de ta réponse
Voici le résultat qui semble fonctionner:

Le HTML est 

<div id="error404" onclick="this.className='hidden'">
    <p>La page demandée <i>(/schtroumpf.html)</i> n'est pas disponible.<br>
           Vous avez été redirigé sur la page d'accueil.</p>
</div>

avec 
#error404{
	position:fixed;
	top:250px;
	left:0;
	width:100%;
	cursor:pointer;
}
#error404 p{
	display:table;
	border:2px solid red;
	border-radius:0.5em;
	background-color: #FFFF88;
	color:black;
	font-family: Geneva,Arial,Helvetica,sans-serif; 
	font-size:1em;
	font-weight:bold;
	margin:auto;
	padding:1em;
}
#error404 p:before{
	content:"×";
	font:caption;
	font-size:1.25em;
	position:relative;
	float:right;
	margin:-1.0em -0.5em;
}


J'ai augmenté la taille du "×", mais il n'est pas important de cliquer exactement dessus, si on clique à côté ça ferme aussi la fenêtre, c'est purement ergonomique pour jouer sur les réflexes des utilisateurs sans qu'ils se posent de question.

La raison pour laquelle je l'avais mis en absolu, c'est pour qu'il soit en haut à droite.
"Naturellement" il se met à gauche et centré vertical car le <p> est en display:table pour assurer que la largeur est ajustée au contenu.
En mettant float:right, il se met à droite, la marge droite à -0.5em compense le padding du <p> Par contre en hauteur, je m'en tire avec marge haute à -1em, parce que je sais que mon texte fait exactement 2 lignes, mais si j'avais un texte avec un nombre variable de lignes, je ne sais pas comment il faudrait faire.
PapyJP a écrit :
En mettant float:right, il se met à droite, la marge droite à -0.5em compense le padding du <p> Par contre en hauteur, je m'en tire avec marge haute à -1em, parce que je sais que mon texte fait exactement 2 lignes, mais si j'avais un texte avec un nombre variable de lignes, je ne sais pas comment il faudrait faire.


Bonjour PapyJP,

J'ai effectué un petit test en modifiant ceci:

#error404 p {
...
position: relative;/* référent de l'élément généré */
}

#error404 p:after {
position: absolute;
right: -1em;
top:   -1em;/* conduit à supprimer les marges */
}
Ainsi la croix se place en haut à droite quelque soit la taille de P.

Edit : Du coup j'ai viré le float bien sûr.
Modifié par Greg_Lumiere (02 Mar 2017 - 13:39)
Meilleure solution
Sujet clos
Aller à