28172 sujets

CSS et mise en forme, CSS3

Pb <button> qui se déplace lorsque je réduit la page web

Bonjour tout le monde ! Smiley lol

Je suis tout nouveau ici et dans le codage html / css, veuillez m'excuser par avance si ce que j'écris vous paraît particulièrement stupide ! Smiley confused

J'ai un petit problème sur mon css : comme dit dans le titre, lorsque que je réduit ma page, j'ai un bouton où il est écrit "en savoir plus" qui se balade librement ...
Et je n'arrive pas à le faire tenir en place.
Pourriez-vous m'aider s'il-vous-plaît ?

Voici mon html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	 <meta charset="UTF-8" />
     	<link href="style.css" rel="stylesheet" type="text/css" />
     	<link href="fonts.css" rel="stylesheet" type="text/css" />
     	     	<title>Titre de la page</title>
	</head>

<body>

		<nav>
      		<ul>
       			<li><a class="bouton" href="https://www.google.com">BFA</a></li>
        		<li><a class="bouton" href="https://www.google.com">WOW CLASSIC</a></li>
        		<li><a class="bouton" href="https://www.google.com">NEWS</a></li>
       			<li><a class="bouton" href="https://www.google.com">FORUMS</a></li>
        		<li><a class="bouton" href="https://www.google.com">MOUNTS</a></li>
       			<li><a class="bouton" href="https://www.google.com">PETS</a></li>
        		<li><a class="bouton" href="https://www.google.com">BLIZZCON</a></li>
        		<li><a class="bouton" href="https://www.google.com">ARTICLES</a></li>
     		 </ul>
    	</nav>

		<div class="banniere_video">
			<p id="titre1"> LA SAISON 4 DE BATTLE FOR AZEROTH COMMENCE</p>
			<p id="texte1"><br> Affrontez le Dieu tres ancien N’Zoth et ses sbires a Ny’alotha, la cite en eveil, plongez au coeur d’un nouveau raid a douze boss, terrassez vos adversaires dans l’arene et sur les champs de bataille, et mettez votre courage a l’epreuve dans les donjons de pierre mythique pour gagner d’incroyables recompenses ! </p>

			<button id="bouton_banniere"><a id="lien_titre" href="https://www.google.com">EN SAVOIR PLUS</button></a>

     		<video autoplay muted loop id="video">
        		<source src="elements/videos/vidéo_arrière_plan.mp4" type="video/mp4" alt="">
      		</video>
		</div>

</body>
</html>

et voici mon CSS :
* {
  text-decoration: none;
}

p {
  position: absolute;
  z-index: 2; /* permet au texte d'être au dessus de la vidéo */
}

#titre1, #texte1 {
  color: white;
}

#titre1 {
  position: absolute;
  top: 4.5em;
  max-width: 80%;
  font-size: 50px;
  font-weight: bold;
}

#texte1 {
  position: absolute;
  top: 20em;
  font-size: 20px;
  max-width: 50%;
}

#bouton_banniere {
  position: absolute;
  bottom: 4em;
  height: 2.8em;
  width: 22em;
  font-size: 17px;
  background: rgba( 147, 16, 3, .80); /* R -> V -> B -> Opacité */
  border: 1px solid #EA3012;
  z-index: 2;
}

#bouton_banniere:hover {
  background: rgba( 147, 16, 3, 1);
}

#lien_titre {
  position: relative;
  left: -0.5em; /* position pour coller aux dimensions du bouton */
  top: -0.2em;
  display: block; /* pour raison inconnue, sans ça, le bouton n'est pas entièrement cliquable */
  position: relative;
  color: #F7B10A;
  padding: 13px;
  height: 1.5em;
  width: 20.6em;
}

#lien_titre:hover {
  color: #F7D67B;
}


video {
  position: absolute;
  top: 0em;
  left: 0em;
  display: block;
  width: 100vw;
  height: 45.25vw;
  object-fit: cover; /* permet de couvrir le totalité de la largeur de l'écran */
}

nav {
  width: 20%;
  margin: 0;
  position: fixed;
  top: 2em;
  right: -3em;
  z-index: 3;
}

nav li {
  float: left; /* sans ça nav est au dessus du background */
  width: 70%;
  height: 75px;
  text-align: center;
}

li {
  border: 1px solid #211105;
  border-bottom: 0px;
  list-style: none;
  background-image: url(elements/pictures/background_button.png);
}

.bouton {
  display: block;
  height: 100%;
  background: -webkit-linear-gradient(top, rgb(229,174,37) , rgb(255,239,155) 100%); /* sert ici a faire un dégradé sur le texte seulement */
  color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
  position: relative;
  top: 1.5em;
}

.bouton:hover {
  color: white;
}


Cela fait maintenant deux heures que je travail dessus et j'avoue que je désespère un peu ...
Merci beaucoup d'avance pour votre aide ! Smiley biggrin
Sujet clos
Aller à