Sujet Précédent Sujet Suivant

Je ne comprends pas le beug en css

Fermé
espritdrone - 12 mars 2021 à 12:11
 espritdrone - 12 mars 2021 à 14:27
bonjour j'ai un problème sur le site que j'ai fait hier il n'est pas encore fini mais je ne peux pas avancer tant que les problèmes ne sont pas résolus je ne trouve pas leur origine et je ne sais pas comment les résoudre merci de votre aide

ci dessous le html
<!DOCTYPE html>
<html lang="fr">
<head class="color"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="Untitled-3.css"><title>formulaire d'inscription</title><link rel="shortcut icon" href="C:\Users\ESPRIT_DRONE\OneDrive\Documents\esprit drone website\logotwitter.png"></head>
<body>
<header>
<h1 class="titre">
FORMULAIRE D'INSCRIPTION
</h1>
<p class="ligne"></p>
<a class="connect" href=""><img class="connectimg" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\bouton-de-compte-rond-avec-l'utilisateur-a-l'interieur.png" alt="conexion logo"></a>
</header>
<img class="marketingimg" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\business-people-meeting (1).jpg" alt="">
<p class="bdd"></p>
<h1 class="titlejoin">Bienvenue cher influenceur</h1>
<h1 class="join">Vous avez entre 300 et 1 milion d'abonnés ou plus <br> et vous avez envie d'enfin monétiser <br> vos réseaux sociaux
<h1 class="formtxt"> Et vous voulez en faire votre première ou seconde <br> source de revenus alors rejoignez nous <br> en complétant le formulaire ci dessous
<h1 class="titre">
<form action="treat.php" method="POST">
<p>
<fieldset class="form">

<label for="compteréseaux"></label>
<input type="text" name="compteréseaux" id="compteréseaux" placeholder="compte instagram" required>
<input type="email" name="email" id="email" placeholder="email" required>
<input type="tel" name="tel" id="tel" placeholder="n° telephone" required>
<input type="number" min="15" max="99" placeholder="age">
<h1>etez vous majeur</h1>
<label for="majeuroui">oui</label>
<input type="radio" name="majeur" id="majeuroui" required>
<label for="majeurnon">non</label>
<input type="radio" name="majeur" id="majeurnon" required>
<label for="pays"></label>
<select name="pays" id="pays" required>
<option value="france" selected>france</option>
<option value="suisse">suisse</option>
<option value="engleterre">engleterre</option>
<option value="espagne">espagne</option>
<option value="allemagne">allemagne</option>
<option value="luxembourg">luxembourg</option>
<option value="irlande">irlande</option>

</select>
<input type="text" placeholder="commentaires">
<input type="submit">

</fieldset>
</p>
</form>
<footer class="footer">
<div>
<p class="ligne2"></p>
<h1 class="footer1">rejoignez nous sur nos reseaux sociaux</h1>
<div>
<!--icones-->
<a href=""><img class="instagram" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\instagram.png" alt="instagram"></a>
<a href=""><img class="twitter" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\twitter.png" alt="twitter"></a>
<a href=""><img class="facebook" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\facebook.png" alt="facebook"></a>
</div>
<h1 class="contact">ou </h1>
<a class="contact1" href="">contactez nous</a>
</div>
</footer>
</body>
<!--build by nicolas hesse from esprit-drone for -->
</html>

et le css

