[div][CSS] gérer taille (width) d'un div ?

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:

---

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

---

avec comme CSS :

Code:

---

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 ?

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

Code:

---

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

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 ...

Citation:

---

Envoyé par Maxoo

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:

---

<hr class="spacer" />

---

le css:

Code:

---

1 2 3 4 5 6

.spacer { visibility:hidden; height: 1px; clear: both; }

---

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

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:

---

<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:

---

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 :lol:

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

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

Salut, d'abord merci de te donner du mal pour mon problème !!

Citation:

---

Envoyé par MasterOfChakhaL

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)

---

Compris !!

Citation:

---

Envoyé par MasterOfChakhaL

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

---

Alors j'ai essayé : et ca marche pas !!
Donc en fait : j'ai fais une autre classe spacerlineheight qui contient ce que tu m'a donné, je l'ai appliqué à un div et ca fait pas trop le résultat escompté.

Citation:

---

Envoyé par MasterOfChakhaL

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!!!

---

Après ce que tu m'as dit j'ai installé la dernière version d'opéra et j'ai fais ce petit test : http://camelia.world.free.fr/develop...iv-erreur.html

C'est beaucoup plus clair, j'ai fais tout les tests possible et surtout j'ai fais une copie d'écran de ce que je voyais suivant différent ordinateur !!

Et tu pourras remarquer que avec un line-height ca fait rien du tout sur un DIV, que ca marche un peu sur un HR ...

Et surtout tu pourras voir que la seule ligne qui est pareille sur tout les navigateurs et qui fait ce que je veux, c'est un <div class="spacer"></div> avec comme code CSS :

Code:

---

1 2 3 4 5 6

.spacer { visibility:hidden; height: 10px; clear: both; overflow: hidden; }

---

P.S : sur ma page c'est bien sur pas en hidden et avec une couleur de fond, mais c'est pour mieux situer le problème ;)

Voila, donc est-ce que tu peux me dire si tu vois ça toi aussi ? ou autres ?
Est-ce que je me suis planté dans le code CSS pour le HR ?

Merci MasterOfChakhaL ++

Salut,

bon j'étais un petit peu loin du clavier donc pas de réponses rapides...

là, je me réveille, mais la seule explication que je vois, c'est que mes css commencent toujours par:

Code:

---

1 2 3 4

* { margin:0; padding:0; }

---

je pense que ca doit quand même jouer...

une autre raison peut être aussi, quand je dis que ca fonctionne partout, il faut également prendre en compte que je m'efforce de faire des design pas trop précis qui ne souffrent pas d'une différence de quelques pixels...

Voilà ce que j'en pense pour l'instant.
Si quelque chose me vient à l'esprit, je reposterai pour t'en faire part...

Citation:

---

Envoyé par MasterOfChakhaL

bon j'étais un petit peu loin du clavier donc pas de réponses rapides...

---

pas de problèmes ;)

Citation:

---

Envoyé par MasterOfChakhaL

là, je me réveille, mais la seule explication que je vois, c'est que mes css commencent toujours par : [...code...]
je pense que ca doit quand même jouer...

---

J'ai ajouté cela : http://camelia.world.free.fr/develop...iv-erreur.html
du coup il est vrai qu'un HR ou DIV

Code:

---

1 2 3 4 5 6

.spacer { visibility:hidden; height: 10px; clear: both; overflow: hidden; }

---

font exactement le même boulot !!
Par contre IE lit toujours aussi mal les HR par rapport aux DIV ...

Citation:

---

Envoyé par MasterOfChakhaL

une autre raison peut être aussi, quand je dis que ca fonctionne partout, il faut également prendre en compte que je m'efforce de faire des design pas trop précis qui ne souffrent pas d'une différence de quelques pixels...

---

Oki, parce que moi si y a un pixel qui dépasse, je le trouve tout de suite ... :(

IE c'est nul de toute façon, m'énerve ce navigateur !! On s'éfforce de faire un truc propre et faut limite qu'il soit moche pour qu'on reste dans le code propre.

Le sujet est résolu, si vous voulez faire un clear both propre il faut le mettre dans un DIV !!

Code:

---

1 2 3 4 5 6 7

.spacer { visibility:hidden; overflow: hidden; clear: both; }   <div class="spacer"></div>

---

Car dans un HR ca sera pas pris pareil suivant les navigateurs.

Et si vous voulez spécifier une hauteur, vous pouvez le faire aussi dans le DIV, et ca sera la meme sur tout les navigateurs !!

Voila !!