Se connecter / S'enregistrer
Votre question

Css+html: retour à la ligne

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
25 Avril 2009 21:19:36

bonjour.
Je suis entrain de programmer en html css pour le design de mon site.
Le problème est que je voudrais que les encards se crééent les uns à côté des autres, alors que je voudrait les uns à coté des autres ....

mon css qui correspond à la partie en question:

  1. #menusg {
  2. float:left;
  3. width:165px;
  4. margin:20px;
  5. margin-top:50px;
  6. background: #00476b;
  7. }
  8.  
  9. .titre {
  10.  
  11. height:23px;
  12. background:url('images/titrem.png');
  13. text-align:center;
  14. margin:0px;
  15.  
  16. }
  17. .titre span {
  18. color:white;
  19. font-family:verdana;
  20.  
  21. }
  22. .liens {
  23. width:100%;
  24. margin:auto;
  25. margin-top:0px;
  26. background:url('images/txtm.png') repeat-y;
  27. }
  28.  
  29. .bas {
  30.  
  31. height:23px;
  32. background:url('images/basencart.png');
  33. text-align:center;
  34. margin:0px;
  35.  
  36. }


et mon html
  1. <div id="menusg">
  2.  
  3. <div class="titre"><span>Menus</span></div>
  4. <div class="liens">
  5. <ul>
  6. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">Accfd fdg dfsg sdfg sdf gdfgeil</a></li>
  7. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">Screzgvfgt</a></li>
  8. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">sqf gsqrg</a></li>
  9. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">qsfqsdfqsd</a></li>
  10. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">qsfsqdfsqd</a></li>
  11. </ul>
  12. </div>
  13. <div class="bas"></div>
  14. </div>
  15.  
  16. <div id="menusg">
  17.  
  18. <div class="titre"><span>Menus</span></div>
  19. <div class="liens">
  20. <ul>
  21. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">Accfd fdg dfsg sdfg sdf gdfgeil</a></li>
  22. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">Screzgvfgt</a></li>
  23. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">sqf gsqrg</a></li>
  24. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">qsfqsdfqsd</a></li>
  25. <li><a href="http:adeltimple.free.fr" title="Info-Bulle">qsfsqdfsqd</a></li>
  26. </ul>
  27. </div>
  28. <div class="bas"></div>
  29. </div


merci de votre aide :) 

Autres pages sur : css html retour ligne

25 Avril 2009 22:55:35

"je voudrais que les encards se crééent les uns à côté des autres, alors que je voudrait les uns à coté des autres .... "

==> GNé?

Essaie avec la propriété "position : absolute ou relative" pour fixer ton bloc et ensuite, place-le avec left, right, etc.
Si tu n'y arrives pas, il y a toujours la méthode bien sale mais tellement plus pratique : les tableaux...
Bon courage !
m
0
l
26 Avril 2009 00:41:14

Bonjour,

Essaye tout simplement avec:
  1. display: inline;
m
0
l
Contenus similaires
26 Avril 2009 03:42:42

Pour les retours à la ligne, il faut utiliser <br>
m
0
l
26 Avril 2009 09:08:33

D'abord merci de vos réponses.

je vous explique mon problème: avec le code html et css que je vous ai montré j'ai:

j'ai essayé
  1. display: inline;
dans #menusg mais c'est pareil :( 
les br j'évite car en html ça fait pas propore, et j'ai essayé les left ect mais c'était pire :( 
en relatif ou absolu les 2 se superposaient apparement :( 
m
0
l
26 Avril 2009 11:18:52

Salut,
Oui ils se superposent en absolute car c'est à toi de définir leur position par rapport au bord. Par exemple, si ton premier bloc fait 400px de haut, celui du dessous, tu le places à 400px du haut. Comme ça ils sont l'un en dessous de l'autre.
Et le coup du tableau tu as essayé ?
Tu fais un tableau à deux lignes (tr) et tu mets un bloc dans chaque case.
@+
m
0
l
26 Avril 2009 11:47:13

non pas testé mais comme tu dit un tableau ça fait pas propre :( 
m
0
l
26 Avril 2009 17:58:18

Tu ne veux pas de tableau, tu ne veux pas de </br>, tu ne veux pas utiliser la combinaison paragraphe <p>!! Parce que ça ne fait pas propre! Hey, on n'a pas sorti ces réponses de notre cul!

On n'est pas des magiciens!
m
0
l
26 Avril 2009 19:07:43

Tybbow a dit :
Tu ne veux pas de tableau, tu ne veux pas de </br>, tu ne veux pas utiliser la combinaison paragraphe <p>!! Parce que ça ne fait pas propre! Hey, on n'a pas sorti ces réponses de notre cul!

On n'est pas des magiciens!

c'est à dire??
j'ai cherché et j'ai trouvé, j'ai recommencé à 0:
  1. <div id="menu">
  2. <h2>Le Site !!</h2>
  3. <ul>
  4.  
  5. <li><a href='<a href="http://adeltimple.free.fr" rel="nofollow" target="_blank">http://adeltimple.free.fr</a>' title= "Retour à l'acceuil">L' Accueil</a></li>
  6. <li><a href= '<a href="http://adeltimple.free.fr/news.php" rel="nofollow" target="_blank">http://adeltimple.free.fr/news.php</a>' title= "Les stats">Les News</a></li>
  7. <li><a href= '<a href="http://adeltimple.free.fr/bibliotheque.php" rel="nofollow" target="_blank">http://adeltimple.free.fr/bibliotheque.php</a>' title= "La bibliothèque">La bibliothèque</a></li>
  8. <li><a href= '<a href="http://adeltimple.free.fr/stats.php" rel="nofollow" target="_blank">http://adeltimple.free.fr/stats.php</a>' title= "Les stats">Les Stats du site</a></li>
  9. </ul>
  10. <div class="fin">   </div>
  11. <br>
  12. <h2>Partie Contact</h2>
  13. <ul>
  14. <li><a href= <a href="http://adeltimple.free.fr/contact.php" rel="nofollow" target="_blank">http://adeltimple.free.fr/contact.php</a> title= "Contactez le webmaster">Contactez le webmaster</a></li>
  15. </ul>
  16. <div class="fin">   </div>
  17.  
  18.  
  19.  
  20. </div




et le css:
  1. #menu {
  2. float:left;
  3. display:inline;
  4. width:162px;
  5. margin-top:60px;
  6. margin-right:30px;
  7. }
  8. #menu h2 {
  9. width:162px;
  10. height:30px;
  11. line-height:30px;
  12. font-size:10pt;
  13. margin:0;
  14. padding:0px;
  15. color:#8d8d8d;
  16. background: url(images/rubrique.png) no-repeat left top;
  17. }
  18. #menu ul {
  19. margin:0px;
  20. padding:0px;
  21.  
  22. }
  23.  
  24.  
  25. #menu ul li {
  26. display:block;
  27. height:29px;
  28. line-height:29px;
  29. background: url(images/lien.png) no-repeat; /*fond des menus */
  30. }
  31.  
  32. .fin {
  33. text-indent: -9999em ;
  34. background: url(images/basrubrique.png) no-repeat; /*fond des menus */
  35. }



Merci de votre aide notement pour le text-indent: -9999em ; :) 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS