[CSS] aligner en bas

aligner en bas [CSS] - HTML/CSS - Programmation

Marsh Posté le 22-03-2004 à 13:20:38    

J'aimerais savoir s'il existe un moyen d'aligner 3 boites verticalement de manière à ce que leur bas soit sur la même ligne
 
Ce code ne fonctionne pas :(
 

Code :
  1. #conteneur {
  2. position: absolute;
  3. width: 600px;
  4. height: 300px;
  5. }
  6. .boite {
  7. width: 200px;
  8. float: left;
  9. bottom: 0;
  10. vertical-align: bottom;
  11. }
  12. .rouge {
  13. background: red;
  14. height: 200px;
  15. }
  16. .verte {
  17. background: green;
  18. height: 150px;
  19. }
  20. .jaune {
  21. background: yellow;
  22. height: 250px;
  23. }
  24. <div id="conteneur">
  25. <div class="boite rouge">test</div>
  26. <div class="boite verte">test</div>
  27. <div class="boite jaune">test</div>
  28. </div>
  29. </body>


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 13:20:38   

Reply

Marsh Posté le 22-03-2004 à 15:15:53    

On dirait que ce n'est pas si évident que ça


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:22:32    

SIBELIUS a écrit :

On dirait que ce n'est pas si évident que ça


 
table et cellule avec un vertical align : bottom;
 
[:spamafote]

Reply

Marsh Posté le 22-03-2004 à 15:22:48    

Je pige pas ce que tu veux faire exactement ...

Reply

Marsh Posté le 22-03-2004 à 15:23:54    

hermes le messager a écrit :


 
table et cellule avec un vertical align : bottom;
 
[:spamafote]


 
 :non:  
CSS pour la mise en Forme
 
HTML pour le contenu

Reply

Marsh Posté le 22-03-2004 à 15:26:39    

protoinou a écrit :

Je pige pas ce que tu veux faire exactement ...  


Par défaut, les 3 blocs sont alignés en haut. Je veux simplement qu'ils soient alignés en bas du conteneur, quelle que soit leur taille.
 
Hermès > c'est bien ce qu'il me semble : aucune solution simple en CSS apparemment.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:28:51    

Y'a forcément une solution simple en CSS ..
 
Je ne suis pas pro dans le domaine, mais ça existe forcément !!

Reply

Marsh Posté le 22-03-2004 à 15:33:27    

protoinou a écrit :

Y'a forcément une solution simple en CSS ..
 
Je ne suis pas pro dans le domaine, mais ça existe forcément !!


 
MAIS PUTAIN vous allez arrêter avec vos CSS ???
 
<table class="truc">
<tr>
<td class="machine"></td>
</tr>
</table>
 
par rapport à <div class="zob"></div>
 
C'est QUOI ?  :heink:  :heink:

Reply

Marsh Posté le 22-03-2004 à 15:34:13    

SIBELIUS a écrit :


Par défaut, les 3 blocs sont alignés en haut. Je veux simplement qu'ils soient alignés en bas du conteneur, quelle que soit leur taille.
 
Hermès > c'est bien ce qu'il me semble : aucune solution simple en CSS apparemment.


 
ENCORE ?  :heink:  
 
Pas de solution uniquement AVEC DES DIVS, les CSS n'ont RIEN à voir là-dedant.  :o

Reply

Marsh Posté le 22-03-2004 à 15:35:11    

"zob" c'est un gros mot, je suis obligé de l'appeler comme ça ?
 
 :D


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:35:11   

Reply

Marsh Posté le 22-03-2004 à 15:36:20    

hermes le messager, c à cause de gens comme toi qu'il y'a encore des sites web mal faits.. ??
 
Qu'on ne peut lire que sous IE ... SNIF

Reply

Marsh Posté le 22-03-2004 à 15:36:26    

hermes le messager a écrit :


Pas de solution uniquement AVEC DES DIVS, les CSS n'ont RIEN à voir là-dedant.  :o  


Oui, j'ai outreusement amalgamé  :ange:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:37:50    

protoinou a écrit :

hermes le messager, c à cause de gens comme toi qu'il y'a encore des sites web mal faits.. ??
 
Qu'on ne peut lire que sous IE ... SNIF


Tu as vu le site de Hermès, avant de parler ?  :heink:  
C'est à cause de fanatiques qu'on est obliger d'utiliser 50 hacks en div pour que les sites passent partout alors qu'il est effectivement parfois plus utile d'utiliser les tableaux.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:39:52    

protoinou a écrit :

hermes le messager, c à cause de gens comme toi qu'il y'a encore des sites web mal faits.. ??
 
