Tom's Guide > Forum > Programmation > Css+html: retour à la ligne

Css+html: retour à la ligne

Forum Programmation : Css+html: retour à la ligne

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
adeltimple   25-04-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:

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



et mon html

Code :
  1. <div id="menusg">
  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>
  16.     <div id="menusg">
  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 :)

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
the stalker   25-04-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 !

Répondre à the stalker
Badge Programmation Bronze Allstar27   26-04-2009 à 00:41:14

Bonjour,

Essaye tout simplement avec:

Code :
  1. display: inline;

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
 Répondre à Allstar27
Tybbow   26-04-2009 à 03:42:42

Pour les retours à la ligne, il faut utiliser <br>

------------------------------ En Restaurant, le coeur de breizh
 Répondre à Tybbow
adeltimple   26-04-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:
http://adeltimple.free.fr/forum/Sans-titre-1.jpg
j'ai essayé

Code :
  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 :(


Message édité par adeltimple le 26-04-2009 à 09:09:14
Répondre à adeltimple
the stalker   26-04-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.
@+

Répondre à the stalker
adeltimple   26-04-2009 à 11:47:13

non pas testé mais comme tu dit un tableau ça fait pas propre :(

Répondre à adeltimple
Tybbow   26-04-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!

Message cité 1 fois
------------------------------ En Restaurant, le coeur de breizh
 Répondre à Tybbow
adeltimple   26-04-2009 à 19:07:43

Tybbow a écrit :

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:

Code :
  1. <div id="menu">
  2.                             <h2>Le Site !!</h2>
  3.                 <ul>
  5.                     <li><a href='http://adeltimple.free.fr' title= "Retour à l'acceuil">L' Accueil</a></li>
  6.                     <li><a href= 'http://adeltimple.free.fr/news.php' title= "Les stats">Les News</a></li>
  7.                     <li><a href= 'http://adeltimple.free.fr/bibliotheque.php' title= "La bibliothèque">La bibliothèque</a></li>
  8.                     <li><a href= 'http://adeltimple.free.fr/stats.php' title= "Les stats">Les Stats du site</a></li>
  9.                 </ul>
  10.                 <div class="fin"> &nbsp; </div>
  11.                 <br>
  12.                 <h2>Partie Contact</h2>
  13.                 <ul>
  14.                     <li><a href= http://adeltimple.free.fr/contact.php title= "Contactez le webmaster">Contactez le webmaster</a></li>
  15.                 </ul>
  16.                 <div class="fin"> &nbsp; </div>
  20.                 </div





et le css:

Code :
  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;
  22. }
  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. }
  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 ; :)

Répondre à adeltimple
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Css+html: retour à la ligne
Aller à :

Il y a 2806 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,396 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens