From a065402c4ac3d6eab3a5676f4eae8740948a7ba3 Mon Sep 17 00:00:00 2001
From: Christophe St-Georges <christophe.st-georges@polymtl.ca>
Date: Tue, 1 Dec 2020 20:21:46 -0500
Subject: [PATCH] Added and place images to member'S section buttons
---
css/styles.css | 43 +++++++++++++++++++++++++++++++++++++------
html/membres.html | 5 ++++-
2 files changed, 41 insertions(+), 7 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 0430505..c7a4cba 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -16,10 +16,13 @@ iframe {
}
.bold-btn{
+ position: absolute;
color: white;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
+ top: 12px;
+ left: 50px;
}
.btn{
@@ -162,6 +165,38 @@ iframe {
visibility: hidden;
}
+.icone-frigo{
+ position: absolute;
+ width:39px;
+ height:39px;
+ left: 3px;
+ top: 3px;
+}
+
+.icone-chercher{
+ position: absolute;
+ width:30px;
+ height:30px;
+ left: 10px;
+ top: 8px;
+}
+.icone-profil{
+ position: absolute;
+ width:26px;
+ height:30px;
+ left: 10px;
+ top: 8px;
+}
+
+.icone-panier{
+ position: absolute;
+ width:26px;
+ height:22px;
+ left: 12px;
+ top: 12px;
+}
+
+
.insc {
width: 418px;
display: block;
@@ -182,12 +217,6 @@ iframe {
border-width: 1px;
}
-.icone-image{
- width: 39px;
- height: 39px;
- position: absolute;
-}
-
.insc:focus {
border-color: black;
outline: none;
@@ -224,6 +253,7 @@ iframe {
overflow: hidden;
border: none;
background-color: white;
+ position: relative;
}
/* Style the buttons that are used to open the tab content */
@@ -240,6 +270,7 @@ iframe {
height: 45px;
display: inline;
background-color: #53bdbd;
+ position: relative;
}
.memberTab button.active{
diff --git a/html/membres.html b/html/membres.html
index 88a8604..f6076bb 100644
--- a/html/membres.html
+++ b/html/membres.html
@@ -18,18 +18,21 @@
<div class="memberTab">
<button id="memberSectionTab" >Section membres</button>
<button class="tablinks active" onclick="openTab(event, 'listeFrigos')">
- <!--<img src="frigo.png" class="icone-image">-->
+ <img src="../frigo.png" class="icone-frigo" >
<span class="bold-btn">Liste des frigos</span>
</button>
<button class="tablinks" onclick="openTab(event, 'chercherUnRepas')">
+ <img src="../chercher.png" class="icone-chercher">
<span class="bold-btn">Trouver un repas</span>
</button>
<button class="tablinks" onclick="openTab(event, 'profil')">
+ <img src="../profil.png" class="icone-profil">
<span class="bold-btn">Mon profil</span>
</button>
<button class="tablinks" onclick="openTab(event, 'panier')">
+ <img src="../panier.png" class="icone-panier">
<span class="bold-btn">Mon panier</span>
</button>
</div>
--
GitLab