Piquer les dimensions d'une partie de sa page par KillianTy - page 1

KeiZetsubou a écrit:

Récupérer la taille d'un bloc pour y adapter une image n'est pas une bonne idée car attention si ta page sera visible d'un mobile ou d'une tablette les dimensions de ton formulaires seront surement différentes. passe plutot par une solution avec un background image en background-size: cover

En effet je viens de recontrer ce probleme: dès que je retreci la page en question, ma deco sort de mon formulaire ce qui provoque un gros probleme de design...

j'ai essayé t'as technique en background image avec bakcgroud size: cover;

mais il reste toujours un decalage entre mon image et mon formulaire, comment regler ca ?

Peux-tu t'expliquer stp ?

merci

-
Edité par KillianTy 16 juillet 2019 à 13:45:30

Avec 2 3 touches de CSS j'ai pu faire en sorte qu'il n'y ai plus de décalage

Mon code (html/css):

<!DOCTYPE html>
<html>
  <head>
  	<title>H-Story: Connexion ou Inscription</title>
  	<meta charset='utf-8'>
  	<link type='text/css' rel='stylesheet' href='connexion.css'/>
  </head>
  <body>
  	<header>
    <div class="header">
    <div class="story">
  		<img src="../images/logo.png" alt='logo H-Story'/>
  		<h2>"Ecrivons notre histoire"</h2>
    </div>
    <div class="connexion" >    
        <form method='post' action='traitement.php'>

  		  <label for='pseudo'>Pseudonyme</label>
  		  <input type='text' name='pseudo' id='pseudo' placeholder="Pseudonyme" size="30" maxlength="10" required />

  		  <label for='password'>Mot de passe</label>
  		  <input type='password' name='password' id='password' placeholder="Mot de passe" size="30" maxlength="10" required/>
           
          <input type="submit" value="connexion" id="connexion"/>

  	    </form>
      </div>
      </div>
  	</header>
  	<section>
  		<div class="inscription">
  			<form method="post" action="inscription.php">

  				<label for="newpseudo">CHOISIS UN PSEUDO</label>
  				<input type="text" name="newpseudo" id="newpseudo" placeholder="CHOISIS UN PSEUDO" maxlength="10" required/>

  				<label for="newpassword">TON NOUVEAU MOT DE PASSE</label>
  				<input type="password" name="newpassword" id="newpassword" placeholder="TON NOUVEAU MOT DE PASSE" maxlength="10" required/>


  				<label for="confirmpassword">CONFIRMES TON NOUVEAU MOT DE PASSE</label>
  				<input type="password" name="confirmpassword" id="confirmpassword" placeholder="CONFIRMES TON NOUVEAU MOT DE PASSE" maxlength="10"required/>

  				<label for="email">ENTRES TON NOUVEL EMAIL</label>
  				<input type="email" name="email" id="email" placeholder="ENTRES TON ADRESSE MAIL" required/>

          <input type="image" src="../images/valid_insc.png"/>

  			</form>

@font-face {
	font-family: alpha_echo;
	src: url("../polices/alpha_echo/alpha_echo-webfont.eot"),
	     url("../polices/alpha_echo/alpha_echo-webfont.svg"),
	     url("../polices/alpha_echo/alpha_echo-webfont.ttf"),
	     url("../polices/alpha_echo/alpha_echo-webfont.woff");
}

@font-face {
	font-family: black_jack;
	src: url("../polices/black_jack/blackjack-webfont.eot"),
	     url("../polices/black_jack/blackjack-webfont.svg"),
	     url("../polices/black_jack/blackjack-webfont.ttf"),
	     url("../polices/black_jack/blackjack-webfont.woff");
}

header h2 {
	font-family: black_jack;
	font-size: 3em;
	margin-top: -5px;

}

.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: -20px;
	margin-left: 5px;
}

.connexion {
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	margin-right: 30px;
}

header {
	background: rgb(35,93,255);
	height: 150px;
	border-bottom: rgb(19,43,177) solid 5px;


}

body {
	margin: 0;
}

.story {
	margin-top: 30px;
}

label {
	position: absolute;
	left: -9999em;
}

.connexion input {
	border-radius: 5px;
	height: 26px;
	font-size: 0.7em;
}

.connexion #connexion {
	width: 150px;
	background: rgb(0,57,104);
	border:  2px rgb(0,39,157) solid;
	font-weight: bold;
	color: rgb(0,39,157);
	font-size: 1em;
}

