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

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Problème insertion de video youtube sur image.

n°1673290
Koyomi
www.sebastiengilles.com
Posté le 18-01-2008 à 12:59:12  profilanswer
 

Reprise du message précédent :
Tu peut par exemple decouper ton site comme cela :

 

découpe

 


le <div id="site"> doit contenir l'image de fond et les autres div doivent venir se supperposer dessus un peu a la manière des calques sous photochop


Message édité par Koyomi le 18-01-2008 à 13:00:58
mood
Publicité
Posté le 18-01-2008 à 12:59:12  profilanswer
 

n°1673292
lorenzo570​70
Posté le 18-01-2008 à 13:06:27  profilanswer
 

ok  
j'ai decouper les 3 div principaux ensuite je les inclue dans un tableau c'est sa avec comme image de fond le <div id="site">

n°1673294
Koyomi
www.sebastiengilles.com
Posté le 18-01-2008 à 13:11:04  profilanswer
 

L'utilisation de tableau n'est pas recommandé dans ce genre d'utilisation.

 

Les div suffisent pour ta mise en page ;)

 

tien voici plus de documentation : http://css.alsacreations.com/


Message édité par Koyomi le 18-01-2008 à 13:11:46
n°1673296
Koyomi
www.sebastiengilles.com
Posté le 18-01-2008 à 13:15:26  profilanswer
 

Pour te mettre sur la bonne piste, ton fichier xHTML doit ressembler a ceci dans un premier temps :

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.     <title></title>
  9.     <link rel="stylesheet" type="text/css" media="screen,projection" href="ecran.css" />
  10. </head>
  11. <body>
  13. <div id="site>
  14.    <div id="menu" />
  15.    <div id="content" />
  16.    <div id="bottom" />
  17. </div>
  19. </body>
  20. </html>
 

puis lorsque cette version sera valide, tu devra réaliser quelque chose de ce type :

 


Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.     <title></title>
  9.     <link rel="stylesheet" type="text/css" media="screen,projection" href="ecran.css" />
  10. </head>
  11. <body>
  13. <div id="site>
  14.    <div id="menu">
  15.       <ul>
  16.           <li>Acceuil</li>
  17.           <li>Photos</li>
  18.           <li>Video</li>
  19.           <li>Contact</li>
  20.           <li>Liens</li>
  21.       </ul>
  22.    </div>
  23.    <div id="content">
  24.     Bienvenu a toutes et à tous ....
  25.    </div>
  26.    <div id="bottom">
  27.       <img href="img1.png" />
  28.       <img href="img2.png" />
  29.       <img href="img3.png" />
  30.       ...
  31.    </div>
  32. </div>
  34. </body>
  35. </html>
 


Message édité par Koyomi le 18-01-2008 à 13:20:08
n°1673300
lorenzo570​70
Posté le 18-01-2008 à 13:18:36  profilanswer
 

oui j'ai le meme mais je ne sais pas quoi mettre dans les div id pour que les trois image soient bien diposée deux sur la meme ligne et une en dessou ?

Message cité 1 fois
n°1673304
lorenzo570​70
Posté le 18-01-2008 à 13:21:15  profilanswer
 

Merci lol

n°1673307
Koyomi
www.sebastiengilles.com
Posté le 18-01-2008 à 13:22:57  profilanswer
 

lorenzo57070 a écrit :

oui j'ai le meme mais je ne sais pas quoi mettre dans les div id pour que les trois image soient bien diposée deux sur la meme ligne et une en dessou ?


Tu va devoir rediger ton fichier "ecran.css"  
 
voici un tres bon tutorial qui initie au positionnent CSS : http://openweb.eu.org/articles/initiation_flux/
 
Avec tous ces éléments tu doit pouvoir reussir ;)
 
Commence par rediger ton CSS et si tu rencontre des difficulté on t'aidera sur les points précis qui te bloque

n°1673309
lorenzo570​70
Posté le 18-01-2008 à 13:28:20  profilanswer
 

Meri je vais voir de suite  

n°1673312
lorenzo570​70
Posté le 18-01-2008 à 13:35:05  profilanswer
 

pfff je ne comprend meme pas comment faire pour avoir mon design et ensuite pouvoir ecrir ce que je veux dessu

n°1673321
Koyomi
www.sebastiengilles.com
Posté le 18-01-2008 à 13:45:11  profilanswer
 

