Création d'un site pour streaming.

Création d'un site pour streaming. - HTML/CSS - Programmation

Marsh Posté le 23-05-2014 à 11:42:32    

Bonjour,
 
Je n'arrive pas à trouver la commande html et/ou CSS qui conviennent pour mettre 2 images à droite d'une vidéo et 2 images à gauche de cette même vidéo.
 
En gros ça donnerait ça :
 
Image                            Image
 
                  Vidéo  
 
Image                            Image
 
Merci d'avance pour vos réponses =)


---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 23-05-2014 à 11:42:32   

Reply

Marsh Posté le 23-05-2014 à 11:46:10    

En css, faut utiliser float (left ou right).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-05-2014 à 13:47:09    

Ah donc c'est cette commande, je t'en remercie =)


---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 24-05-2014 à 22:40:23    

Code :
  1. #Menu
  2. {
  3. background-color : #000000;
  4. height : 28px;
  5. width : 1670px;
  6.     text-align : center;
  7. }
  8. #Menu li
  9. {
  10.     display : inline-block;
  11.     margin-right : 15px;
  12. }
  13. #Menu a
  14. {
  15.     font-size : 1.3em;
  16.     color : #760001;
  17.     text-decoration : none;
  18. }
  19. #Menu a:hover
  20. {
  21. text-decoration : none;
  22. height : 23 px;
  23. background : white;
  24. }
  25. #menu a
  26. {
  27. display : block;
  28. background-color : #000000;
  29. text-decoration : none;
  30. color : #444;
  31. }


 
