[HTML/CSS]Empiler horizontalement des éléments sans retour à la ligne

Empiler horizontalement des éléments sans retour à la ligne [HTML/CSS] - HTML/CSS - Programmation

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?

Reply

Marsh Posté le 04-02-2006 à 15:34:35   

Reply

Marsh Posté le 04-02-2006 à 18:29:19    

overflow : hidden;


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 04-02-2006 à 18:30:45    

CSS : white-space: nowrap;

Reply

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!

Reply

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


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

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">
  <div class="floatelt">Element1</div>
  <div class="floatelt">Element1</div>
  <div class="floatelt">Element1</div>
  <div class="floatelt">Element1</div>
  <div class="floatelt">Element1</div>
</div>


 
Et le code CSS suivant:

.floatelt {float: left; width: 300px;}


 
Où dois je mettre mon white-space: nowrap?

Reply

Marsh Posté le 04-02-2006 à 18:36:59    

http://www.w3schools.com/css/pr_text_white-space.asp


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

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">
<html>
<head>
 <title>Test!</title>
 <style type="text/css">
  body {background-color: white; padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}
   #main {position: relative;  margin: 0 auto; width: 700px;}
   #main {background-color: #ffc; border: 1px solid red;}
   #large { background-color: #ccf; border: 2px solid #00f; height: 200px;}
   #float1 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}
   #float2 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}
   #float3 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}
 </style>
</head>
<body>
 <div id="main">
  Hello
  <div id="large">
   <div id="float1">Float</div><div id="float2">Float</div><div id="float3">Float</div>
   </div>
  </div>
 </div>
</body>
</html>


 
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.

Reply

Marsh Posté le 04-02-2006 à 18:43:50    

dans ce cas m'est avis qu'il faut jouer avec les positions des blocs.


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 04-02-2006 à 18:44:39    

Citation :

Je voudrais trouver le moyen de mettre côte à côte des liens


Code :
  1. <div id="container">
  2.   <div class="floatelt">Element1</div>
  3.   <div class="floatelt">Element1</div>
  4.   <div class="floatelt">Element1</div>
  5.   <div class="floatelt">Element1</div>
  6.   <div class="floatelt">Element1</div>
  7. </div>


[:talen]

Citation :

Euh, ça ne semble pas marcher.


[:thalis]

Reply

Marsh Posté le 04-02-2006 à 18:44:39   

Reply

Marsh Posté le 04-02-2006 à 18:45:47    

afbilou a écrit :

Citation :

Je voudrais trouver le moyen de mettre côte à côte des liens


Code :
  1. <div id="container">
  2.   <div class="floatelt">Element1</div>
  3.   <div class="floatelt">Element1</div>
  4.   <div class="floatelt">Element1</div>
  5.   <div class="floatelt">Element1</div>
  6.   <div class="floatelt">Element1</div>
  7. </div>


[:talen]

Citation :

Euh, ça ne semble pas marcher.


[:thalis]


 
ca marche pas [:burtonsnowboard]  


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

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">  
<html>  
<head>  
 <title>Test!</title>  
 <style type="text/css">  
  body {background-color: white; padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}  
   #main {position: relative;  margin: 0 auto; width: 700px;}  
   #main {background-color: #ffc; border: 1px solid red;}  
   #large { background-color: #ccf; border: 2px solid #00f; height: 200px;}  
   #float1 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}  
   #float2 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}  
   #float3 {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 400px;}  
 </style>  
</head>  
<body>  
 <div id="main">  
  Hello  
  <div id="large">  
   <div id="float1">Float</div><div id="float2">Float</div><div id="float3">Float</div>  
   </div>  
  </div>  
 </div>  
</body>  
</html>


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


Message édité par Yoyo@ le 04-02-2006 à 22:43:59
Reply

Marsh Posté le 04-02-2006 à 22:50:30    

  • Pourquoi tu parles de lien a mettre cote a cote dans ton premier poste alors que tes exemples de code utilisent du div en pagaille ?
  • Pourquoi utilises tu du div (element de type block) plutot qu'un élement de type inline dans ton cas ?

[HS]

  • Pourquoi utilises tu 3 identificateur de CSS qui ont le MEME style ? (float1, float2 et float3)[/HS]

Reply

Marsh Posté le 04-02-2006 à 22:57:15    

