Sujet Précédent Sujet Suivant

Problème site HTML (absolute)

F0rEign Messages postés 57 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 6 septembre 2016 - Modifié par F0rEign le 10/07/2016 à 19:37
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 6 sept. 2016 à 23:24
Bonjour, je crée actuellement un site pour un jeu en développement, du coup j'utilise HTML. Tout
va bien mais le site est complétement décalé suite à l'utilisation massive de "position absolute"
(normalement) c'est pourquoi j'aurais besoin de solution pour pouvoir faire un site qui est le même
pour toutes les résolutions. J'ai essayer de mettre en "position relative" mais rien ne marche, quand je
fais "right ;20%;" ou alors "margin-top : 16%;" Rien ne bouge. Donc j'aimerais de l'aide ou tout
simplement des explications concernant ce problème, merci d'avance.

Voici le code HTML de la première page : 

 <!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_fw.css" />
        <title>Fictitious World - RPG horreur/psycho</title>
    </head>
    <body>

<nav>
   <a id="top1"> </a>
  <ul id="menu_horizontal">
       <li> <a href="#top1" alt="Haut de page" title="Vous amène en haut de la page"> Haut de page</a> </li>
       <li> <a href="#story" alt="L'histoire du jeu" title="Vous amène à l'explication du jeu"> L'histoire du jeu </a> </li>
       <li> <a href="#characters" alt="Les personnages" title="Vous amène aux personnages"> Personnages </a> </li>
       <li> <a href="#extras" alt="Les Extras" title="Vous amène aux Extras"> Extras</a> </li> 
  </ul>
</nav>  

<iframe width="560" height="315" src="https://www.youtube.com/embed/wzdVNlgy1tw" frameborder="0" allowfullscreen></iframe>

  <div>
   <p> 
  <a href="https://mega.nz/#F!kpZXCIRL"> Lien de téléchargement du jeu : <br> 
  Version 0.95.9.2 </a>
  </p>
  </div>
  
<p> <a class="beta"> Vous voulez recevoir la clé de déchiffrage pour participer à la BETA du jeu ? <br> 
Remplissez ce formulaire et envoyez-le</p> </a>

     <form method="post" action="beta.html"> 
   <fieldset>
       <legend>Participez à la BETA !</legend> <!-- Titre du fieldset --> 
       <label for="nom">Pseudo</label>
       <input type="text" name="pseudo" id="pseudo" placeholder="Ex: Jack09" maxlength="16" />
       <label for="email">E-mail</label>
       <input type="email" name="email" id="email" placeholder="Ex: Tana.ka@hotmail.fr" maxlength="35" />
       <input type="submit" value="Envoyer" />
   </fieldset>
  </form>
   <div class="infos"> 
      <p>
   <a href="p_2.html"> A propos de nous ? </a> 
 <table>
 <caption> Beta-Testeurs </caption>
    <tr>
         <th> Pseudo </th>
    </tr>
    <tr>
        <td> Slenderbeast030 </td>      
</tr>
<tr>
<td>  Anaë </td>   
</tr>
<tr>
 <td>  F0rEign </td>    
</tr>
<tr>
<td> Tuningcool111 </td>   
</tr>
 </table>
 </p>    

<!--
  <div>
  <a id="story"> </a>
  <h2> L'histoire : </h2> <br>
        <a id="characters"> </a>
       <h2> Les personnages : </h2> <br>
       <a id="extras"> </a>
       <h2> Les extras </h2>
</div>
-->
</div>
 </body>
</html>


Voici également le code CSS de la première page : 

body
{
 background-image: url("images_fw/fond fictitious world-site fond23.png");
 background-repeat: no-repeat;

}

h1
{
  color: white;
  text-align: center;
}
li
{
 font-family: "Arial Black", Arial;
 font-weight: bold;
 color: white;
}

/* Je sélectionne les <li> du menu horizontal */

ul#menu_horizontal li { 

display : inline;

padding : 0 0.65em; /* Pour espacer les boutons entre eux */

}

ul#menu_horizontal {

list-style-type : none; /* Car sinon les puces se placent n'importe où */

}
a[href]
{
 font-weight: bold;
 color: FFFFFF;
 text-decoration: none;

}
#menu_horizontal /* Menu de navigation */
{
 border: 4px black solid;
 border-radius: 10px 5px 10px 5px;
 background-color: black;
 height: 25px;
 padding: 2.5px;
 margin-top: -8px;
 margin-right: -9px;
 margin-left: -9px;
 
 
}
p
{
 color: white;
  
}

