Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2985 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Alignement de deux blocs horizontaux

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Alignement de deux blocs horizontaux

n°2130435
Ajimu Yasu​na
Posté le 08-03-2012 à 21:39:48  profilanswer
 

Bonsoir,
Cela fait plusieurs jours que je tourne en rond pour trouver la réponse ainsi que sur des forums.
En regardant ma page d'accueil vous allez voir immédiatement le problème : http://akb48-le-site.fr
Depuis que j'ai incorporé le traducteur google mon menu horizontal ne veut pas se placer à coté de celui-ci.
Merci de vos réponses pour me sortir de ce quépier
ci-dessus les codes css et xhtml
 

Code :
  1. body {
  2.    Width: 1200px; /*largeur de la page "body" */
  3.    height: auto;
  4.    margin: auto; /* Pour centrer notre page */
  5.    margin-top: 10px; /* Pour 2viter de coller avec le haut de la fenêtre du navigateur. */
  6.    margin-bottom: 10px;    /* Pour éviter de coller avec le bas du navigateur */
  7.    background-image: url ("image/fond.jpg" ); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc  */
  8.    background-image: url('http://img15.hostingpics.net/pics/601674akb48ForumFonddepage.jpg');
  9.    background-attachment:fixed;
  10. }
  12. /* L'en-tête */
  14. #banniere
  15. {
  16. width: 1200px; /*Largeur de la bannière*/
  17. height: 400px; /*Hauteur de la bannière*/
  19. margin-left: ; /* Une marge à gauche pour centrer la bannière en attendant son dessin définitif */
  21. background-position: center;
  22. background-image: url("..images/bannière.png" );
  23. background-repeat: no-repeat; /*Pour que l'image de fond "la bannière" ne se répéte pas */
  24. margin-bottom:10px; /* Evite que la banniere soit trop collée au menu et au corps*/
  25. }
  27. #defilant{
  28. width:1192px; /* largeur du cadre*/
  29. clear:all;
  30. background-color: #FFA07A;
  31. font-family: Times New Roman, Arial, Arial Black, Comic Sans MS, Georgia, Impact, Times, Trebuchet MS, verdana, serif;
  32. font-size: 20px;
  33. font-style: italic;
  34. font-weight: bold;
  35. height: 30px; /*Hauteur du cadre*/
  36. border: double 4px black;
  37. padding-top: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  38. padding-bottom: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  39. margin-bottom: 10px; /* marge extérieure en bas */
  40. }
  42. /* UnitTranslate */
  44. #menu_traduction
  45. {
  46. width: 250px; /*Largeur du cadre du menu*/
  47. height: auto; /* Hauteur du menu */
  49. color: black;
  50. list-style-type: none;
  51. text-align: center; /* Alignement du texte */
  52. background-color: #FFA07A; /* une couleur de fond pour le menu */
  53. border: 4px double black;  /*Pour faite un encadrement du menu de 4px, double et en noir*/
  54. margin-right:; /* Une marge à droite pour se décoler du corps */
  55. margin-bottom:10px;
  56. }
  58. /* Le menu */
  60. #menu
  61. {
  62. width: 250px; /*Largeur du cadre du menu*/
  63. height: auto; /* Hauteur du menu */
  64. float: left; /*Le menu flotera à gauche*/
  65. border: 4px double black; /*Pour faite un encadrement du menu de 4px, double et en noir*/
  66. background-color: #FFA07A; /* une couleur de fond pour le menu */
  67. margin-bottom:10px;
  68. }
  70. a
  71. {
  72. text-decoration: none; /* les liens ne seront plus soulignès */
  73. color: black;
  74. }
  76. .element_menu
  77. {
  78.    background-color: #FFFFFF; /* une couleur de fond pour le menu */
  79.    background-image: url("images/puce.png" );
  80.    background-repeat: repeat-x; /*se repetera horizontalement*/
  81.  
  82.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  83.    font-size: 14px; /* Taille de la police */
  84.    font-style: italic;
  85.    font-weight: bold;
  86.  
  87.    color: black;
  88.    list-style-type: none;
  89.    text-align: left; /* Alignement du texte */
  90.  
  91.    padding-top: 10px; /* marge intérieure en haut*/
  92.    padding-bottom: 10px; /* marge intérieure en bas */
  93.    padding-left: 10px; /* marge intérieure de gauche */
  94.    padding-right: 10px; /* marge intérieure de droite */
  95.  
  96.    margin-bottom: 20px; /* marge extérieure en bas */
  97. }
  99. .element_disco
  100. {
  101. background-color: #FFFFFF; /* une couleur de fond pour le menu */
  102.    background-image: url("images/puce.png" );
  103.    background-repeat: repeat-x; /*se repetera horizontalement*/
  104.  
  105.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  106.    font-size: 14px; /* Taille de la police */
  107.    font-style: italic;
  108.    font-weight: bold;
  109.  
  110.    color: black;
  111.    list-style-type: none;
  112.    text-align: left; /* Alignement du texte */
  113.  
  114.    padding-top: 10px; /* marge intérieure en haut*/
  115.    padding-bottom: 10px; /* marge intérieure en bas */
  116.    padding-left: 10px; /* marge intérieure de gauche */
  117.    padding-right: 10px; /* marge intérieure de droite */
  118.  
  119.    margin-bottom: 20px; /* marge extérieure en bas */
  120. } 
  121.  
  122. .element_liens
  123. {
  124.    background-color: #FFFFFF; /* une couleur de fond pour le menu */
  125.    background-image: url("images/puce.png" );
  126.    background-repeat: repeat-x; /*se repetera horizontalement*/
  127.  
  128.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  129.    font-size: 14px; /* Taille de la police */
  130.    font-style: italic;
  131.    font-weight: bold;
  132.  
  133.    color: black;
  134.    list-style-type: none;
  135.    text-align: left; /* Alignement du texte */
  136.  
  137.    padding-top: 10px; /* marge intérieure en haut*/
  138.    padding-bottom: 10px; /* marge intérieure en bas */
  139.    padding-left: 10px; /* marge intérieure de gauche */
  140.    padding-right: 10px; /* marge intérieure de droite */
  141.  
  142.    margin-bottom: 20px; /* marge extérieure en bas */
  143.   }
  144.  
  145. .element_perso
  146. {
  147.    background-color: #FFFFFF; /* une couleur de fond pour le menu */
  148.    background-image: url("images/puce.png" );
  149.    background-repeat: repeat-x; /*se repetera horizontalement*/
  150.  
  151.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  152.    font-size: 14px; /* Taille de la police */
  153.    font-style: italic;
  154.    font-weight: bold;
  155.  
  156.    color: black;
  157.    list-style-type: none;
  158.    text-align: left; /* Alignement du texte */
  159.  
  160.    padding-top: 10px; /* marge intérieure en haut*/
  161.    padding-bottom: 10px; /* marge intérieure en bas */
  162.    padding-left: 10px; /* marge intérieure de gauche */
  163.    padding-right: 10px; /* marge intérieure de droite */
  164.  
  165.    margin-bottom: 20px; /* marge extérieure en bas */
  166.   }
  167.  
  168. .element_partenaires
  169. {
  170.    background-color: #FFFFFF; /* une couleur de fond pour le menu */
  171.    background-image: url("images/puce.png" );
  172.    background-repeat: repeat-x; /*se repetera horizontalement*/
  173.  
  174.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  175.    font-size: 14px; /* Taille de la police */
  176.    font-style: italic;
  177.    font-weight: bold;
  178.  
  179.    color: black;
  180.    list-style-type: none;
  181.    text-align: left; /* Alignement du texte */
  182.  
  183.    padding-top: 10px; /* marge intérieure en haut*/
  184.    padding-bottom: 10px; /* marge intérieure en bas */
  185.    padding-left: 10px; /* marge intérieure de gauche */
  186.    padding-right: 10px; /* marge intérieure de droite */
  187.  
  188.    margin-bottom: 20px; /* marge extérieure en bas */
  189.   }
  191. /* Quelques effets sur les menus */
  193. .element_menu h4 /* Tous les titres de menus */
  194. {   
  195.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  196.    text-align: center; /* pour alignement le texte au centre*/
  197.    color: black; /* couleur du texte */
  198.    text-decoration: underline; /* Pour souligner le lien */
  199. }
  201. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  202. {
  203.    list-style-image: url("images/puce.png" ); /* On change l'apparence des puces */
  204.    padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  205.    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-li fera finalement 20 pixels */
  206.    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  207. }
  209. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  210. {
  211.    background-color: #FF66FF;
  212.    color: ;
  213. }
  215. .element_menu li
  216. {
  217. padding : 5px 0;
  218. border-bottom : 1px solid #9A9A9A;
  219. }
  221. .element_disco h4 /* Tous les titres de menus */
  222. { 
  223.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  224.    text-align: center; /* pour alignement le texte au centre */
  225.    color: black; /* couleur du texte */
  226.    text-decoration: underline; /* Pour souligner le lien */
  227. }
  229. .element_disco ul /* Toutes les listes à puces se trouvant dans un menu */
  230. {
  231.    list-style-image: url("images/puce.png" ); /* On change l'apparence des puces */
  232.    padding: ; /* Tous les côtés ont une marge intérieure de 0 pixels */
  233.    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  234.    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  235. }
  237. .element_disco a:hover /* Quand on pointe sur un lien du menu */
  238. {
  239.    background-color: #FFD700;
  240.    color: ;
  241. }
  243. .element_disco li
  244. {
  245. padding : 5px 0;
  246. border-bottom : 1px solid #9A9A9A;
  247. }
  249. .element_liens h4 /* Tous les titres de menus */
  250. { 
  251.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  252.    text-align: center; /* Alignement du texte au centre*/
  253.    color: black; /* couleur du texte */
  254.    text-decoration: underline; /* Pour souligner le lien */
  255. }
  257. .element_liens ul /* Toutes les listes à puces se trouvant dans un menu */
  258. {
  259.    list-style-image: url("images/puce.png" ); /* On change l'apparence des puces */
  260.    padding: ; /* Tous les côtés ont une marge intérieure de 0 pixels */
  261.    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  262.    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  263. }
  265. .element_liens a:hover /* Quand on pointe sur un lien du menu */
  266. {
  267.    background-color: #66CC00;
  268.    color: ;
  269. }
  270. .element_liens li
  271. {
  272. padding : 5px 0;
  273. border-bottom : 1px solid #9A9A9A;
  274. }
  276. .element_perso h4 /* Tous les titres de menus */
  277. { 
  278.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  279.    text-align: center; /* Alignement du texte au centre*/
  280.    color: black; /* couleur du texte */
  281.    text-decoration: underline; /* Pour souligner le lien */
  282. }
  284. .element_perso ul /* Toutes les listes à puces se trouvant dans un menu */
  285. {
  286.    list-style-image: url("images/puce.png" ); /* On change l'apparence des puces */
  287.    padding: ; /* Tous les côtés ont une marge intérieure de 0 pixels */
  288.    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  289.    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  290. }
  292. .element_perso a:hover /* Quand on pointe sur un lien du menu */
  293. {
  294.    background-color: #66CC00;
  295.    color: ;
  296. }
  297. .element_perso li
  298. {
  299. padding : 5px 0;
  300. border-bottom : 1px solid #9A9A9A;
  301. }
  303. .element_partenaires h4 /* Tous les titres de menus */
  304. { 
  305.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  306.    text-align: center; /* pour alignement le texte au centre */
  307.    color: black; /* couleur du texte */
  308.    text-decoration: underline; /* Pour souligner le lien */
  309. }
  311. .element_partenaires ul /* Toutes les listes à puces se trouvant dans un menu */
  312. {
  313.    list-style-image: url("images/puce.png" ); /* On change l'apparence des puces */
  314.    padding: ; /* Tous les côtés ont une marge intérieure de 0 pixels */
  315.    padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  316.    margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  317. }
  319. .element_partenaires a:hover /* Quand on pointe sur un lien du menu */
  320. {
  321.    background-color: #87CEF3;
  322.    color: ;
  323. }
  324. .element_partenaires li
  325. {
  326. padding : 5px 0;
  327. border-bottom : 1px solid #9A9A9A;
  328. }
  330. /*--Menu horizontal--*/
  332. ul#menu_horizontal
  333. { 
  334. width: 875px;  /* largeur du cadre*/
  335. height: 20px; /*Hauteur du cadre*/
  336. background-color: #FFA07A;
  337. border: 4px double black; /*Pour faite un encadrement du menu de 4px, double et en noir*/
  339.     padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  340. color: ;
  342. margin-left: 300px; /* Une marge à gauche pour pousser le corps, afin qu'il soit centré */
  344. font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  345. font-style: italic;
  346. font-weight: bold;
  347. color: ;
  348. background: url (image/pied.png);
  349. list-style-type : none; /* Car sinon les puces se placent n'importe o* */
  350. }
  352. ul#menu_horizontal li {
  353. padding : 0 0.5em; /* Pour espacer les boutons entre eux */
  354. float: left;
  355. text-align: center;
  356. }
  357. li.bouton_gauche {
  358. float : left;
  359. }
  362. #corps /* Le corps de la page */
  363. {
  364.   width: 875px;  /* largeur du cadre */
  365.   height: auto; /* Hauteur du cadre */
  366.  
  367.   border: 4px double black; /* Pour faite un encadrement du menu de 4px, double et en noir */
  368.   background-color: #FFA07A;
  370.   margin-left: 300px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  371.   margin-right: 0px; /* /*marche extérieure droite */
  372.   margin-bottom: 20px; /* Marge extérieure bas */
  373.   padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  374.   color: #000000;
  375.  
  376.   font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  377.   font-style: italic;
  378.   font-weight: bold;
  379.  
  380.   text-align: center;
  381.  
  382.   background-color: #FFFFFF; /* Une couleur de fond pour le corps */
  383.   background-image: url('http://img4.hostingpics.net/pics/833515fondcorpspng600x912.png');  /* Une petite image de fond */
  384.   background-position: center;
  385.   background-repeat: no-repeat; /* Une petite image de fond qui ne se répêtera pas */
  386. }
  388. #corps h3
  389. {
  390. color: black;
  391. text-decoration: ;
  392. }
  394. /* Le pied de la page */
  396. /* Je séléctionne mes <li> par les sélecteurs (<li> est contenu par le <ul> ), inutile de lui rajouter une class */
  398. ul#footer_horizontal
  399. { 
  400. clear: left; /* stopper l'effet du menu flottant */
  402.    width: 1175px;  /* largeur du cadre*/
  403.    height: 20px; /*Hauteur du cadre*/
  404.    background-color: #FF7F50;
  405.    border: 4px double black; /*Pour faite un encadrement du menu de 2px en noir*/
  407.    padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  408.    color: ;
  409.  
  410.    font-family: "Times New Roman", Arial, "Arial Black", "Comic Sans MS", Georgia, Impact, Times, "Trebuchet MS", verdana, serif;
  411.    font-size: 12px;
  412.    font-style: italic;
  413.    font-weight: bold;
  414.    color: ;
  416.  background: url (image/pied.png);
  418. list-style-type : none; /* Car sinon les puces se placent n'importe où */
  419. }
  421. ul#footer_horizontal li {
  422. padding : 0 0.5em; /* Pour espacer les boutons entre eux */
  423. }
  424. li.bouton_gauche {
  425. float: left;
  426. }
  428. .nettoyeur {
  429. clear: both;
  430. }


 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="fr" xml lang="fr" xmlns="http://www.w3.org/1999/xhtml" ><head>
  4. <!-- Table de caractères -->
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <!-- Mots-clés de la page -->
  7. <meta name="keywords" content="AKB48,SDN48,Akihabara,SKE48,Nagoya,NMB48,Osaka,HKT48,Fukuoka,JKT48,Djakarta. />
  8. <!-- Description de la page -->
  9. <meta name="description" content="AKB48 leur histoire, la composition des équipes,
  10. leur discographie, concert, une grande variété d'informations." />
  11. <!-- Empêcher la mise en cache de la page par le navigateur -->
  12. <meta http-equiv="pragma" content="no-cache" />
  13. <!-- Titre du sîte -->
  14. <title>Les School Girls de la JPop - JPOPのガールズ·スクール</title>
  16. <link rel="stylesheet" media="screen" type="text/css" title="index_style" href="index_style.css" />
  19. </head><body>
  21. <a id="top"></a>
  23. <div id="banniere">
  24.  <img src="http://img11.hostingpics.net/pics/484885Bannakb481200x400noms.png" alt="" />
  25. </div>
  28. <div id="defilant">
  29.  <marquee behavior="scroll" direction="left" scrolldelay="100">
  30.  Les SDN48 doivent toutes quitter le groupe le 31 mars 2012 lors d’un concert d’adieu au NHK Hall.
  31.  Mais il ne faut pas les enterrer trop vite, pour preuve, le site officiel des SDN48 vient de mettre à jour les profils des 39 membres,
  32.  je me mets au travail pour vous les rajouter ainsi que certaines carrières en cours pour ces anciennes et vous verrez il y a des surprises</marquee>
  33. </div>
  35. <!-- Menu de traduction -->
  37. <div id="menu_traduction">
  39. <div id="google_translate_element"></div><script>
  40. function googleTranslateElementInit() {
  41.   new google.translate.TranslateElement({
  42.     pageLanguage: 'fr',
  43.     multilanguagePage: true,
  44.     gaTrack: true,
  45.     gaId: 'UA-24533803-3'
  46.   }, 'google_translate_element');
  47. }
  48. </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  50. </div>
  55. <!--le menu general-->
  57. <div id="menu">
  59. <div class="element_menu">
  61.  <h4>Menu Général</h4>
  63.  <ul>
  64.  <li><a href="../Papy_Aki/Yasushi_Akimoto.php"><img src="http://img11.hostingpics.net/pics/633821Papyakibann.jpg" alt="" /></a></li>
  65.  <li><a href="../akb48/akb48_Bienvenue_a_Akihabara.php"><img src="http://img11.hostingpics.net/pics/523126akb48menu.jpg" alt="" /></a></li>
  66.  <li><a href="../ske48/ske48_Bienvenue_a_Nagoya.php"><img src="http://img11.hostingpics.net/pics/945711ske48bann.jpg" alt="" /></a></li>
  67.  <li><a href="../nmb48/nmb48_Bienvenue_a_Osaka.php"><img src="http://img11.hostingpics.net/pics/290728nmb48menubann.jpg" alt="" /></a></li>
  68.  <li><a href="../sdn48/sdn48_Les_Saturnay_Night.php"><img src="http://img11.hostingpics.net/pics/822313sdn48menubann.jpg" alt="" /></a></li>
  69.  <li><a href="../hkt48/hkt48_Bienvenue_a_Fukuoka.php"><img src="http://img15.hostingpics.net/pics/681431HKT48003.jpg" alt="" /></a></li>
  70.  <li><a href="../jkt48/jkt48_Bienvenue_a_Djakarta.php"><img src="http://img4.hostingpics.net/pics/883316jkt48menu3.jpg" alt="" /></li>
  71.  </ul>
  73. </div>
  75. <!--Menu liens externes-->
  77. <div class="element_liens">
  79.  <h4>Les Liens du Site</h4>
  81.  <ul>
  82.  <li><a href="http://akb48.forumactif.net/"><img src="http://img4.hostingpics.net/pics/587251akblesitforum165x45.jpg" alt="" /></a></li>
  83.  <li><a href="http://www.japanese-school.forumactif.com"><img src="http://img4.hostingpics.net/pics/859043akblesitJapaneseschool.jpg" alt="" /></a></li>
  84.  <li><a href="http://maya-akblesit.skyrock.com/"><img src="http://img4.hostingpics.net/pics/475490akblesitMayasky.jpg" alt="" /></a></li>
  85.  <li><a href="http://chikako-akblesit.skyrock.com"/><img src="http://img4.hostingpics.net/pics/165847akblesitLeJaponavecChikako.jpg" alt="" /></a></li>
  86.  </ul>
  88.  <h4>Les Liens annexes</h4>
  90.  <ul>
  91.  <li><a href="http://akb48-le-site.fr/gallery_photo/index.php/"><img src="http://img4.hostingpics.net/pics/291724akblesitPhotosduJapon.jpg" alt="" /></a></li>
  92.  <li><a href="../admin/chat.php"><img src="http://img4.hostingpics.net/pics/533169akblesitTutchat.jpg" alt="" /></a></li>
  93.  <li><a href="../admin/bug_contact.php"><img src="http://img4.hostingpics.net/pics/202157akblesitAdmincontactbug.jpg" alt="" /></a></li>
  94.  <li><a href="http://akb48-le-site.fr/agb/"><img src="http://img4.hostingpics.net/pics/628374akblesitLivredor.jpg" alt="" /></a></li>
  95.  </ul>
  97. </div>
  99. <div class="element_perso">
  101.  <h4>Mes Liens perso</h4>
  103.  <ul>
  104.  <li><a href="http://ajimu1609.skyrock.com/"><img src="http://img4.hostingpics.net/pics/765023Ajimuyasuna.jpg" alt="" /></a></li>
  105.  <br />
  106.  <li><a href="http://japanours2011.skyrock.com/"><img src="http://img4.hostingpics.net/pics/423425Japanours2011.jpg" alt="" /></a></li>
  107.  <br>
  108.  <li><a href="http://japanours2010.skyrock.com/"><img src="http://img4.hostingpics.net/pics/734380Japanours2010.jpg" alt="" /></a></li>
  109.  <br>
  110.  <li><a href="http://japanours2009.skyrock.com/"><img src="http://img4.hostingpics.net/pics/700234Japanours2009.jpg" alt="" /></a></li>
  111.  <br>
  112.  <li><a href="http://japanours2008.skyrock.com/"><img src="http://img4.hostingpics.net/pics/275916Japanours2008.jpg" alt="" /></a></li>
  113.  </ul>
  114. </div>
  116. <!--menu partenaires-->
  118. <div class="element_partenaires">
  120.  <h4>Nos Partenaires</h4>
  122.  <ul>
  123.  <li><a href="http://www.hostingpics.net/"><img src="http://img4.hostingpics.net/pics/583838logohosting88x21.gif" alt="" /></a></li>
  124.  <br />
  125.  <li><a href="http://www.planethoster.net/?a_aid=4ede1aef7421a&amp;a_bid=de9a8992"><img src="http://cdn.planethoster.net/images/bannieres/Fbutton-88x31-02.gif" border="0" alt="Hébergé par PlanetHoster" title="Hébergé par PlanetHoster" width="88" height="31" /></a><img style="border:0" src="http://affiliation.planethoster.info/scripts/imp.php?a_aid=4ede1aef7421a&amp;a_bid=de9a8992" width="1" height="1" alt="" /></a></li>
  126.  <br />
  127.  <li><a href="http://www.siteduzero.com/"><img src="http://img4.hostingpics.net/pics/649809logosdzfr88x25.png" alt="" /></a></li>
  128.  <br />
  129.  <li><a href="http://jeuma-groupe.franceserv.com/"><img src="http://img11.hostingpics.net/pics/378920iconejeuma.png" alt="" /></a></li>
  130.  <ul>
  131. </div>
  132. </div>
  134.  <!-- Le menu horizontal -->
  136.  <ul id="menu_horizontal">
  137.  <li class="bouton_gauche"><a href="index1.html">Retour à l'accueil</a></li>
  138.  <li class="bouton_gauche"><a href="admin/newsletter.php">La newsletter - Inscription</a></li>
  139.  <li class="bouton_gauche"><a href="http://akb48.forumactif.net">Le Forum</a></li>
  140.  <li class="bouton_gauche"><a href="http://japanese-school.forumactif.com">La Japanese-School</a></li>
  141.  <li class="bouton_gauche"><a href="admin/chat.php">Chat</a></li>
  142.  <li class="bouton_gauche"><a href="http://akb48-le-site.fr/agb/">Le Livre d'or</a></li>
  143.  </ul>
  145. <div id="corps"><!-- contenu principal de la page -->
  146.  <p><img src="http://img4.hostingpics.net/pics/785355akb48610x54021filles.jpg" alt="" /></p><br />
  147.  <p /><h2>Bienvenue sur le Site des School Girls de la JPop !</h2>
  149.  <p /><h3>De Tokyo a Osaka en passant par Nagoya et Fukuoka<br />
  150.  Retrouvez Les AKB48, SKE48, NMB48 et HKT48<br />
  151.  sans oublier les SDN48 nos "demoiselles de la nuit"</h3>
  153.  <p /><h4>Je sais, je ne suis pas le seul fan des akb48 sur la toile à avoir un sîte,<br />
  154.  alors j'ai essayé de faire ' autrement ' pour vous les présenter.<br />
  155.  Si seules les équipes d'aujourd'hui vous branchent direction le remaniement d'équipe 2009/2010</p>
  157.  <p>Sinon, rappelez-vous vos contes de Fées lorsque vous étiez petit ils commençaient tous par :<br />
  158.  Il était une fois..........alors direction les 1ères Team<br />
  159.  Il était une fois, il y a bien longtemps...en 2005....naissaient les akb48....</h4></p>
  162.  <p>Groupe de théatre (chant et danse) entièrement féminin, produit par Yasushi Akimoto <br />
  163.  voici l'histoire des AKB48, et leurs petites soeurs  les SKE48, SDN48 et NMB48</p>
  166.  <p>Pour rejoindre notre communauté, discuter avec d'autres fans ? <br />
  167.  rendez-vous sur le forum des AKB48 et consoeurs :<br />
  168.  N'hésitez pas à vous y inscrire nous vous attendons : </p>
  170.  <p><a href="http://akb48.forumactif.net"><img src="http://img11.hostingpics.net/thumbs/mini_784235Onvousattends200x200.jpg" alt="" /></a></p>
  172.  <p>Vous voulez apprendre ou discuter de culture japonaise ?<br />
  173.  Rendez-vous sur la Japanese-school en cliquant sur notre logo : </p>
  175.  <p><a href="http://japanese-school.forumactif.com/"><img src="http://img4.hostingpics.net/pics/881284logoJapaneseschool88x43.png" alt="Japanese-school" /></a></p>
  178.  <p>Signez le Livre d'or cela fait toujours plaisir. Merci</p>
  181.  <p> Il est :
  183.   <applet code="Dgclock.class" codebase="http://akb48-le-site.fr/java-sys" height="30" width="100">
  184.   <param name="TimeFormat" value="" />
  185.   <param name="ShowDate" value="yes" />
  186.   <param name="ShowFrame" value="yes" />
  187.   <param name="fg" value="white" />
  188.   <param name="bg" value="black" />
  189.   </applet> en France
  191.   et :
  193.    <applet code="Dgclock.class" codebase="http://akb48-le-site.fr/java-sys" height="30" width="100">
  194.    <param name="TimeFormat" value="" />
  195.    <param name="TZ" value="GMT+0900" />
  196.    <param name="ShowDate" value="yes" />
  197.    <param name="ShowFrame" value="yes" />
  198.    <param name="fg" value="white" />
  199.    <param name="bg" value="black" />
  200.    </applet> au Japon</p><br />
  202.   <!-- retour en haut-->
  204.  <a href="#top" class="top"><img src="http://img15.hostingpics.net/pics/372302indexretourhaut.jpg" alt="" /></a>
  207. </div>
  211. <!-- Le pied de la page -->
  213.  <ul id="footer_horizontal">
  214.  <li class="bouton_gauche"><a href="copyright.php">
  215.  Toutes les illustrations, photos et vidéos sont sous Copyright donc propriétés de leurs auteurs et éditeurs respectifs.</a></li>
  216.  </ul>
  220. <div class="nettoyeur">
  222. </div>
  224. <script type="text/javascript">
  225. var _gaq = _gaq || [];
  226. _gaq.push(['_setAccount', 'UA-24533803-3']);
  227. _gaq.push(['_trackPageview']);
  229. (function() {
  230.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  231.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  232.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  233. })();</script>
  235. </body></html>


