Bonjour,
Voilà, je suis actuellement en train de m'exercer à l'intégration d'une maquette web au format PSD que j'ai trouvé sur le web. Tout ce passe bien hormis un petit détails. je vous fait une capture d'écran pour que vous puissiez voir le problème en question. Il y a un petit décalage entre l'input et le button.
https://zupimages.net/up/19/23/1azq.png
Ce que je fais
J'ai essayé de modifier la hauteur du input, mais cela n'a rien changé. J'ai essayé de modifier la taille de la police, mais ça fonctionne pas. Alors, ce n'est pas dramatique, mais j'aimerais que ça doit clean vous voyez ce que je veux dire.
Mon code html
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<title>Nava</title>
<meta charset="utf-8">
<meta name="description" content="Nava">
<meta name="author" content="Nava">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript" src="js/app.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="wrap">
<nav class="navbar full" id="navbar">
<div class="container">
<a href="" class="logo left"><img src="css/images/logo.png" alt="Nava Logo"></a>
<ul class="navbar-list right">
<li><a href="#"></a>TOP DESTINATIONS</li>
<li><a href="#"></a>ADD YOUR BOAT</li>
<li><a href="#"></a>SIGN UP</li>
</ul>
</div>
</nav>
<section id="reserver">
<h1 class="title_big">RESERVER A BOAT NOW!</h1>
<h6 class="title_small">AND SET YOUR SAILS INTO PARADISE!</h6>
<div class="form-groupe">
<form action="index.html">
<div class="input">
<input class="input-search" type="text" name="search" id="search" placeholder="WHAT IS YOUR DESTINATION, SAILS?">
<button type="submit" class="submit">FIND A BOAT</button>
</div>
</form>
</div>
</section>
</div>
</body>
</html>
Mon code SCSS :
body {
margin: 0; padding: 0;
font-family: Arial, verdana, sans-serif;
}
@import "compass";
@import "font";
* {
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.logo {
float: left;
line-height: 130px;
}
.full {
line-height: 100px;
height: 100px;
}
.container {
max-width: 1497px;
min-width: 1280px;
margin: auto;
}
.wrap {
background: url(images/background.jpg) no-repeat;
width: 100%; height: 850px;
nav.navbar {
//position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 3;
ul {
list-style: none;
line-height: 50px;
li {
display: inline-block;
color: #f3f5fd;
font-family: 'ralewaybold';
padding: 10px 10px 0px 20px;
&:hover{
cursor: pointer; color: #3498db;
transition-duration: 0.5s;
@include transform(rotate(360deg));
}
a {
display: block;
font-size: 72px;
&:hover{
color: #f3f5fd;
}
}
}
}
}
section#reserver {
margin-top: 200px;
h1, h6 {
display: flex;
justify-content: center;
}
.title_big {
font-size: 72px;
font-family: 'ralewaybold';
color: #f9fafe;
}
.title_small {
font-size: 22px;
color: #f9fafe;
font-family: 'Myriad Pro';
margin-top: -50px;
}
.form-groupe {
display: flex;
justify-content: center;
.input-search {
width: 520px;
height: 60px;
padding: 30px;
color: #404040;
font-size: 16px;
font-family: 'ralewaybold';
border: none;
//@include border-radius(5px);
@include border-top-left-radius(5px);
@include border-bottom-left-radius(5px);
}
.submit {
width: 200px;
height: 62px;
background: #e7434e;
color: #f9fafe;
cursor: pointer;
font-family: 'ralewaybold';
font-size: 14px;
border: none;
margin-left: -5px;
}
}
}
}