Qu'on ne peut lire que sous IE ... SNIF


 
petite information :
 
Je n'ai PAS IE, je suis sous Linux mandrake 9.1 (voir profil)...  [:totozzz]

Reply

Marsh Posté le 22-03-2004 à 15:42:54    

SIBELIUS a écrit :


Tu as vu le site de Hermès, avant de parler ?  :heink:  
 


 
Et comment je fais pour voir son site sans le lien?

Reply

Marsh Posté le 22-03-2004 à 15:43:36    

protoinou a écrit :


 
Et comment je fais pour voir son site sans le lien?
 


 
Et comment je fais des sites uniquement consultable avec IE sans IE ?  [:yaisse2] de  [:yaisse2]

Reply

Marsh Posté le 22-03-2004 à 15:43:54    

protoinou a écrit :


 
Et comment je fais pour voir son site sans le lien?
 


Sans doute de la même manière que tu juges les gens sans les connaître  :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:44:50    

protoinou a écrit :


 
Et comment je fais pour voir son site sans le lien?
 


 
Sinon, pour mes sites, tu les verras la prochaines fois que je montre un exemple... Fait une recherche sur le forum...   :o


Message édité par Hermes le Messager le 22-03-2004 à 15:45:15
Reply

Marsh Posté le 22-03-2004 à 15:47:49    

SIBELIUS a écrit :


Sans doute de la même manière que tu juges les gens sans les connaître  :)  


Oh là c'est petit et facile comme réplique.
 
Même s'il est vrai que j'ai aussi répondu un peu attivement à Hermes ...
 
Mais bon çà change pas le fait que les tags tables c pas pour la mise en page ...

Reply

Marsh Posté le 22-03-2004 à 15:49:19    

protoinou a écrit :


Oh là c'est petit et facile comme réplique.
 
Même s'il est vrai que j'ai aussi répondu un peu attivement à Hermes ...
 
Mais bon çà change pas le fait que les tags tables c pas pour la mise en page ...


 
Personne ici ne dit le contraire.
 
On te dit que dans CERTAINS CAS RARES, il vaut mieux une table que des hacks pourris.  :hello:

Reply

Marsh Posté le 22-03-2004 à 15:50:10    

protoinou a écrit :


Mais bon çà change pas le fait que les tags tables c pas pour la mise en page ...


Sur le principe : tout à fait d'accord, c'est ce que je prône aussi car c'est contre la sémantique et pose des soucis d'Accessibilité aux aveugles si les tables sont trop alambiquées...
 
Mais pour répondre à ma question ...  :ange:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 15:51:57    

hermes le messager a écrit :


 
Personne ici ne dit le contraire.
 
On te dit que dans CERTAINS CAS RARES, il vaut mieux une table que des hacks pourris.  :hello:  


 
 :jap: oki  :jap:  
 
Ca veut dire que pour le cas étudié (CF premier post), tu utiliserais un tableau? Parceque c'est ce que j'avais compris, et si c'est le cas je ne trouve pas ça terrible.  
 
Mais bon après chacun sa façon de voir les choses

Reply

Marsh Posté le 22-03-2004 à 15:53:08    

protoinou a écrit :


 
 :jap: oki  :jap:  
 
Ca veut dire que pour le cas étudié (CF premier post), tu utiliserais un tableau? Parceque c'est ce que j'avais compris, et si c'est le cas je ne trouve pas ça terrible.  
 
Mais bon après chacun sa façon de voir les choses


 
Oui, parce que c'est la solution la plus simple et la plus compatible que je connaisse dans ce cas précis. Et si tu as mieux avec des divs, nous t'écoutons...  :o

Reply

Marsh Posté le 22-03-2004 à 15:55:12    

Puis s'il y a juste un tableau avec trois cases c'est pas un drame.
Là où ça devient mal c'est quand dans chacune des cases t'as d'autres tableaux qui eux-même en contiennent d'autres, etc.
(genre un tableau avec une case par item de menu alors qu'une liste est plus appropriée)


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 22-03-2004 à 15:59:19    

:jap: Yes les gars, je suis ok avec vous :jap:
 
en plus j'ai rien à proposer .. :)
 
A bientot sur d'autres posts  :hello:  

Reply

Marsh Posté le 22-03-2004 à 17:11:55    

Code :
  1. #conteneur {
  2. position: absolute;
  3. width: 600px;
  4. height: 300px;
  5. }
  6. .boite {
  7. width: 200px;
  8. position: absolute;
  9. bottom: 0px;
  10. }
  11. .rouge {
  12. background: red;
  13. height: 200px;
  14. left:0px;
  15. }
  16. .verte {
  17. background: green;
  18. height: 150px;
  19. left:200px;
  20. }
  21. .jaune {
  22. background: yellow;
  23. height: 250px;
  24. left:400px;
  25. }


 
 