Mon problème c'est que même en enlevant "width" j'ai la zone de navigation qui se limite. ( Voir http://www.valadone.fr.nf/ )  
Si quelqu'un sait ce que je dois faire =/


---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 26-05-2014 à 10:46:29    

Bizarre de mettre en bock un lien hypertexte (#menu a) :/
 

Citation :

j'ai la zone de navigation qui se limite


Je comprends ce que tu veux dire. Le bandeau de navigation prend bien toute la largeur, par contre, tes 3 liens sont l'un en-dessous de l'autre. C'est de ça dont tu parles ? Si oui, ben c'est normal, ça vient du "display: block" que t'as mis sur #menu a


Message édité par rufo le 26-05-2014 à 10:47:25

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 26-05-2014 à 12:19:37    

Non le problème c'est que mon bandeau navigation ne s'ajuste pas en fonction de la page. je dois le limiter a 1670 px pour que Contact et CV soit au milieu. Je voudrais un code qui me permette de faire en sorte que je n'ai plus à limiter width et que ça s'ajuste automatique.
 
J'ai enlevé le display : block, ça n'avait aucune utilité dans le code


Message édité par chrispc le 26-05-2014 à 12:20:56

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 26-05-2014 à 14:55:40    

Si tu mets ton body avec un width à 100% et ton menu de nav avec un margin-left et un margin-right à auto; , ça le fait pas ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 26-05-2014 à 19:15:54    

Ligne 120 de style.css, tu dois retirer le width: 48%; et le display: inline-block;
En ensuite, tu n'as plus besoin de width pour #Menu

Reply

Marsh Posté le 26-05-2014 à 21:26:37    

Je vais essayer tout ça, je vous dis ce que ça donne.
 
Edit : Ca ne donne rien =/
 
Peut être un problème ailleurs.
 
Je vais vous donner mes lignes de code CSS et HTML peut être ça sera plus simple.
 

Code :
  1. /*feuille de style */
  2. html,body,div
  3. {
  4. margin : 0px;
  5. padding : 0px:
  6. }
  7. body
  8. {
  9. background-image: url("Background.jpg" );
  10. }
  11. /*En-tête de page */
  12. header
  13. {
  14. background-color : rgb(0,0,0);
  15. height : 150px;
  16. top : 0px;
  17. }
  18. #Logo
  19. {
  20. margin : auto;
  21. text-align : center;
  22. }
  23. /*Navigation*/
  24. nav
  25. {
  26. width : auto;
  27. padding : 0px;
  28. }
  29. #Menu
  30. {
  31. margin-left : auto;
  32. margin-right : auto;
  33. background-color : #000000;
  34. height : 28px;
  35.     text-align : center;
  36. }
  37. #Menu li
  38. {
  39.     display : inline-block;
  40.     margin-right : 15px;
  41. }
  42. #Menu a
  43. {
  44.     font-size : 1.3em;
  45.     color : #760001;
  46.     text-decoration : none;
  47. }
  48. #Menu a:hover
  49. {
  50. text-decoration : none;
  51. height : 23 px;
  52. background : white;
  53. }
  54. #menu a
  55. {
  56. background-color : #000000;
  57. text-decoration : none;
  58. color : #444;
  59. }
  60. /* -----*/
  61. /* Corps */
  62. body
  63. {
  64. width : 100%;
  65. }
  66. #corps
  67. {
  68. margin-top : 0px;
  69. }
  70. @font face
  71. {
  72. font-family: 'Pacifico';
  73. src: url('polices/Pacifico.ttf');
  74. font-weight: normal;
  75.     font-style: normal;
  76. }
  77. h1,h2,h3
  78. {
  79. font-family: 'Pacifico', Arial, sans-serif;
  80. color: rgb(183, 0, 0);
  81. }
  82. strong
  83. {
  84. font-style: normal;
  85. font-weight: bold;
  86. }
  87. h1
  88. {
  89. text-align: center;
  90. font-size: 70px;
  91. }
  92. section
  93. {
  94. width : 1420px;
  95. height : 530px;
  96. }
  97. /*Cartes*/
  98. #Carte1
  99. {
  100. float: right;
  101. }
  102. #Carte2
  103. {
  104. float: top;
  105. }
  106. footer
  107. {
  108. background-color : black;
  109. height : 150px;
  110. }
  111. a:visited
  112. {
  113. color: #ffffff;
  114. }
  115. ul
  116. {
  117.     display: inline-block;
  118.     vertical-align: top;
  119.     margin-top: 0;
  120.     width: 48%;
  121.     padding-left: 2px;
  122. }


 

Code :
  1. <!DOCTYPE html> 
  2. <html>
  3. <head>
  4. <!--En-Tête de la page -->
  5.  <meta charset="utf-8"></meta>
  6.  <link rel="stylesheet" href="style.css" />
  7.  <!--[if lt IE 9]>
  8.         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  9.         <![endif]-->
  10.  <title> Valadone </title>
  11. </head>
  12. <body>
  13. <!-- Corps de la page -->
  14. <header>
  15.  <div id="Logo">
  16.   <img src="Valad.jpg"/>
  17.  </div>
  18. </header>
  19. <nav>
  20.  <ul id="Menu">
  21.  <li><a href="#">Contact</a></li>
  22.   <li><a href="Mon_CV.pdf">CV</a></li>
  23.  </ul>
  24. </nav>
  25. <section>
  26. <img id="Carte1" src="Card1.jpg">
  27. <img id="Carte2" src="Card2.jpg">
  28.  <div id="corps">
  29.   <center>
  30.    <object type="application/x-shockwave-flash" height="530" width="820" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=valadone" bgcolor="#000000">
  31.    <param name="allowFullScreen" value="true" />
  32.    <param name="allowScriptAccess" value="always" />
  33.    <param name="allowNetworking" value="all" />
  34.    <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
  35.    <param name="flashvars" value="hostname=www.twitch.tv&channel=valadone&auto_play=true&start_volume=25" />
  36.    </object>
  37.    <a href="http://www.twitch.tv/valadone" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:15px;text-decoration:underline; text-align:center;"><strong>Regarder le Live de Valadone sur www.twitch.tv</strong></a>
  38.   </center>
  39.  </div>
  40. </section>
  41. <footer>
  42. <h3> Liens </h3>
  43.  <ul>
  44.   <li><a href="www.azote.org" title="Title">Azote ( Nom de domaine gratuit) </a></li>
  45.   <li><a href="" title="Title">Site 2</a></li>
  46.   <li><a href="" title="Title">Site 3</a></li>
  47.  </ul>
  48.  <ul>
  49.   <li><a href="" title="Title">Site 1</a></li>
  50.   <li><a href="" title="Title">Site 2</a></li>
  51.   <li><a href="" title="Title">Site 3</a></li>
  52.  </ul>
  53. </footer>
  54. </body>
  55. </html>


 
Et j'ai toujours le problème au niveau de mes images autour de la vidéo.
 
Le schéma que je veux est :
 
Image               Vidéo                Image
Image               Vidéo                Image
                       Vidéo
                       Vidéo
Image               Vidéo               Image
Image               Vidéo               Image
 
Float ça me donne les images à droite et à gauche mais la vidéo est en dessous d'eux ...
 


Message édité par chrispc le 26-05-2014 à 21:36:42

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 27-05-2014 à 10:51:37    

Faut penser à utiliser le clear: both pour annuler certains effets du float left/right ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

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