Discussion :

[Maxoo]

salut,

J'ai un petit soucis, j'ai créé une classe erreur pour mes pages web, le problème, c'est qu'elle ne fais pas ce que je veux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="erreur">toto<br>toto</div><br><br>
<span class="erreur">toto<br>toto</span>

avec comme CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 .erreur{
	border: solid;
	border-color: Red;
	border-width: 2px;
	background-color: #FF3030;
	color: White;
	padding: 3px 3px 5px 5px;
}

le problème est visible ici : http://camelia.world.free.fr/develop...iv-erreur.html
- si je mets un span le carré rouge s'arrête bien apres le texte, mais la deuxième ligne chevauche la première
- si je mets un div il y a bien une identité de bloc, mais la largeur prend toute la page ...

Et moi ce que je veux, c'est un bloc, mais qui s'arrete à la fin du texte, pas qui s'étale sur toute la page ...

Quelqu'un à une idée ou la réponse à mon problème ?

[MasterOfChakhaL]

en utilisant le div est en rajoutant la propriété css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float: left; /*ou right*/

la largeur de ton div s'adaptera automatiquement à la largeur de son contenu...
par contre, tu risque d'avoir quelques soucis pour le positionner dans ta page...

personellement, j'aurais accepté le compromis de donner une taille prédéfinie a ma boite d'erreur

[Maxoo]

Merci bien, j'ai testé ça, ca fait effectivement ce que je veux, sauf que comme tu le dis : "tu risque d'avoir quelques soucis pour le positionner dans ta page" alors j'ai rajouté des <br> pour que le reste du texte passe en dessous ...

Mais je trouve ca pas super pro

(comme je ne fais que rarement des DIV) je me pose du coup la question : les div prennent toutes la largeur si il n'ont pas de taille spécifiée ?

je trouve ca bizarre ...

[MasterOfChakhaL]

les div prennent toutes la largeur si il n'ont pas de taille spécifiée ?

c'est le comportement par défaut de tous les éléments boites....

pour éviter les br, tu peux rajouter ceci sous ton div (en dehors)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<hr class="spacer" />

le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.spacer {
  visibility:hidden;
  height: 1px;
  clear: both;
}

la suite du contenu devrait se placer sous ton div...

[Maxoo]

Whaa !! Merci je viens d'apprendre un truc !!

Juste pour bien piger, clear: both; ca fait quoi des deux cotés ? ca efface ? ca libère de la place ?

Alors j'ai un peu modifié le truc, car déja avec un hr, il est interprété n'importe comment suivant IE ou firefox, alors j'ai préferé faire un joli DIV !! (bah oui j'aime bien les div maintenant...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="erreur G I">Vous devez rentrer un pseudo</div><div class="spacer"></div>

Et la je remarque que bah oui IE interprete encore comme une mer** mon div, et du coup je suis obligé de rajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.spacer {
  visibility:hidden;
  height: 10px;
  clear: both;
  overflow: hidden;
}

Car sinon 10px, IE l'agrandit comme pour mettre un caractère dedans (comme si y avait un &nbsp; !!

Et sinon je regle la taille dessous au lieu de me taper des <br> à tour de bras.

Merci MasterOfDiv euh ... MasterOfChakhaL

P.S : Faut vraiment que je passe au div pour avoir que des div partout, du coup ca sera le pied

[MasterOfChakhaL]

salut,

en fait, en utilisant float, l'élément sort du flux normal de la page. C'est pourquoi tu voyais le texte se placer sous ton div...

clear permet d'indiquer que tu ne veux pas qu'il y ait un autre élément a gauche (clear left) à droite (right) ou ni l'un ni l'autre (both)
avec both, tu es donc sur que ca va pousser le contenu vers le bas (puisque l'élément qui a la propriété clear, lui, se trouve dans le flux de la page)

pour le hr qui te donne des trucs bizarres, je ne comprends pas trop car c'est une classe que j'utilise régulièrement et qui semblait marcher sous ie, opéra, firefox safari!!!
pour ton div, le probleme doit venir du fait que, comme tu l'as dit, IE essaie d'inserer un &nbsp; et que 10 px ne doivent pas suffire à afficher une ligne.

pour te passer de l'overflow, je te suggère de définir line-height:10px au lieu de height