Empiler horizontalement des éléments sans retour à la ligne [HTML/CSS] - HTML/CSS - Programmation
Marsh Posté le 04-02-2006 à 18:29:19
overflow : hidden;
Marsh Posté le 04-02-2006 à 18:31:07
Bah si je fais un overflow: hidden, mes éléments vont être cachés, non?
C'est pas ce que je veux. Ce que je veux, c'est que mes éléments puisse s'ajouter en enfilade, quel que soit leur nombre, et ce, sur la même ligne!
Marsh Posté le 04-02-2006 à 18:32:49
comprend po
Si tu nous montrai ton code et ta css déjà.
Mais si t'as pas de retour à la ligne ta div va s'élargir. Je vois pas l'intéret
Marsh Posté le 04-02-2006 à 18:35:47
afbilou a écrit : CSS : white-space: nowrap; |
Euh, ça ne semble pas marcher.
Imaginons le code suivant (très simplificateur)
pour le HTML:
<div id="container"> |
Et le code CSS suivant:
.floatelt {float: left; width: 300px;} |
Où dois je mettre mon white-space: nowrap?
Marsh Posté le 04-02-2006 à 18:36:59
http://www.w3schools.com/css/pr_text_white-space.asp
Marsh Posté le 04-02-2006 à 18:41:56
Bon, voici mon code, créé vite fait à la main:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Je voudrais que les boîtes rouge se mettent en enfilade, sans être bloquées par la largeur du #main ou même de ma fenêtre.
Je dois m'absenter qq instants.
Marsh Posté le 04-02-2006 à 18:43:50
dans ce cas m'est avis qu'il faut jouer avec les positions des blocs.
Marsh Posté le 04-02-2006 à 18:44:39
Citation : Je voudrais trouver le moyen de mettre côte à côte des liens |
Code :
|
Citation : Euh, ça ne semble pas marcher. |
Marsh Posté le 04-02-2006 à 18:45:47
afbilou a écrit :
|
ca marche pas
Marsh Posté le 04-02-2006 à 22:42:35
Me voilà de retour.
Donc, on est est où? Je n'ai toujours pas trouvé de solution à ce problème qui pourtant a l'air simple.
Est ce qu'au moins vous avez compris mon besoin?
Si on prend ce code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Mon but est que les sections "Float" en rougent se rangent côte à côte, au lieu d'être ramenées sur plusieurs lignes...
J'ai aussi essayé de mettre le #large en position: absolute, mais ça ne marche pas... Ca avait l'air d'être une bonne piste...
Marsh Posté le 04-02-2006 à 22:50:30
[HS]
Marsh Posté le 04-02-2006 à 22:57:15
afbilou a écrit :
|
Bah j'ai voulu épurer mon exemple! Les liens ne changent pas grand chose à mon avis... Ce ne sera qu'un détail à rajouter par la suite.
afbilou a écrit :
|
Bah parce qu'à mon avis, avec les inline, ce sera encore pire (cf les listes faites avec des inline, ça passera à la ligne, j'en suis quasi certain.
afbilou a écrit :
|
Bah en fait, parce qu'à la base, je voulais personnaliser chacun des floatx. C'était une base de départ. Bien entendu, dans du "'vrai" code, je resterai avec une classe unique.
En fait, pour info, ça marche si je mets mes liens dans des celllules de tableau, mais c'est vraimen pas élégant, et également, j'ai des problèmes d'ajustement par la suite (cf ce poste: http://forum.hardware.fr/hardwaref [...] 4201-1.htm )
Donc, je voudrais éviter les tableaux.
Marsh Posté le 04-02-2006 à 22:59:16
Il faut pas mettre tes éléments en float mais plutot en position absolute. Bien que selon moi un simple <span> serait bcp plus judicieux.
Marsh Posté le 04-02-2006 à 23:02:10
Bah un span reviendrait à les mettre inline, donc, il vont "couler".
Concernant la position absolute, je mes mets absolute par rapport à quel parent? Par exemple, float2, je le mets absolute par rapport à qui? Et à quelle position? Car je rappelle qu'ici, j'ai mis des élements à largeur fixe, mais dans la réalité, il n'y aura pas de largeur fixe. Si il y avait une largeur fixe, ce serait simple: je mettrais dans ma page un div inisible ayant pour largeur la somme des largeurset ça marcherait.
Marsh Posté le 04-02-2006 à 23:05:45
Ca m'a l'air ben compliqué....
et puis à la limite les conteneurs c'est pas fait pour les chiens
Marsh Posté le 04-02-2006 à 23:09:24
Bon, sinon un display:inline, ça résoudrait pas le problème ?
Marsh Posté le 05-02-2006 à 00:20:33
Bon, bon, je m'en vais essayer ça! JE transforme mes div en span (ce qui revient à les mettre en inline) et je mets un nowrap sur le conteneur...
Marsh Posté le 05-02-2006 à 00:32:38
En fait, je ne sais pas si je m'y prends bien.
c'est quoi l'idée?
C'est d'avoir ça:
<div id="container"><span style="white-space: nowrap">Mon text long ici</span></div> |
Est ce ça? Ca a l'air de marcher, mais si j'inclus des liens dans mon span, je ne pourrai pas alors leur mettre de bordure, non?
Marsh Posté le 05-02-2006 à 01:00:53
Est ce celà le code que vous sous entendez:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Cad que je place toutes mes balises <a> dans un span unique auqeul j'ai donné l'attribute white-space: nowrap ? A la base, si je fais ça, les bordures horizontales de mes <a> ne sont pas disibles, car elles sont alors hors de la zone d'affichage. Je dois alors ruser avec les attributs de hauteur pour que les bordures apparaissent.
A la base, est ce que c'est l'idée à laquelle vous pensiez?
Marsh Posté le 05-02-2006 à 01:05:39
Non, il faut fermer le span à chaque fois.
Dans ton cas, j'aurais plutot prévu une liste d'ailleurs.
Autrement, tu n'es pas obligé de précisé ton span à chaque fois, dans ta css, tu peux faire :
#large span {
}
ou, si tu passais ça en liste :
#large li {
}
Marsh Posté le 05-02-2006 à 01:08:23
Bon, j'essaie avec une liste toute fraîche et je reviens !
Marsh Posté le 05-02-2006 à 01:15:50
Bon, c'est encore très loin de marcher come je le souhaite, surtout pour mes bordures. Qui sont mangées plus ou moins différemment selon IE/Mozilla
Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Marsh Posté le 05-02-2006 à 01:24:17
Voici une version améliorée, que vous pouvez essayer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Mais ça reste moyennement satisfaisant, car le padding-top est beaucoup plus grand sous Mozilla que sous IE. (ça se voit clairement quand on lance ce code sous Mozilla et sous IE) et d'autre part, le display inline pour les listes fait apparaître un espace entre chaque cellule.
Marsh Posté le 05-02-2006 à 02:15:44
Bon, bah dodo pour moi ! ("Tout le monde en parle" vient de finir)
Tu me diras
Merci
Marsh Posté le 05-02-2006 à 10:52:03
Bon, alors, vous avez pu essayer? En mettant mes éléments inline, j'ai vraiment du mal avec les bordures de mes <a>.
Déja, pour la bordure de gauche de l'élément de gauchen sous IE, elle n'apparait pas si je demande une bordure de 2px au moins.
Marsh Posté le 05-02-2006 à 13:19:54
Finalement, en faisant pas mal d'esssais, j'ai conclu que la bordure gauche de mon élément de gauche était "bouffée" sous IE lorsque la largeur de mon mail était trop petite, cad lorsque le nowrap était en action.
Bref, ça ne me convient pas du tout comme manière de faire, d'autant plus que le display: inline de mes <li> font qu'il y a un espace entre chacune de mes cellules... Vraiment pas terrible.
Je n'ai donc toujours pas trouvé de solution fiable et nette à mon problème.
Donc, en reprenant le code original et rendu propre, celui qui arrivera à obtenir le même effet à l'écran mais avec les fLoat rouges sur la même ligne aura répondu à mon problème...:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Marsh Posté le 04-02-2006 à 15:34:35
Salut,
Tout est dans le titre:
Je voudrais trouver le moyen de mettre côte à côte des liens sans pour autant qu'il y ait un retour à la ligne lorsqu'il y a dépassement de la largeur de la fenêtre.
Vu que ces liens sont générés par un script, leur largeur n'est pas fixe et il y en a un nombre indéterminé, donc, impossible pour moi de les mettre dans un div à largeur fixe.
Est ce possible?