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. }
  9. #Menu li
  10. {
  11.     display : inline-block;
  12.     margin-right : 15px;
  13. }
  15. #Menu a
  16. {
  17.     font-size : 1.3em;
  18.     color : #760001;
  19.     text-decoration : none;
  20. }
  22. #Menu a:hover
  23. {
  24. text-decoration : none;
  25. height : 23 px;
  26. background : white;
  27. }
  29. #menu a
  30. {
  31. display : block;
  32. background-color : #000000;
  33. text-decoration : none;
  34. color : #444;
  35. }


 
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 */
  3. html,body,div
  4. {
  5. margin : 0px;
  6. padding : 0px:
  7. }
  9. body
  10. {
  11. background-image: url("Background.jpg" );
  12. }
  15. /*En-tête de page */
  18. header
  19. {
  20. background-color : rgb(0,0,0);
  21. height : 150px;
  22. top : 0px;
  23. }
  25. #Logo
  26. {
  27. margin : auto;
  28. text-align : center;
  29. }
  32. /*Navigation*/
  34. nav
  35. {
  36. width : auto;
  37. padding : 0px;
  38. }
  40. #Menu
  41. {
  42. margin-left : auto;
  43. margin-right : auto;
  44. background-color : #000000;
  45. height : 28px;
  46.     text-align : center;
  47. }
  49. #Menu li
  50. {
  51.     display : inline-block;
  52.     margin-right : 15px;
  53. }
  55. #Menu a
  56. {
  57.     font-size : 1.3em;
  58.     color : #760001;
  59.     text-decoration : none;
  60. }
  62. #Menu a:hover
  63. {
  64. text-decoration : none;
  65. height : 23 px;
  66. background : white;
  67. }
  69. #menu a
  70. {
  71. background-color : #000000;
  72. text-decoration : none;
  73. color : #444;
  74. }
  77. /* -----*/
  78. /* Corps */
  80. body
  81. {
  82. width : 100%;
  83. }
  85. #corps
  86. {
  87. margin-top : 0px;
  88. }
  90. @font face
  91. {
  92. font-family: 'Pacifico';
  93. src: url('polices/Pacifico.ttf');
  95. font-weight: normal;
  96.     font-style: normal;
  97. }
  99. h1,h2,h3
  100. {
  101. font-family: 'Pacifico', Arial, sans-serif;
  102. color: rgb(183, 0, 0);
  103. }
  105. strong
  106. {
  107. font-style: normal;
  108. font-weight: bold;
  109. }
  111. h1
  112. {
  113. text-align: center;
  114. font-size: 70px;
  115. }
  117. section
  118. {
  119. width : 1420px;
  120. height : 530px;
  121. }
  124. /*Cartes*/
  126. #Carte1
  127. {
  128. float: right;
  130. }
  132. #Carte2
  133. {
  134. float: top;
  136. }
  138. footer
  139. {
  140. background-color : black;
  141. height : 150px;
  142. }
  144. a:visited
  145. {
  146. color: #ffffff;
  147. }
  149. ul
  150. {
  151.     display: inline-block;
  152.     vertical-align: top;
  153.     margin-top: 0;
  154.     width: 48%;
  155.     padding-left: 2px;
  156. }


 

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>
  12. </head>
  14. <body>
  15. <!-- Corps de la page -->
  17. <header>
  19.  <div id="Logo">
  20.   <img src="Valad.jpg"/>
  21.  </div>
  23. </header>
  26. <nav>
  27.  <ul id="Menu">
  28.  <li><a href="#">Contact</a></li>
  29.   <li><a href="Mon_CV.pdf">CV</a></li>
  30.  </ul>
  31. </nav>
  32. <section>
  33. <img id="Carte1" src="Card1.jpg">
  34. <img id="Carte2" src="Card2.jpg">
  35.  <div id="corps">
  36.   <center>
  37.    <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">
  38.    <param name="allowFullScreen" value="true" />
  39.    <param name="allowScriptAccess" value="always" />
  40.    <param name="allowNetworking" value="all" />
  41.    <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
  42.    <param name="flashvars" value="hostname=www.twitch.tv&channel=valadone&auto_play=true&start_volume=25" />
  43.    </object>
  44.    <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>
  45.   </center>
  46.  </div>
  48. </section>
  50. <footer>
  52. <h3> Liens </h3>
  53.  <ul>
  54.   <li><a href="www.azote.org" title="Title">Azote ( Nom de domaine gratuit) </a></li>
  55.   <li><a href="" title="Title">Site 2</a></li>
  56.   <li><a href="" title="Title">Site 3</a></li>
  57.  </ul>
  58.  <ul>
  59.   <li><a href="" title="Title">Site 1</a></li>
  60.   <li><a href="" title="Title">Site 2</a></li>
  61.   <li><a href="" title="Title">Site 3</a></li>
  62.  </ul>
  63. </footer>
  64. </body>
  65. </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