.inscription input {
	display: flex;
	flex-direction: column;
	width: 350px;
	height: 50px;
	margin: 30px;
	position: relative;
	left: 20px;
	top: 10px;
	border-radius: 5px;
}

section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

input[type="image"] {
	width: 125px;
	height: 80px;
	margin-left: 125px;
	border-radius: 5px;
	position: relative;
	left: 4px;
	top: -10px;

}

footer {
	display: flex;
	flex-direction: row;
	background: rgb(35,93,255);
	position: relative;
	bottom: -5px;
	border-top: rgb(19,43,177) 5px solid;
}

.projet {
	position: relative;
	left: 300px;
}

.inscription form {

	background-image: url(../images/form_inscription.png);
	background-size: cover;
	position: relative;
	left: 50px;
	border-radius: 5px;
}

input[name="newpseudo"] {
	position: relative;
	top: 35px;
	left: 0px;
}

input[name="newpassword"] {
	position: relative;
	top: 23px;
	left: 0px;
}

input[name="email"] {
	position: relative;
	top: 1.8px;
	left: 0px;
}

input[name="confirmpassword"] {
	position: relative;
	top: 11px;
	left: 0px;
}

footer img {
	height: 70px;
	width: 70px;
	position: relative;
	left: 300px;
}

section article {
	position: absolute;
	right: 20px;
	top: 200px;
	font-family: Acme;
	font-size: 1.8em;
}

@font-face {
	font-family: 'Acme';
	src: url("../polices/acme_regular_macroman/Acme-Regular-webfont.eot"),
	     url("../polices/acme_regular_macroman/Acme-Regular-webfont.woff"),
	     url("../polices/acme_regular_macroman/Acme-Regular-webfont.svg"),
	     url("../polices/acme_regular_macroman/Acme-Regular-webfont.ttf");
}

.nom {
	font-size: 2em;
	position: relative;
	right: -100px;
	font-family: blackr;
}

@font-face {
	font-family: blackr;
	src: url("../polices/blackrose_regular_macroman/BLACKR-webfont.eot"),
	url("../polices/blackrose_regular_macroman/BLACKR-webfont.svg"),
	url("../polices/blackrose_regular_macroman/BLACKR-webfont.ttf"),
	url("../polices/blackrose_regular_macroman/BLACKR-webfont.woff");



}

 
 		</div>
  		<article>
  			<p>
  				Peu importe l'âge, la couleur,<br>
  				la nationalité, le sexe...<br>

  				Tout ce qui compte,<br> c'est qu'on s'amuse, non ?<br>

  				Alors rejoins-nous ! Tu es le/la bienvenu(e) sur<br>

  				<span class="nom">H-STORY</span>
  			</p>
      </article>
    </section>
      <footer>
        
        <p>2019 - 2020<br>
        H-STORY - Tout droits réservés.</p>
        <p class="projet">H-STORY est un projet à but non lucratif<br>
          qui n'est en aucun cas affilié ou offert à Sulake LTD. Pour plus de renseignement:</p><a href="#"><img src="../images/facebook.png" alt="facebook"/></a>
        </footer>

</body>
</html>

KillianTy

15 juillet 2019 à 9:36:00

Bonjour, je voudrais creer une image pour mon formulaire, mais pour ce faire je dois connaitre les dimensions..

j'aimerai savoir si c'est possible de piquer les dimensions d'une partie d'une page web, si oui, comment ?

Merci.

ChrisLebure

15 juillet 2019 à 9:43:07

Bonjour,

javascript peut récupérer les dimensions d'un élément, exemple pour la hauteur :

https://www.w3schools.com/jsref/prop_style_height.asp

à partir de là tout est possible, en additionnant/soustrayant des largeurs ou hauteurs de différents éléments

ThibaudRoussel

15 juillet 2019 à 10:11:46

Veux tu connaitre les dimensions d'une page web précise ? Je ne pense pas avoir compris mais avec un inspecter élément tu peux trouver les dimensions de n'importe quelle bloque.

Si tu veux juste connaitre la taille d'une image clique droit propriété.

KeiZed

15 juillet 2019 à 16:11:36

16 juillet 2019 à 13:35:13

16 juillet 2019 à 14:32:22

Peux tu faire une simulation sur codepen ou bien envoyé ton code ici afin de voir ou se trouve le problème ?

21 juillet 2019 à 12:36:30

Piquer les dimensions d'une partie de sa page

Supprimer

Modérer

Signaler le message aux modérateurs