Tu essaye de foncer tête baissé tu n'y arrivera pas de cette façon.
 
Lis attentivement ce tutorial : http://css.alsacreations.com/Faire [...] design-css
 
Pour chaque étape regarde le source de la page web (Bouton droit> afficher la source) et essaye de comprendre ce qu'il se passe
 
Le temps que tu perd a apprendre tout cela tu le gagnera par la suite a faire évoluer ton blog ;)

mood
Publicité
Posté le 18-01-2008 à 13:45:11  profilanswer
 

n°1673346
lorenzo570​70
Posté le 18-01-2008 à 14:28:06  profilanswer
 

voila j'ai lu tout le tuto et j'ai a peut pres compris j'ai essayé de réadapté le code a mon probleme mais je n'arrive pas a mettre mes image que j'ai decoupé et a réedité le css pour qu'il ai la forme que je veu 2 colonnes et une ligne en bas et le fond en arriere plan .
 
voici le code un peu long:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;1 : Le code xhtml</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  6.  <meta http-equiv="Content-Style-Type" content="text/css" />
  7.  <meta http-equiv="Content-Language" content="fr" />
  8.         <style type="text/css">body
  9. {
  10. margin: 100px 0 ;
  11. padding: 0 ;
  12. text-align: center ;
  13. }
  14. /* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
  15. /* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
  16. /* On utilise text-align: center ; pour Internet Explorer,  
  17. c'est la seule façon de centrer les éléments de type block avec ce navigateur */
  19. div#conteneur
  20. {
  21. width: 1000px ;
  22. margin: 0 auto ;
  23. text-align: left ;
  24. background-image:url(../HTML/design/trame_de_fond.jpg)
  25. }
  26. /* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
  27. /* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
  28. block (comme les divisions), nous centrons donc cette division */
  29. /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
  31. h1#header
  32. {
  33. height: 0px ;
  34. }
  35. /* On définit la hauteur de la partie header, contenant le titre du site */
  37. pre
  38. {
  39. overflow: auto ;
  40. }
  42. /* En passant on définit l'overflow de la balise pre à auto pour
  43. permettre d'afficher des barres de défilement si le texte contenu
  44.   dans cette balise est trop grand */
  46. /* On doit donner une largeur au <pre> à cause d'Internet Explorer,  
  47. on ne va donc l'appliquer qu'à Internet Explorer en utilisant le  
  48. commentaire conditionnel suivant, à placer dans la partie HTML,  
  49. et plus précisément dans l'élément <head> : */
  50. <!--[if IE]>
  51. <style type="text/css">
  52. html pre
  53. {
  54. width: 636px ;
  55. }
  56. body
  57. {
  58. margin: 10px 0 ;
  59. padding: 0 ;
  60. text-align: center ;
  61. font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
  62. background: #dea ;
  63. }
  64. /* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
  66. div#conteneur
  67. {
  68. width: 770px ;
  69. margin: 0 auto ;
  70. text-align: left ;
  71. border: 2px solid #ab4 ;
  72. background: #fff ;
  73. }
  74. /* Une bordure autour de l'ensemble de la page,
  75. et couleur blanche pour le fond de celle-ci */
  77. h1#header
  78. {
  79. height: 258px;
  80. background: url(apple.jpg) no-repeat left top;
  81. }
  82. /* Une image de fond correspondant aux 258 pixels
  83. de tout à l'heure, attention à bien compresser vos images */
  85. div#contenu
  86. {
  87. padding: 0 30px 0 100px ;
  88. background: url(bg_page.gif) no-repeat 15px 15px ;
  89. }
  90. /* On ajoute un petit élément décoratif sur le côté
  91. de la page et on crée un espace à gauche et à droite du contenu */
  93. div#contenu h2
  94. {
  95. padding-left: 25px ;
  96. line-height: 25px ;
  97. font-size: 1.4em ;
  98. background: url(little_apple.gif) no-repeat left bottom ;
  99. color: #9b2 ;
  100. border-bottom: 1px solid #9b2 ;
  101. }
  102. /* Mise en forme du titre de page, une petite image,
  103. on décale le texte en fonction de l'image, on donne un couleur au texte et
  104.   on met une bordure basse */
  106. div#contenu h3
  107. {
  108. margin-left: 15px ;
  109. padding-left: 5px ;
  110. border-bottom: 1px solid #9b2 ;
  111. border-left: 3px solid #9b2 ;
  112. color: #9b2 ;
  113. }
  114. /* De même que pour le titre h2, à ceci près qu'on
  115. ne donne pas d'image décorative cette fois ci */
  117. div#contenu p
  118. {
  119. text-align: justify ;
  120. text-indent: 2em ;
  121. line-height: 1.7em ;
  122. }
  123. /* On rend les paragraphes plus propre, alignement justifié,
  124. alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
  126. div#contenu a
  127. {
  128. color: #8a0 ;
  129. }
  131. div#contenu a:hover
  132. {
  133. color: #9b2;
  134. }
  135. /* On met en forme les liens contenu dans la page */
  137. p#footer
  138. {
  139. margin: 0 ;
  140. padding-right: 10px ;
  141. line-height: 30px ;
  142. text-align: right ;
  143. color: #8a0 ;
  144. }
  145. /* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
  147. pre
  148. {
  149. overflow: auto ;
  150. background: #dea ;
  151. border: 2px solid #9b2 ;
  152. padding: 5px 0 0 5px ;
  153. font-size: 1.2em ;
  154. }
  155. /*une couleur de fond, une bordure, la taille de police
  156. et un léger espace entre le texte et les bords du pre */
  158. pre span
  159. {
  160. color: #560 ;
  161. }
  162. /* Couleur de texte des éléments compris dans des span
  163. eux mêmes compris dans un pre */
  165. pre span.comment
  166. {
  167. color: #b30000 ;
  168. }
  169. /* Couleur différente pour les span.comment, les span
  170. utilisés pour les commentaires */
  171. body
  172. {
  173. margin: 10px 0 ;
  174. padding: 0 ;
  175. text-align: center ;
  176. font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
  177. background: #dea ;
  178. }
  180. div#conteneur
  181. {
  182. width: 1000px ;
  183. margin: 0 auto ;
  184. text-align: left ;
  185. background: #fff ;
  186. }
  188. h1#header
  189. {
  190. height: 258px ;
  191. background: url(apple.jpg) no-repeat left top ;
  192. margin: 0 ;
  193. }
  195. h1#header a
  196. {
  197. width: 400px ;
  198. height: 70px ;
  199. display: block ;
  200. background: url(title.gif) no-repeat ;
  201. position: relative ;
  202. left: 350px ;
  203. top: 15px ;
  204. text-indent: -5000px ;
  205. }/* On donne les mêmes dimensions au lien, chose
  206. possible grâce à la propriété display: block ; qui transforme le lien
  207.   en élément de type block, auquel on peut donner des propriétés de taille.
  208.    On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
  209. /* Le text-indent négatif est fait pour pouvoir ne
  210. cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  211.   exploitable pour les syntèses vocales */
  214. ul#menu
  215. {
  216. height: 0px ;
  217. margin: 0 ;
  218. padding: 100 ;
  219. background: url(bg_menu.gif) repeat-x 0 -25px ;
  220. list-style-type: none ;
  221. }
  222. /* On donne une hauteur au menu, correspondant a
  223. la taille de l'image utilisée en fond, on met ensuite l'image de fond
  224.   avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
  225. ul#menu li
  226. {
  227. float: left ;
  228. text-align: center ;
  229. }/* On rend les li en flottant pour pouvoir les
  230. afficher horizontalement, on cache les puces, et on centre le texte */
  232. ul#menu li a
  233. {
  234. width: 130px ;
  235. line-height: 25px ;
  236. font-size: 1.3em ;
  237. font-weight: bold ;
  238. letter-spacing: 3px ;
  239. color: #fff ;
  240. display: block ;
  241. text-decoration: none ;
  242. border-right: 1px solid #dea ;
  243. }/* C'est sur les liens que le gros du travail est
  244. effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  245.   espacement des lettres, couleur, bordure et decoration du texte.  
  246.   Nous pouvons dimensionner les a grâce à la propriété display: block ; */
  248. ul#menu li a:hover
  249. {
  250. background: url(bg_menu.gif) repeat-x 0 0 ;
  251. }/* Et pour finir on décale l'image de fond au passage
  252. de la souris pour laisser aparaître l'état survolé de l'image,  
  253. voir le tutoriel sur les roll over pour plus de détails */
  255. div#contenu
  256. {
  257. padding: 0 25px 0 100px ;
  258. background: url(bg_page.gif) no-repeat 15px 15px ;
  259. }
  261. div#contenu h2
  262. {
  263. padding-left: 25px ;
  264. line-height: 25px ;
  265. font-size: 1.4em ;
  266. background: url(little_apple.gif) no-repeat left bottom ;
  267. color: #9b2 ;
  268. border-bottom: 1px solid #9b2 ;
  269. }
  271. div#contenu h3
  272. {
  273. margin-left: 15px ;
  274. padding-left: 5px ;
  275. border-bottom: 1px solid #9b2 ;
  276. border-left: 3px solid #9b2 ;
  277. color: #9b2 ;
  278. }
  280. div#contenu p
  281. {
  282. text-align: justify ;
  283. text-indent: 2em ;
  284. line-height: 1.7em ;
  285. }
  287. div#contenu a
  288. {
  289. color: #8a0 ;
  290. }
  292. div#contenu a:hover
  293. {
  294. color: #9b2 ;
  295. }
  297. p#footer
  298. {
  299. margin: 0 ;
  300. padding-right: 10px ;
  301. line-height: 30px ;
  302. text-align: right ;
  303. color: #8a0 ;
  304. }
  306. pre
  307. {
  308. overflow: auto ;
  309. background: #dea ;
  310. border: 2px solid #9b2 ;
  311. padding: 5px 0 0 5px ;
  312. font-size: 1.2em ;
  313. }
  316. pre span
  317. {
  318. color: #560 ;
  319. }
  321. pre span.comment
  322. {
  323. color: #b30000 ;
  324. }
  326. </style>
  327. <![endif]-->
  328. </head>
  330. <body>
  331. <div id="conteneur">
  332.  <h1 id="header"><a href="etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>
  334.  <ul id="menu">
  335.   <li><a href="etape1.html">Etape n°1</a></li><br><br>
  336.   <li><a href="etape2.html">Etape n°2</a></li><br><br>
  337.   <li><a href="etape3.html">Etape n°3</a></li><br><br>
  338.   <li><a href="etape4.html">Etape n°4</a></li><br><br>
  339.   <li><a href="etape5.html">Etape n°5</a></li><br><br>
  340.  </ul>
  342.  <div id="contenu">
  343.   <h2>Un titre</h2>
  344.   <p>Un paragraphe</p>
  345.  </div>
  347.  <p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
  348. </div>
  349. </body>
  350. </html>