afbilou a écrit :

  • Pourquoi tu parles de lien a mettre cote a cote dans ton premier poste alors que tes exemples de code utilisent du div en pagaille ?

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 :

  • Pourquoi utilises tu du div (element de type block) plutot qu'un élement de type inline dans ton cas ?

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 :

  • Pourquoi utilises tu 3 identificateur de CSS qui ont le MEME style ? (float1, float2 et float3)[/HS]

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.

Reply

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.


---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

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.

Reply

Marsh Posté le 04-02-2006 à 23:05:45    

Ca m'a l'air ben compliqué....:o
et puis à la limite les conteneurs c'est pas fait pour les chiens :D


Message édité par brains le 04-02-2006 à 23:06:06

---------------
Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 04-02-2006 à 23:09:24    

Bon, sinon un display:inline, ça résoudrait pas le problème ?

Reply

Marsh Posté le 05-02-2006 à 00:02:38    

le nowrap pour les elements inline et ca change tout.

Reply

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

Reply

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?

Reply

Marsh Posté le 05-02-2006 à 00:39:28    

Si et même plus facilement. :D

Reply

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">  
<html>  
<head>  
 <title>Test!</title>  
 <style type="text/css">  
  body {background-color: white; padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}  
 #main {margin: 0 auto; width: 100px;}  
 #large {border: 1px solid green;}
 .myspan {white-space: nowrap;}
 .mylink {border: 2px solid #f00; font-size: 26px; line-height: 36px; background-color: #fcc}
 </style>  
</head>  
<body>  
 <div id="main">  
  <div id="large">  
   <span class="myspan"><a class="mylink" href="#">Float</a><a class="mylink" href="#">Float</a></span>  
  </div>  
 </div>  
</body>  
</html>


 
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?


Message édité par Yoyo@ le 05-02-2006 à 01:02:06
Reply

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 {
 
}


Message édité par The-Shadow le 05-02-2006 à 01:06:05
Reply

Marsh Posté le 05-02-2006 à 01:08:23    

Bon, j'essaie avec une liste toute fraîche et je reviens !

Reply

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">  
<html>  
<head>  
 <title>Test!</title>  
 <style type="text/css">  
  body {background-color: white; padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}  
 #main {margin: 0 auto; padding: 0; width: 100px;}  
 ul {margin: 0; padding: 2px 0; list-style-type: none; white-space: nowrap;}
 li {display: inline;}
 a {border: 2px solid green;}
 </style>  
</head>  
<body>  
 <div id="main">  
  <ul>
   <li><a href="#">Test 1 </a></li>
   <li><a href="#">Test 2 </a></li>
   <li><a href="#">Test 3 </a></li>
   <li><a href="#">Test 4 </a></li>
  </ul>
 </div>  
</body>  
</html>


Message édité par Yoyo@ le 05-02-2006 à 01:17:01
Reply

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">  
<html>  
<head>  
 <title>Test!</title>  
 <style type="text/css">  
  body {background-color: white; padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}  
 #main {margin: 0 auto; width: 100px;}  
 ul {background-color: #cfc; padding: 10px 0 10px 0; margin: 0; list-style-type: none; white-space: nowrap;}
 li {display: inline;}
 a { border: 4px solid black; text-decoration: none;}
 </style>  
</head>  
<body>  
 <div id="main">  
  <br>
  <ul>
   <li><a href="#">Test 1</a></li>
   <li><a href="#">Test 2</a></li>
   <li><a href="#">Test 3</a></li>
   <li><a href="#">Test 4</a></li>
  </ul>
 </div>  
</body>  
</html>


 
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.

Reply

Marsh Posté le 05-02-2006 à 01:38:26    

Je zieute et je te réponds. ;)

Reply

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


Message édité par Yoyo@ le 05-02-2006 à 02:16:09
Reply

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.

Reply

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">  
<html>  
<head>  
 <title>Test!</title>  
 <style type="text/css">  
  body {background-color: white; padding:10px; margin:0;}  
   #main {margin: 0 auto; width: 300px; background-color: #ffc; border: 1px solid red;}  
   #large { background-color: #ccf; border: 2px solid #00f; height: 200px;}  
   .myfloat {text-align: center; float: left; border: 2px solid red; background-color: #fcc; width: 120px;}  
 </style>  
</head>  
<body>  
 <div id="main">  
  Hello  
  <div id="large">  
   <div class="myfloat">Float</div><div class="myfloat">Float</div><div class="myfloat">Float</div>
   </div>  
  </div>  
 </div>  
</body>  
</html>


Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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