28112 sujets

CSS et mise en forme, CSS3

Beug d'affichage css

bonjour j'ai un problème avec un site que je suis en train de faire, les éléments ne sont pas sensés dépasser sur le coté pourtant il y a une barre de scroll x de quelques px et le bandeau du footer beug un peu je ne comprends pas pourquoi pouvez vous m'aider merci
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>

ci dessous le css

.color
{
color: orange;
}
.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%;
}
je ne peux pas joindre les images dsl
merci de votre aide
Modérateur
Bonjour,

Concernant les dépassements horizontaux, c'est principalement dû au fait que tu mets des width:100% comme largeur de tes blocs, alors qu'il y a aussi des margin et des padding. Du coup, l'ensemble fait plus de 100% et ça dépasse.

EDIT: à d'autres endroits, ce n'est pas des width: 100%, mais c'est le même principe, les lignes que tu essaies d'afficher font plus de 100% de la largeur.

Concernant le footer (et en fait l'ensemble de la page), tu utilises des position:absolute un peu partout. Il te faudrait avoir pas mal de bol pour que ça marche. Supprime ces position:absolute, adapte tes margin en conséquence , et ça devrait redevenir gérable.

Amicalement,
Modifié par parsimonhi (12 Mar 2021 - 23:15)
merci beaucoup j'ai pris l'habitude de mettre des position absolute c'est pour ça.
au final j'ai presque tout refait et sa donne ça upload/1615589134-82445-capturedancran2021-03-1223365.jpg
Modifié par esprit-drone (12 Mar 2021 - 23:46)
Modérateur
Bonjour,

esprit-drone a écrit :
au final j'ai presque tout refait...


Excellente initiative.

Amicalement,
Sujet clos
Aller à