n°1673704
lorenzo570​70
Posté le 19-01-2008 à 11:03:16  profilanswer
 

Bonjour tout le monde apres une journée entière de travaille j'arrive a ceci est-ce mieu ,?  
 
cependant je narive toujour pas a incorporé mes image dans mes photo en bas de page.
 
Merci de vos conseils je pense que j'ai deja bien avancé par rapport au debut.
 
http://lorenzo57070.ifrance.com/index1.html
 
J'attend vos réponse Merci
 
cordialement laurent

n°1673716
Master p
My new cock ring :D
Posté le 19-01-2008 à 12:35:18  profilanswer
 

Je te conseille de développer en visualisant tes pages au moyen de Firefox ou Opera. Il te sera plus facile d'adapter ensuite pour IE (et les différences sont suffisament importantes pour que t'y jettes un oeil)


---------------
HAHAHA I M USING TEH INTERNET
n°1674542
lorenzo570​70
Posté le 21-01-2008 à 15:52:30  profilanswer
 

voila j'ai réalisé le menu de gauche en flash a vous de me dire ce que vous en pensez ainsi que de la fluidité du site par rapport a avant merci de me repondre.
(pas compatible avec ie comment faire ??)
 
http://www.monblog57.c.la


Message édité par lorenzo57070 le 21-01-2008 à 15:52:48
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

Aller à :
Ajouter une réponse
 

Sujets relatifs
probléme de comptabilité sous internet explorer 7Probleme pour recuprer une variable dans un code embed vers un swf
Probleme de DIV sous IE / FirefoxProblème PHP include
Probleme pour mise en place d'un site sur serveur ftp numericableProblème avec les DIV
[Résolu] Problème de character set XML et PHP (SimpleXML)Probléme d'image dans un tableau PHP/MYSQL
Problème Objet Concaténé 
Plus de sujets relatifs à : Problème insertion de video youtube sur image.

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

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR