hello
 
J'ai un div avec  
vertical-align: bottom;
et ca marche pas le texte ce trouve vers le haut du div. C'est quoi l'erreur ? merci

http://forum.hardware.fr/forum2.ph [...] 10#t389941

merci j'ignorais que vertical-align: bottom; n'influencait pas directement le texte.
Mais malheureusement je n'ai pas reussi à faire ce que je veux le texte est toujours en haut.
 

1. vertical-align ne s'applique pas à des blocs (ou alors à des cellules de tableau)
 
2. Ton texte est en haut parce que par défaut les DIV s'empilent les uns sur les autres.
 
 
Donc si tu veux mettre ton bloc en bas, le mieux est de le positionner en bas (avec le positionnement absolu) ce qui implique que le bloc conteneur (directory0) soit lui même positionné (un "position: relative;" suffira).
Lire l'article sur le positionnement dans la FAQ.

j'ai mis position: relative; sur directory0, et ca marche pas.
Mais en s'en fout de la position du div directory0 non ? c'est le div.directory0_r qui contient le texte.
Tu dit que les div s'empilent et que c'est pour ca que le texte ne s'alligne pas comme il faut, mais seul les div.directory0_l et div.directory0_r on un fond et donc c'est seulement l'alignement vertical par rapport à ces 2 div qui m'interresse, le div.directory0 n'est que "virtuel".

Bon je viens de regarder un peu mieux ton code. Le mieux serait peut être de donner un padding-top à directory0_r, ce qui aura pour effet de faire descendre le texte (ton DIV n'est pas très haut).

Bon alors voila ce que je cherche a obtenir (le 1er qui est fait avec un tableau) :
 

 
mais j'obtient le 2ème, il y a un léger décalage du texte vers le heut et cpa bieng    
 
Sur le 3ème j'ai rajouté le padding au directory0_r, mais ca joue pas, parce que les images d'arrière plan n'ont pas la même couleur que celui-ci. Et comme vous pouvez le voir la couleur bleu "dépasse"

Attention, IE inclu le padding dans la hauteur alors que Mozilla le compte en plus (ce qui est le bon comportement)
 
Il faut passer par un petit "hack" : http://tantek.com/CSS/Examples/boxmodelhack.html

merci, mais désolé j'ai pas trop compris comment ca fonctionne et surtout comment appliquer ce truc a mon probleme  

J'ai encore un autre problème mais celui-ci est plus important : j'arrive pas à aligner le contenu d'un div  (1 div et un tableau)  au centre. Comment est ce qu'il faut faire, j'ai essayer text-align: center; ou directement dans le div : <div align="center" mais aucun  n'aligne tout mon contenu au centre.
J'arrive à aligner le tableau au centre : <table align="center"> mais pas le div.

Si tu veux centrer un div (ou une table) :
 
pour le div à centrer :
margin-left: auto;
margin-right: auto;
 
Et pour corriger un bug d'IE :
 
pour le div contenant celui à centrer :
text-align: center;
 
pour le div à centrer : (pour rétablir l'alignement à gauche, à désactiver si tu veux que son contenu soit centré aussi)
text-align: left;

 
J'ai essayé ta méthode en rajoutant un nouveau div dans le div principal :

Ca aligne tout le contenue mais ca fonctionne que dans IE.
 
J'ai essayer une autre méthode, aussi en rajoutant un div dans le div principal :
<div align="center">
 
Ca fonctionne sur moz IE netscape, mais pas sur opera.
 
Alors c'est quoi la méthode qui me permette de tout aligner au milieu dans tous les navigateurs si possible sans rajouter de div ?

Je sais pas, je me perds dans tes explications
Tu dois aligner quoi ? Du texte ou des blocs ?

alors je vais essayer d'etre plus clair :
 
j'ai un div qui doit contenir les trucs les plus important de la page, le contenue quoi, et je voudrais que tout ce qui ce trouve dans ce div soit aligné au centre, que ce soit des tableau ou même des div.

 
Pour le centrage vertical dans un div : impossible.
 
Pour le centrage horizontal DANS un div : très simple :
 
- text-align: center; appliqué au DIV.
- margin: 0px auto 0px auto; appliqué aux éléments (non texte) que tu veux centrer dans le div.

 
Admettons que tu aies :
 
div.directory0_r {
  height: 15px;
  padding: 5px;
}
 
Pour Mozilla, la hauteur totale du DIV sera : 15 + 5 = 20 px.
 
Pour IE ce se sera 15px, avec seulement 10px utiles à l'intérieur du DIV (15 - 5 = 10px)
 
D'où l'idée du hack, qui consiste à utiliser un bug de IE pour qu'il ne lise qu'une partie des propriétés CSS :
 
div.directory0_r {
  padding: 5px;
  height: 20px;
  voice-family: "\"}\"";  
  voice-family:inherit;
  height: 15px;
}
 
IE s'arrêtera de lire à "height: 20px" alors que Mozilla ira jusqu'à la fin.
 
Donc pour IE la hauteur totale du DIV sera de 20px et pour Mozilla de 15 + 5 = 20px. Donc la même hauteur pour les 2 navigateurs
 
 
Sinon il y a un autre moyen pour régler (un peu) la hauteur du texte dans ton DIV est de jouer avec la propriété line-height. A toi de faire des essais.

 
http://forum.hardware.fr/forum2.ph [...] 10#t229960

 
   merci ca fonctionne, et sur tout les browsers en plus  

 
ok je teste tout ca  

rebonjours,
 
au lieu de recréer 10000 topics semblable je profite de celui-la pour ma question qui concerne un probleme similaire :
 
j'ai à peut près cette structure :
 

 
En fait j'arrive pas a faire en sorte que le div de gauche prenne toute la largeur qui n'est pas prise par le div de droite qui lui doit être définie en px.
C'est bizzard, j'ai pourtant déjà reussi à faire des trucs très très semblables mais la j'y arrive pas, j'ai suremment dû oublier qq'chose.

Il suffit que le div de gauche ne soit pas "float", non ?

si j'enlève le "float" du div gauche, il prend 100% de la largeur du "<td>" et donc celui de droite se retrouve en dessous

Mets un margin-right de la taille du div de droite à celui de gauche.
Ou bien mets celui de droite dans celui de gauche.

ah oui merci ! javais fait comme ca deja une fois mais je me souvenais plus.
Mais ca me parait pas très propre comme méthode, c'est la seul ?

en fait cette technique fonctionne seulement avec des position: absolute; non ?
Dans mon cas j'ai pas de "position: absolute;" et ca marche pas

bah non
 
<div id="a">
  <div id="b">
  </div>
</div>
 
si b est en float: right ça doit faire ce que tu veux il me semble.

quand je fait ca, en donnant un "margin" au div "a" c'est le toute qui a un "margin"
 
ce que j'ai fait, ca affiche le div a et b au bons endroits mais le probleme c'est qu'ils sont pas sur la meme "ligne" :

 
Faut faire l'un ou l'autre

  oups
maintenant j'ai fait comme tu a dit mais ca m'affiche quand meme mes 2 div l'un au dessus de l'autre.

Faut attendre le passage du grand maître des CSS (gm_superstar)

  ben je vais chercher en attendant

bon alors j'ai pas (encore) reussi, mais j'ai remarqué un truc interessant.
 
Ca ca marche pas, le div.a est tout petit en largeur :

 
Par contre si au lieu de mettre la largeur en px pour le div.b je la met pour le div.a, tout fonctionne : le div.a prend ca largeur en px alors que le div.b prend la largeur du reste du <td>.
 
Le problème c'est que dans mon cas je dois absolument définir la largeur en px pour le div.b

bon alors j'ai toujours pas trouvé comment faire. euh... t'est là gm_superstar ?

ben... UP
je rappel que je veut faire ca avec des div :
 

c'est impossible de faire ca avec des div ??

 
Oui, ou en tous cas, sans utiliser des ruses immondes dans tous les sens, c'est impossible pour une raison très simple.
 
Tu as besoin d'un élément qui comporte plusieurs sous-éléments, or un div est unique. On peut évidemment mettre des divs dans un div, mais un div n'est pas un élément divisible comme une table.
 
Dans ton cas précis, la table reste de très loin la meilleure solution avec évidemment les propriétés indiquées dans les CSS.

hum, mais dans ce cas cette table serait imbirqué dans une autre table... il me semble que ce soit pas très bien ca.

 
Non, la table fait 100% de large, la cellule de droite la longueur en px que tu veux et la cellule de gauche prendra ce qui restera des 100%

bon, faites pas attention aux couleurs immondes, c'est pour bien voir les blocs
 

je disait que c'est pas super parce que ca fait pas très propre, mais ca passe le validateur il me semble.