Message édité par Ajimu Yasuna le 08-03-2012 à 22:01:16

---------------
Un bonjour, un merci chaque jour et la vie sera plus belle
mood
Publicité
Posté le 08-03-2012 à 21:39:48  profilanswer
 

n°2130649
GoldAdvanc​e
Audiste corrompu.
Posté le 09-03-2012 à 22:01:23  profilanswer
 

Tu voudrais que les deux bloc soient collés c'est bien ça?


---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton
n°2130728
Ajimu Yasu​na
Posté le 11-03-2012 à 13:10:51  profilanswer
 

non les blocs "traducteur et menu horizontal" sont à leur place mais  
 
letradusteur.est..............sur cette ligne
............................et le menu horizontal sur celle-là
 
je les voudrais sur la meme ligbe
 
Traducteur.......menu horizontal.......cote à cote mais toujours séparé par un blanc (environ 36px)
 
J'ai essayé avec la position absolute pour le menu horizontal cela fonctionne sur la page d'acceuil mais sur les autres pages il se chevauche avec le défilant car les navigateurs me colle 40px avant la bannière au lieu de 10 demandé bilan j'ai plus didée

n°2130729
GoldAdvanc​e
Audiste corrompu.
Posté le 11-03-2012 à 13:16:46  profilanswer
 

Chez moi pas de soucis à ce niveau ils sont bien alignés bien que l'un soit plus haut que l'autre.
 
Spécifies la même hauteur pour les 2 blocs et ajoutes cette propriété aux 2 blocs:
 

Code :
  1. float: left;


---------------
Les hommes construisent trop de murs et pas assez de ponts. Isaac Newton

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Alignement de deux blocs horizontaux

 

Sujets relatifs
remplacement récursif sur des blocs de codes ciblésCSS les blocs
Commande awk pour extraire des blocs d'un fichier + regexp sur lignesProblème CSS : Alignement et/ou width
Alignement légende sous un thumbnail - Mercisommer des blocs dan un bloc
blocs avec largeur "ajustable" ?question affichage blocs
CSS Alignement des blocs horizontal 
Plus de sujets relatifs à : Alignement de deux blocs horizontaux

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.180 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)