прежде чем я начну объяснять свою проблему, я просто не хочу сказать, что, даже если эта тема уже существует, я не нашел работающего решения, это была неделя, когда эта проблема блокируется, мне действительно нужна помощь,Так что проблема в том, что я начал создавать сайт и пробовал его на другом разрешении экрана, но он работает только на моем, на разных элементах сходят с ума и делают странные вещи, каждый идет на другом и т. Д. Вот мойкод:
@font-face {
font-family: Comfortaa;
src: url(Comfortaa-Regular.ttf);
}
@font-face
{
font-family: Comfort;
src: url(ChampEtLimou.ttf);
}
body
{
background-color : rgb(255,255,255);
}
.titre3
{
color : #0183c0;
font-family : Comfortaa;
position: fixed;
font-size :50px;
z-index:10;
left : 43.2%;
top:-6%;
}
.titre1
{
color : #6597ed;
font-family : Comfortaa;
position: fixed;
left : 43.2%;
top:3%;
font-size : 30px;
z-index:10;
}
.bacc
{
font-family : Comfortaa;
position : fixed;
left : 45%;
top : 12%;
color:#ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #196499), color-stop(1, #1a6ba1));
background:-moz-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-webkit-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-o-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:-ms-linear-gradient(top, #196499 5%, #1a6ba1 100%);
background:linear-gradient(to bottom, #196499 5%, #1a6ba1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#196499', endColorstr='#1a6ba1',GradientType=0);
background-color:#196499;
border:1px solid #314179;
display:inline-block;
cursor:pointer;
font-size:10px;
font-weight:bold;
padding:11px 23px;
z-index:10;
}
.bacc:hover
{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1a6ba1), color-stop(1, #196499));
background:-moz-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-webkit-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-o-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:-ms-linear-gradient(top, #1a6ba1 5%, #196499 100%);
background:linear-gradient(to bottom, #1a6ba1 5%, #196499 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a6ba1', endColorstr='#196499',GradientType=0);
background-color:#1a6ba1;
}
.bacc:active
{
}
.ball
{
position: fixed;
width : 2.7%;
height:5%;
left:40%;
top:2%;
z-index:10;
}
.immenu
{
position:relative;
top:15em;
left:3em;
width:30%;
height:30%;
z-index:2;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset rgba(0,0,0,0.35) 3px 3px 13px;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
}
.safalogo
{
position:fixed;
top:5%;
left:5%;
width:6%;
height:5%;
z-index:10;
}
.sanologo
{
position:fixed;
top:5%;
left:12%;
width:6%;
height:8%;
z-index:10;
}
.banner
{
position:relative;
top:-7em;
left:-5em;
width:100em;
height:25em;
z-index:0;
}
.voile
{
position:relative;
top:-32.2em;
left:-1em;
width:100em;
height:25em;
z-index:1;
opacity:0.5;
}
.speechtitre
{
color : white;
font-family : Comfort;
position: relative;
margin-left:0;
margin-top:0;
left : -1.7em;
top:-30em;
font-size : 30px;
z-index:1;
font-weight:bold;
}
.speechtex
{
color : white;
font-family : Comfort;
position: relative;
left : 29em;
top:-45em;
font-size : 20px;
z-index:1;
}
.ligne
{
position:fixed;
width:100%;
height:0.2%;
top:20%;
left:0%;
z-index:10;
}
.faceblogo
{
position:fixed;
width:3.8%;
height:6%;
left:90%;
top:6%;
z-index:10;
}
.bfixe
{
position:fixed;
width:100%;
height:20%;
top:0%;
left:0%;
z-index:9;
opacity:0.75;
}
body
{
overflow-x: hidden;
padding:auto;
border:auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kibera Black Stars</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="Style.css">
<style type="text/css">a:link{text-decoration:none}</style>
</head>
<body>
<p class="titre3">Kibera</p>
<P class="titre1">BlackStars</P>
<img src="images/ball.png" alt="ballon" class="ball">
<a href="Site.html" class="bacc">Accueil</a>
<img src="images/safalogo.png" alt="safalogo" class="safalogo">
<img src="images/sanologo.png" alt="sanologo" class="sanologo">
<img src="images/ligne.jpg" alt="ligne" class="ligne">
<img src="images/bannierfixe.jpg" alt="bannierfixe" class="bfixe">
<p><a href="https://www.facebook.com/BLACKSTARSKIBERA" target="_blank"><img src="images/faceblogo.png" alt="faceblogo" class="faceblogo"></a></p>
<img src="images/immenu.jpg" alt="immenu" class="immenu">
<img src="images/banner.jpg" alt="banner" class="banner">
<img src="images/voile.jpg" alt="voile" class="voile">
<p align="center" class="speechtitre">Faut mettre un titre la !</p>
<p class="speechtex">Faut mettre un texte ici !</p>
</div>
</body>
</html>
Спасибо за помощь!