:??:
 
EDIT: bien entendu tout dépend comme d'hab de quelles sont les tailles prévisibles/dynamiques...


Message édité par fastclemmy le 22-03-2004 à 17:12:53
Reply

Marsh Posté le 22-03-2004 à 18:28:31    

Oui... mais non, car on ne connait pas la largeur des boites.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 18:30:55    

SIBELIUS a écrit :

Oui... mais non, car on ne connait pas la largeur des boites.


 
Ya vraiment pas d'autre solution qu'une table avec une ligne - 3 cellules, les 3 avec vertical-align : bottom; et un div dans chacune d'elle avec juste la hauteur spécifiée. ;)

Reply

Marsh Posté le 22-03-2004 à 18:36:01    

Oui, j'en suis arrivé à cette conclusion également


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 22-03-2004 à 23:01:54    

SIBELIUS a écrit :

Oui... mais non, car on ne connait pas la largeur des boites.


 
alors oui justement j'ai une question parce que j'ai dû revenir aux tableaux suite à ce genre de problème.  
 
En fait j'avais un formulaire (avec un textarea notamment) rempli par l'utilisateur, ce qui fait que je ne connais pas la hauteur du texte saisi. Bon avec les tableaux l'affichage se fait tout seul, j'ai dû abandonner l'idée des CSS en étant confronté à ce problème de "taille" des données.  
 
Bref ma question: si je voulais garder mes CSS y a-t-il un moyen simple, (sachant qu'on ne connait pas de façon simple la hauteur du champs - à moins de compter les lignes etc. mais je trouve ça compliqué), d'afficher le contenu du textarea ?

Reply

Marsh Posté le 23-03-2004 à 10:14:08    

Je m'insurge.  
table -> données tabulaires et rien d'autre.  
 
Si tu ne trouves pas de solution adéquat pour présenter les données comme tu le souhaites, la meilleure solution est de les présenter autrement.

Reply

Marsh Posté le 23-03-2004 à 10:23:05    

bobe a écrit :

Je m'insurge.  
table -> données tabulaires et rien d'autre.  
 
Si tu ne trouves pas de solution adéquat pour présenter les données comme tu le souhaites, la meilleure solution est de les présenter autrement.


 
Non, le code doit pouvoir s'adpater, et de toutes manières, un client a le droit d'avoir des souhaits particuliers, qu'il ait raison ou tord d'ailleurs.
 

Reply

Marsh Posté le 23-03-2004 à 10:32:52    

hermes le messager a écrit :


 
Non, le code doit pouvoir s'adpater


 
Non. Ça, c'est la façon de penser du millénaire dernier.
 

hermes le messager a écrit :


 
un client a le droit d'avoir des souhaits particuliers, qu'il ait raison ou tord d'ailleurs.
 


 
Certes, mais c'est/ce devrait être au développeur de lui dire en retour ce qui est possible et ce qui ne l'est pas, par rapport aux outils dont il dispose.
 
Si le client demande un site entièrement en flash, je pense qu'il lui sera indiqué que c'est difficilement réalisable, ou bien à prix prohibitif, ce qui est un argument généralement convaincant.
Ici, point de surcoùt certes et la mauvaise habitude de se rabattre rapidement sur de mauvaises méthodes persiste.
 
Bien sùr, mon point de vue est celui d'un amateur, non d'un chef d'entreprise. Mais après tout, on est ici pour discuter et débattre, de manière à tendre virtuellement vers un idéal. ;)

Reply

Marsh Posté le 23-03-2004 à 10:40:36    

bobe a écrit :


 
Non. Ça, c'est la façon de penser du millénaire dernier.
 


 
d'un autre côté vu qu'on doit bosser avec des browsers du millénaire dernier... :whistle: (IE6)


Message édité par antp le 23-03-2004 à 10:40:44

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 23-03-2004 à 10:43:50    

C'est pas faux, cependant, là on parle d'une chose non réalisable à l'heure actuelle avec les css.  :ange:


Message édité par bobe le 23-03-2004 à 10:44:17
Reply

Marsh Posté le 23-03-2004 à 10:44:37    

bobe a écrit :


 
Non. Ça, c'est la façon de penser du millénaire dernier.


 
N'importe quoi.  :o  
 
Je ne vois pas pourquoi utiliser des technologies nouvelles devraient imposer des limites à la créativité, bien au contraire, ça doit permettre de nouvelles choses, et surtout pas empêcher quoi que ce soit.
A cause d'avis comme le tien, on va établir une ligne de rupture entre ceux qui feront "bien" les choses et ne pourront pas faire certaines choses, et ceux qui les font "mal" et pourront tout faire.
 
A ton avis, que vont choisir les clients et les entreprises ?
 
Si on veut espérer imposer des normes aux entreprises, il faut déjà commencer par réfléchir un peu et pas hésiter non plus à se remettre soi-même en question.
Aucune techno n'est parfaite et comme en musique la rêgle c'est :
 
Connaitre parfaitement la technique et les rêgles pour ensuite pouvoir les oublier et les transgresser.
 

Reply

Marsh Posté le 23-03-2004 à 10:47:42    

bobe > Ce que je demande n'est pas utopique : je veux simplement aligner des blocs par le bas.
Si les div ne permettent pas un positionnement aussi basique, j'estime qu'il y'a un sérieux problème chez eux.
Si les div empêchent de faire ce qu'on veut (alors qu'on peut le faire autrement) et imposent plus de contraintes qu'autre chose, c'est un peu contradictoire : suivez les normes et l'évolution web, mais faites des mises en page stéréotypées, sinon ça n'ira pas !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 23-03-2004 à 11:05:52    

