Problème site HTML (absolute)

Messages postés
57
Date d'inscription
vendredi 22 mars 2013
Dernière intervention
6 septembre 2016
-
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 ---
Afficher la suite 

Votre réponse

3 réponses

Messages postés
469
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
16 juillet 2017
0
Merci
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
Commenter la réponse de nocram18
0
Merci
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.
nocram18
Messages postés
469
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
16 juillet 2017
-
Ca ce complique. Je ne pourrais rien faire de plus.

Bonne journée
F0rEign
Messages postés
57
Date d'inscription
vendredi 22 mars 2013
Dernière intervention
6 septembre 2016
> nocram18
Messages postés
469
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
16 juillet 2017
-
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 ^^'
Commenter la réponse de F0rEign
Messages postés
23650
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 décembre 2018
0
Merci
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)
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.