Je vois bientôt la ligne d'arrivée !
Le message d'avant n'est plus d'actualité, j'ai réussi à résoudre le problème.
Dernier bloquage, j'ai réussi à déplacer mon bouton pour choisir l'image, mais, je n'arrive pas à déplacer le bouton pour uploader l'image (donc le mettre juste en dessous de ce dernier), ils se superposent..
Voici le code html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<title>Upload une photo</title>
<!--FONTS-->
<link href="https://fons.googleapis.com/css?family=Amaranth" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="upload.html">Upload une photo</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</header>
<form action="fileUpload.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" id="fileToUpload">
<label for="fileToUpload">
<i class="material-icons">
add_photo_alternate
</i>
Choisir une image
</label>
<input type="submit" name="submit" id="UploadFile" >
<label for="UploadFile">
<i class="material-icons">
add_photo_alternate
</i>
Uploader maintenant !
</label>
</form>
</body>
</html>
Et le code CSS :
body{
background-color: #34ace0;
padding: 0;
margin: 0;
}
input[type="file"]{
display: none;
border-radius: 5px;
}
label{
color: white;
height: 60px;
width: 250px;
background-color: #f5af09;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
}
html, body{
font-family: Verdana, Calibri, sans-serif;
margin: 0;
padding: 0px;
}
header{
width: 100%;
height: 60px;
color: #fff;
padding-top: 15px;
background-color: #34ace0;
font-size: 30px;
text-align: center;
font-family: 'Amaranth', sans-serif;
position: fixed;
top: 0;
z-index: 100000;
}
*{
margin: 0px;
padding: 0px;
font-family: Avenir, sans-serif;
}
nav{
width: 100%;
margin: 0px auto 40px auto;
background-color: white;
position: sticky;
top: 0px;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
width: 33.33%;
text-align: center;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;/*Agrandit le menu et espace la bordure du texte*/
}
nav a:hover{
color: orange;
border-bottom: 2px solid gold;
}
.conteneur{
margin: 0px 20px;
height: 1500px;
}
.mygallery{
position: absolute;
top: 75px;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap : wrap;
flex-wrap: wrap;
background-color: #34ace0
}
.column{
flex : 31.5%;
-ms-flex : 31.5;
max-width: 31.5%;
padding: 0 10px;
margin-top: 10px;
}
.column img{
width: 100%;
margin-top: 8px;
vertical-align: middle;
}
.column img:hover{
cursor: pointer;
-webkit-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
-moz-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
}
@media screen and (max-width: 800px){
.column{
flex : 45%;
-ms-flex : 45%;
max-width: 45%;
padding: 0 10px;
}
}
@media screen and (max-width: 600px){
.column{
flex : 100%;
-ms-flex : 100%;
max-width: 100%;
}
Je vois bientôt la ligne d'arrivée !
Le message d'avant n'est plus d'actualité, j'ai réussi à résoudre le problème.
Dernier bloquage, j'ai réussi à déplacer mon bouton pour choisir l'image, mais, je n'arrive pas à déplacer le bouton pour uploader l'image (donc le mettre juste en dessous de ce dernier), ils se superposent..
Voici le code html
[html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<title>Upload une photo</title>
<!--FONTS-->
<link href="https://fons.googleapis.com/css?family=Amaranth" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="upload.html">Upload une photo</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</header>
<form action="fileUpload.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" id="fileToUpload">
<label for="fileToUpload">
<i class="material-icons">
add_photo_alternate
</i>
Choisir une image
</label>
<input type="submit" name="submit" id="UploadFile" >
<label for="UploadFile">
<i class="material-icons">
add_photo_alternate
</i>
Uploader maintenant !
</label>
</form>
</body>
</html>[/html]
Et le code CSS :
[css]body{
background-color: #34ace0;
padding: 0;
margin: 0;
}
input[type="file"]{
display: none;
border-radius: 5px;
}
label{
color: white;
height: 60px;
width: 250px;
background-color: #f5af09;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
}
html, body{
font-family: Verdana, Calibri, sans-serif;
margin: 0;
padding: 0px;
}
header{
width: 100%;
height: 60px;
color: #fff;
padding-top: 15px;
background-color: #34ace0;
font-size: 30px;
text-align: center;
font-family: 'Amaranth', sans-serif;
position: fixed;
top: 0;
z-index: 100000;
}
*{
margin: 0px;
padding: 0px;
font-family: Avenir, sans-serif;
}
nav{
width: 100%;
margin: 0px auto 40px auto;
background-color: white;
position: sticky;
top: 0px;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
width: 33.33%;
text-align: center;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;/*Agrandit le menu et espace la bordure du texte*/
}
nav a:hover{
color: orange;
border-bottom: 2px solid gold;
}
.conteneur{
margin: 0px 20px;
height: 1500px;
}
.mygallery{
position: absolute;
top: 75px;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap : wrap;
flex-wrap: wrap;
background-color: #34ace0
}
.column{
flex : 31.5%;
-ms-flex : 31.5;
max-width: 31.5%;
padding: 0 10px;
margin-top: 10px;
}
.column img{
width: 100%;
margin-top: 8px;
vertical-align: middle;
}
.column img:hover{
cursor: pointer;
-webkit-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
-moz-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
}
@media screen and (max-width: 800px){
.column{
flex : 45%;
-ms-flex : 45%;
max-width: 45%;
padding: 0 10px;
}
}
@media screen and (max-width: 600px){
.column{
flex : 100%;
-ms-flex : 100%;
max-width: 100%;
}
[/css]
