Met een plaatje is het lastig zien hoe dit stukje layout wordt opgebouwd.
Link gekopieerd
Hierbij de html en css codering
HTML:
<form name="product_adding" method="post" action="">
<input type="hidden" name="artid" value="12462">
<div class="orderandquantity">
<div class="order_container">
<div class="quantity">
<input type="text" name="quantity" class="quantity_artpage" value="1">
</div>
<span class="quantity_cross">X</span>
<input name="orderbutton" type="submit" class="orderbut" style="float:none;" value="In winkelwagen" onclick="$.add2cart( 'product_12462', 'cart')">
</div>
</div>
</form>
CSS:
.orderandquantity{
background-color: #e4e6e6;
height: 50px;
box-sizing: border-box;
padding: 8px 10px
}
.order_container{
float:right;
}
.quantity{
float:left;
}
.quantity_artpage{
height: 35px;
width: 37px;
border: 1px solid #C9C9C9;
border-radius: 3px;
text-align: center;
padding-top: 2px;
display: inline-block;
vertical-align: middle;
box-shadow: inset 0 0 5px 0px #CDCDCD;
box-sizing: border-box;
}
.quantity_cross{
display: inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top:10px;
}
.orderbut,.orderbut:visited{
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
background: -webkit-linear-gradient(#ffc000, #ffa700);
background: -o-linear-gradient(#ffc000, #ffa700);
background: -moz-linear-gradient(#ffc000, #ffa700);
background: linear-gradient(#ffc000, #ffa700);
color: #fff;
text-decoration: none;
text-align: center;
cursor: pointer;
border: 0;
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
border-radius: 3px;
margin-top: -4px;
vertical-align: middle;
padding: 10px 20px 10px 20px;
box-sizing: border-box;
height: 35px;
}
Link gekopieerd
Gebruik je javascript?
Heb je al eens goed gekeken met de inspector (F12) wat er dan veranderd?
Link gekopieerd