@font-face {
font-family: "MuseoSans_500-webfont.woff";
src: url("MuseoSans_500-webfont.woff");

}
h1, p
{
 font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;

}
h2
{
 position: absolute;
 right: 64%;
 font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;
 font-weight: bold;
 color: white;
}

}
a[href]:hover
{
 border-bottom: 1.5px dotted white;
 color: A10E0E;
}

img[src="images_fw/fond_fw_3.png"] 
{
 height: 500px;
}

fieldset /* Formulaire */
{
  position: absolute;
  right:32.5%;
  top: 103%;
}
.beta /* texte d'information formulaire beta */
{
 position: absolute;
 right: 28.5%;
 top: 118%;
 height: 20%;
}
iframe[src="https://www.youtube.com/embed/wzdVNlgy1tw"] /* Vidéo youtube */ 
{
 position: absolute;
 left: 25%;
 bottom: 10%;
}
label[for]
{
   color: white;
}
legend
{
    color: white;
    font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;
}
a[href="https://mega.nz/#!IhRwGA5a"] /* Lien de D.L */
{
   position: absolute;
   right: 42%;
   bottom: 2%;
}
.infos
{
 border: 2px solid white;
 margin-right: 85%;
 padding-left: 2%;
 padding-right: 2%;
}
@media screen and (max-width: 1280px)
{
  body
  {
   width: auto;
   height: auto;
  }
}
td
{
 border:2px white solid;
 font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;
}
table
{
 position: absolute; 
 right: 30%;
 top:130%;
 color: white;
 width: 40%;
 padding-bottom: 3%;
}
th
{
 text-align: left;
 font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;
}
caption
{
 font-family: "MuseoSans_500-webfont.woff", Arial black, Arial;
 text-decoration: underline;
}

--- Anonymously ---

3 réponses

Réponse 1 / 3
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017
31 juil. 2016 à 01:10
Yo,

C'est toi qui as fais le jeux ?

Tu veux faire qu'une page d'accueil à ton site ?

Ce que j'ai fais quand j'ai fais le mien c'est que j'ai mis aucune position absolute car la merde quand tu ne connais pas.

J'ai fais des blocks en faite. Un empilement de boite en gros.

Avec une résolution minimum et maxime de 1270 px je crois environ.

Apres tu en tas les boites une au dessus de l'autre avec les floats et display: block.

Bonne soirée
0
Réponse 2 / 3
F0rEign
30 août 2016 à 03:57
Salut, Oui merci de ta réponse...

à chaque fois j'arrive pas à me connecter sur ce site parce que mes "identifiants" sont incorrects même après les avoirs changés 5 fois auparavant... Enfin bref
Pour répondre à ta question : non ce n'est pas moi qui à crée le jeu mais mon frère. Le seul problème maintenant, c'est les media queries. Il y'en a qui marche et d'autres qui marche pas. Donc mon site est bugé. Ma résolution d'écran est du vieux 1366 x 768.
Merci de ta ou vos réponses.
0
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017
1 sept. 2016 à 13:29
Ca ce complique. Je ne pourrais rien faire de plus.

Bonne journée
0
F0rEign Messages postés 57 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 6 septembre 2016 > nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017
6 sept. 2016 à 22:44
Oui je te comprends c'est assez compliqué mais c'est en persévérant que je trouverais la solution... Merci quand même de ta réponse ^^'
0
Réponse 3 / 3
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
6 sept. 2016 à 23:24
Bonjour,
Ta question concernant le CSS ... je t'invite à la poser dans le forum : http://www.commentcamarche.net/forum/css-156
(codes-sources et commentcamarche.net utilisent les mêmes identifiants)
0

Discussions similaires

qu'est ce que le span en html?
cs_chris81 -
aurelien0306 -

1 réponse
Rendre mon site modifiable par l'utilisateur
daz59000 -
Bidou -

6 réponses
Devis pour un site
Hurilam -
paulschnell -

9 réponses
Fermer les balises html en fin de requete
cs_badben -
Dahevos -

8 réponses
Contacts d'un utilisateur
Leenux -
Dav_c -

1 réponse
Rejoignez-nous