HTML:
<html>
<head>
<title>Price Table (2)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pricetables">
<div id="pricetable1">
<div class="top">
<p class="title">Standard</p>
<p class="description">Description</p>
</div>
<div id="settings">
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
</div>
<hr>
<div id="money">
<font face="Verdana" size="30px" color="green"><sup>€</sup>79<sup>95</sup></font>
</div>
<div id="button">
<input type="submit" id="button-1" value="Koop nu" onclick="location.href = 'http://www.silverworx.nl'">
</div>
</div>
<div id="pricetable1">
<div class="top">
<p class="title">Standard</p>
<p class="description">Description</p>
</div>
<div id="settings">
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
</div>
<hr>
<div id="money">
<font face="Verdana" size="30px" color="green"><sup>€</sup>79<sup>95</sup></font>
</div>
<div id="button">
<input type="submit" id="button-1" value="Koop nu" onclick="location.href = 'http://www.silverworx.nl'">
</div>
</div>
<div id="pricetable1">
<div class="top">
<p class="title">Standard</p>
<p class="description">Description</p>
</div>
<div id="settings">
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
<div class="setting">
Hallo
</div>
</div>
<hr>
<div id="money">
<font face="Verdana" size="30px" color="green"><sup>€</sup>79<sup>95</sup></font>
</div>
<div id="button">
<input type="submit" id="button-1" value="Koop nu" onclick="location.href = 'http://www.silverworx.nl'">
</div>
</div>
</div>
</body>
</html>
HTML:
#pricetables {
margin: 0 auto;
width: 80%;
}
#pricetable1 {
margin-left: 0.2%;
width: 22%;
border: 1px solid #000;
float: left;
border-radius: 8px;
}
.top {
margin: 0;
height: 100px;
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: green;
}
.title, .description {
margin: 0px auto;
font-family: Verdana;
font-size: 30px;
text-align: center;
color: #fff;
}
.description {
font-size: 15px;
}
#settings {
margin: 20px auto;
margin-bottom: 0;
width: 60%;
height: 200px;
}
.setting {
margin: 20px auto;
border-top: 1px solid #e0e0e0;
height: 20px;
width: 100%;
text-align: center;
font-family: Verdana;
font-size: 15px;
color: #777;
}
#money {
margin: 0 auto;
height: 65px;
width: 60%;
}
#button {
margin: 10px auto;
height: 41px;
width: 60%;
}
#button-1 {
height: 40px;
width: 100%;
background: green;
outline: none;
border-radius: 10px;
border: 1px solid #000;
text-align: center;
}
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}Dit is een HTML en een CSS bestand.
Ik heb hier een Price Table gemaakt, alleen er is één probleempje:
Als ik bij .title, .description de margin verander naar '10px auto' dan gaat heel de pricetable mee, hoe zorg ik ervoor dat alleen de .title en de .description 10px naar beneden gaan?