.titre
{
font-family:Helvetica;font-size: 140%;font-style:normal; text-align:left;position:absolute;color: rgb(100, 100, 100);
top:0%;
left:1%;
width: 100%;
height: 10%;
}
.ligne
{
width: 100%;height: 1px; background-color: rgb(180, 180, 180);margin-top: 2%;position: absolute;margin-left: -1%;
}
.ligne2
{
width: 100%;height: 10%;background: rgba(232,232,232);margin-top: 47%;position: absolute;left: -1%;
}
.connectimg
{
width: 1.7%;margin-left: 97%;position: absolute;
}
.marketingimg
{
width: 30%;position: absolute;margin-top: 5%;margin-left:65% ;border-radius: 15px;
}
.titlejoin
{
color: rgb(77, 77, 77);font-size: 175%;font-family: Helvetica;margin-top: 7.5%;margin-left: 1%;position: absolute
}
.join
{
font-size: 150%;font-family: Helvetica;margin-top: 10%;margin-left: 1%;position: absolute;color:rgb(100, 100, 100);
}
.formtxt
{
font-size: 150%;font-family: Helvetica;margin-top: 18%;margin-left: 30%;position: absolute;color:rgb(100, 100, 100)
}
.footer1
{
font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 0%;position: absolute;
}
.instagram
{
width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 18%;

}
.twitter
{
width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 20%;
}
.facebook
{
width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 22%;
}
.contact
{
font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 90%;position: absolute;
}
.contact1
{
font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 90%;position: absolute;text-decoration: none;border: none;
}
*
{
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

.form
{
position: absolute;margin-top: 35%;margin-left: 0%;
}

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 mars 2021 à 12:30
Bonjour,

Déjà, merci de poster ton code correctement en utilisant les balises de code.
Explications ( à lire entièrement !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite... ben.. explique ton souci ....
0
Réponse 2 / 2
espritdrone
Modifié le 12 mars 2021 à 14:33
voilà c'est remis en place correctement merci du ta réponse

le problème est que je ne veux pas que l'on puisse faire un scroll horizontal donc j'ai fait en sorte que les éléments ne dépassent pas de la taille écran mais un dépasse et je ne sais pas lequel même après avoir fait des modifications pour vérifier et le footer beug la moitié s'affiche et est coupée.
n'hésite pas a me dire si ce n'est pas assez clair ou si il te manque quelque chose.
les images sont en local le site n'est pas en ligne 

<!DOCTYPE html>
<html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="Untitled-3.css"><title>formulaire d'inscription</title><link rel="shortcut icon" href="C:\Users\ESPRIT_DRONE\OneDrive\Documents\esprit drone website\logotwitter.png"></head>
<body>
    <header>
        <h1 class="titre">
            FORMULAIRE D'INSCRIPTION
        </h1>
        <p class="ligne"></p>
        <a  class="connect" href=""><img class="connectimg" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\bouton-de-compte-rond-avec-l'utilisateur-a-l'interieur.png" alt="conexion logo"></a>
    </header>
    <img class="marketingimg" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\business-people-meeting (1).jpg" alt="">
    <p class="bdd"></p>
    <h1 class="titlejoin">Bienvenue cher influenceur</h1>
    <h1 class="join">Vous avez entre 300 et 1 milion d'abonnés ou plus <br> et vous avez envie d'enfin monétiser <br> vos réseaux sociaux
    <h1 class="formtxt"> Et vous voulez en faire votre première ou seconde <br> source de revenus alors rejoignez nous <br> en complétant le formulaire ci dessous
    <h1 class="titre">
        <form action="treat.php" method="POST">
            <p>
                <fieldset class="form">
                
                <label for="compteréseaux"></label>
                <input type="text" name="compteréseaux" id="compteréseaux" placeholder="compte instagram" required>
                <input type="email" name="email" id="email" placeholder="email" required>
                <input type="tel" name="tel" id="tel" placeholder="n° telephone" required>
                <input type="number" min="15" max="99" placeholder="age">
                <h1>etez vous majeur</h1>
                <label for="majeuroui">oui</label>
                <input type="radio" name="majeur" id="majeuroui" required>
                <label for="majeurnon">non</label>
                <input type="radio" name="majeur" id="majeurnon" required>
                <label for="pays"></label>
                <select name="pays" id="pays" required>
                    <option value="france" selected>france</option>
                    <option value="suisse">suisse</option>
                    <option value="engleterre">engleterre</option>
                    <option value="espagne">espagne</option>
                    <option value="allemagne">allemagne</option>
                    <option value="luxembourg">luxembourg</option>
                    <option value="irlande">irlande</option>

                </select>
                <input type="text" placeholder="commentaires">
                <input type="submit">
                
            </fieldset>
            </p>
        </form>
    <footer class="footer">
        <div>
            <p class="ligne2"></p>
            <h1 class="footer1">rejoignez nous sur nos reseaux sociaux</h1>
            <div>
                <!--icones--> 
                <a href=""><img class="instagram" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\instagram.png" alt="instagram"></a>
                <a href=""><img class="twitter" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\twitter.png" alt="twitter"></a>
                <a href=""><img class="facebook" src="C:\Users\ESPRIT_DRONE\OneDrive\Documents\FORMULAIRE marketing\facebook.png" alt="facebook"></a>
            </div>
            <h1 class="contact">ou </h1>
            <a class="contact1" href="">contactez nous</a>
        </div>
    </footer>
</body>
<!--build by nicolas hesse from esprit-drone for -->
</html>




.titre
{
   font-family:Helvetica;font-size: 140%;font-style:normal; text-align:left;position:absolute;color: rgb(100, 100, 100);
   top:0%;
   left:1%;
   width: 100%;
   height: 10%;
}
.ligne
{
   width: 100%;height: 1px; background-color: rgb(180, 180, 180);margin-top: 2%;position: absolute;margin-left: -1%;
}
.ligne2
{
   width: 100%;height: 10%;background: rgba(232,232,232);margin-top: 47%;position: absolute;left: -1%;
}
.connectimg
{
   width: 1.7%;margin-left: 97%;position: absolute;
}
.marketingimg
{
   width: 30%;position: absolute;margin-top: 5%;margin-left:65% ;border-radius: 15px;
}
.titlejoin
{
   color: rgb(77, 77, 77);font-size: 175%;font-family: Helvetica;margin-top: 7.5%;margin-left: 1%;position: absolute
}
.join
{
   font-size: 150%;font-family: Helvetica;margin-top: 10%;margin-left: 1%;position: absolute;color:rgb(100, 100, 100);
}
.formtxt
{
   font-size: 150%;font-family: Helvetica;margin-top: 18%;margin-left: 30%;position: absolute;color:rgb(100, 100, 100)
}
.footer1
{
   font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 0%;position: absolute;
}
.instagram
{
   width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 18%;

}
.twitter
{
   width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 20%;
}
.facebook
{
   width: 1.2%;margin-top: 47.3%;position: absolute;margin-left: 22%;
}
.contact
{
   font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 90%;position: absolute;
}
.contact1
{
   font-size: 75%;font-family: Helvetica;margin-top: 47.5%;margin-left: 90%;position: absolute;text-decoration: none;border: none;
}
*
{ 
   -webkit-touch-callout: none; 
   -moz-user-select: none; 
   -ms-user-select: none; 
   user-select: none;}
   
.form
{
   position: absolute;margin-top: 35%;margin-left: 0%;
}
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Iptv beug
leogauthier15 -
bazfile -

1 réponse
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
Beug sur pc portable
Riddick87 -
paslau35 -

15 réponses