I'm making a home automation website, I have an image that looks like a garage door; I'm using the images as buttons and I'm placing them in a table to help sort them. Now When I resize the .garage_door and make it width: 20%; there's still whitespace to it's right as if it was full size. I've tried everything including adjusting the padding and the margins.
@charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
.controls {
padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
position: relative;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: center;
right: 35px;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
@media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
.table_controls {
border: 2px solid black;
position: relative;
right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire