Recherche aide pour corriger mon code html

nakamura100 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
nakamura100 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour chers spécialistes de la programmation, je me suis fixé comme objectif de créer ma première page html qui comprendras : 1 fond d'écran, 1 vidéo au milieu centrée, et un logo au dessus de ma vidéo.

Seulement voilà, je fais des tests au niveau de mon fond d'écran, et je remarque que mon fond d'écran ne s'adapte pas à la résolution du visiteur.
Donc je me retrouve avec une page complétement décalée et donc une vidéo non centrée.

J'aimerai que vous m'aidiez à trouver d'où vient le problème, en m'expliquant mes erreurs et si vous avez le temps , en corrigant mon code pour qu'il soit parfait, et sans erreurs, et s'adapte à toutes les résolutions d'écrans, afin que mon fond d'écran ne se balade pas.

Voiçi mon fond d'écran de test : http://www.noelshack.com/

Le cadre au milieu doit accueillir la vidéo de présentation donc il faut qu'il coincide à chaque fois avec la vidéo, quelque soit la résolution.


Et voiçi mon code html avec une vidéo de test : 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
 
       <title>Test page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
   </head>
   <body>
   
   <div style="height:259px;display:block;"> </div> 
<CENTER><iframe src="https://player.vimeo.com/video/2571178?title=0&byline=0&portrait=0&autoplay=0" width="700" height="400" frameborder="0"></iframe></CENTER>
  
 <pre><!-- DEDUT DE MON SCRIPT IMAGE FOND FIXE --></pre>
<style type="text/css">
<!-- 

body {
background-image: url(http://www.noelshack.com/ 
[background-attachment: fixed ;
<pre><!-- FIN DE MON SCRIPT IMAGE FOND FIXE --></pre>
  </body>
</html>


Je n'ai pas mis de CSS encore.

J'espère avoir une réponse favorable de votre part, afin que je puisse avancer,
merci d'avance.

6 réponses

Réponse 1 / 6
-Shadow- Messages postés 2152 Date d'inscription   Statut Membre Dernière intervention   270
 
Salut,

on ne peut pas étirer le fond d'écran en (x)HTML. Tu peux toujours "gruger" avec un DIV positionné en-dessous qui prenne tout l'espace de la page (100%) et qui soit "fixé" (synchro avec le scrolling). Utilise alors du CSS.

Cordialement
0
Réponse 2 / 6
nakamura100 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   1
 
Merci shadow de ta réponse très rapide, vu que je débute je suis très limité concernant mes capacités en CSS, donc aurais-tu la patience de m'indiquer, quel serait le code css à rentrer dans mon cas précis?

Merci d'avance, de ta ou des futures réponses.
0
Réponse 3 / 6
-Shadow- Messages postés 2152 Date d'inscription   Statut Membre Dernière intervention   270
 
Re,

Il te faudra faire un arrière-plan dégradant vers le transparent.

Le code sera donc: 
<div style="width:100%; height:100%; background-image: URL('truc'); margin:0; padding:0; z-index:-1000; position:fixed;" />


J'ai fait un style plutôt qu'un CSS, vu que c'est fait qu'une fois, ça évitera d'importer un fichier en plus.

PS: z-index: -1000 c'est un code triche pour le positionner tout-au-fond. Pas grand-chose d'autre ;)
0
Réponse 4 / 6
nakamura100 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   1
 
Re shadow, donc tu me conseilles d'inscrire le code que tu m'a fourni :

"<div style="width:100%; height:100%; background-image: URL('http://s2.noelshack.com/uploads/images/12425107305006_sans_titre0001.jpg'); margin:0; padding:0; z-index:-1000; position:fixed;" />"

dans mon CSS, et de ne rien changer à mon code initial (HTML)?

J'ai fais cela, et j'obtiens toujours un décalage de mon fond d'écran (je vois qu'un seule partie, en 1280x720) :

http://www.noelshack.com/


je sais pas quoi faire du coup.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
-Shadow- Messages postés 2152 Date d'inscription   Statut Membre Dernière intervention   270
 
Ce n'était pas dans le CSS, mais dans le HTML. Par contre, ce qui est entre guillemet, tu peux l'intégrer sans problème à ton CSS.
0
Réponse 6 / 6
nakamura100 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   1
 
Salut et merci de ton aide, en cherchant un peu il se trouve que j'ai réussi aussi avec ce code là : 

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr>
   <head>
   <title>test page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
   </head>
  
  
   <body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 scroll=no bgcolor=#474747>
  
   <table height=100% width=100% align=center border=0 BACKGROUND="http://www.noelshack.com/">
  
  <tr>
   <td align=center valign=bottom height=100px><H1>LOGO ET TITRE<H1></td>
  </tr>
  
  <tr>
   <td align=center>
   <iframe src="https://player.vimeo.com/video/2571178?title=0&byline=0&portrait=0&autoplay=0" width="700" height="400" frameborder="0"></iframe>
   </td>
  </tr>
  
  <tr>
   <td align=center height=100px></td>
  </tr>
  
   </table>
  
  
   </body>
   </html>


Seulement maintenant, comment faire pour ajouter mon logo, qui devra lui aussi, s'adapter à toutes les résolutions et rester centré au dessus de ma vidéo?


D'une manière générale, comment ajouter des images sur ma page, elles aussi adaptées à toutes les résolutions (ne changent pas de place)
0