hermes le messager a écrit :


 
Je ne vois pas pourquoi utiliser des technologies nouvelles devraient imposer des limites à la créativité


 
Tu trouves que ce qui se faisait (et se fait encore malheureusement, mais dans une moindre mesure...) au siècle dernier, c'était créatif ? virginmega.fr et le site de la poste, c'est créatif ? C'est monstrueux oui.
 
Créativité en harmonie avec les normes en vigueur d'accord.  
C'est au développeur à discuter avec le client pour cerner ses besoins/envies et voir ce qui est possible et ce qui ne l'est pas.  
Et mettre en avant la valeur ajoutée qu'apporte un respect des normes et une bonne utilisation des outils dans le développement du site.
 

hermes le messager a écrit :


 
bien au contraire, ça doit permettre de nouvelles choses, et surtout pas empêcher quoi que ce soit.
 


 
C'est le cas.  :heink:  
Les CSS et le DOM donnent beaucoup plus de possibilités qu'on n'en avait avant.
 

hermes le messager a écrit :


 
A ton avis, que vont choisir les clients et les entreprises ?
 


 
Ceux qui se montreront les plus professionnels.
 

hermes le messager a écrit :


 
Aucune techno n'est parfaite et comme en musique la rêgle c'est :
 
Connaitre parfaitement la technique et les rêgles pour ensuite pouvoir les oublier et les transgresser.
 


 
Je sais pas si la comparaison est vraiment bonne. On parle ici théoriquement d'une techno sensée pérenniser les documents html diffusés sur le net. Si c'est pour la transgresser sans arrét, autant foutre les normes à la poubelle tout de suite.
 
De toute façon, je crois après réflexion que ce que veut faire sibelius est possible en css en utilisant display: table, etc. (non fonctionnel sous IE forcément) donc cette discussion sur les normes qui restreignent la créativité ne mène à rien. En l'occurence, ce sont les navigateurs obsolètes qui limitent la créativité. (Ouf,  :D )
 
edit: laissez tomber le premier paragraphe. le vertical-align ne s'appliquerait qu'au contenu des div à priori.


Message édité par bobe le 23-03-2004 à 11:14:32
Reply

Marsh Posté le 23-03-2004 à 11:14:25    


 
1) Je n'ai pas windows, ni IE, alors tes comparaisons avec virginmedia, tu les gardes... Je connais parfaitement le problème...
 
2) Je ne fais que du XHTML 1.1 + CSS.
 
3) T'es butté, et tu veux pas comprendre qu'il est légitime de pouvoir faire des sites de 100% de hauteur avec des éléments auto-redimensionnés en bas qui puissent rester en bas.
Tant pis pour toi, mais arrête d'opposer les gens qui utilisent les tables et ceux qui utilisent les divs.
 
Les divs permettent des choses SUPPLEMENTAIRES qu'on ne peut pas faire avec des tables. Pour autant si quelque chose est infaisable avec des divs, il n'y a AUCUNE RAISON SERIEUSE autre que de l'extrémisme qui va dégouter et faire fuir tout le monde, de se passer des tables...


Message édité par Hermes le Messager le 23-03-2004 à 11:14:55
Reply

Marsh Posté le 23-03-2004 à 11:14:27    

Donc il est préférable d'utiliser des div en display: table, plutôt que des tables !? Eh ben si c'est pas beau ça  :pt1cable:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed