Centreren in hoogte van newsletter en social media buttons

Status
Niet open voor verdere reacties.

Suchard

Gebruiker
Lid geworden
24 feb 2011
Berichten
140
Schermafbeelding 2013-12-01 om 18.27.29.png
Schermafbeelding 2013-12-01 om 18.27.10.png
Er is nu net iets teveel ruimte aan de onderkant als je de afbeeldingen vergelijkt.
Dat de newsletter links lijnt en de social media buttons recht dat is wel correct!

Staat er iets in de code wat ik aan kan passen zodat hij mooi boven en onder in het midden staat?

Code:
.box-newsletter-holder {
	background: url("../image/nl-heading.png") repeat;
	height: 4px;
}

.box-newsletter-holder-bottom {
	background: url("../image/nl-heading.png") repeat;
	height: 4px;
	margin-bottom: 20px;
}

.box-newsletter {
	width: 400px;
	float: left;
	padding-bottom: 20px;
	padding-top: 10px;
}

.box-newsletter-heading {
	float: left;
	color: #5b5b5b;
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 17px;
}

.box-newsletter-input {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

#site_subcribe input {
    background: none repeat scroll 0 0 #FFF;
    border: medium none;
    color: #666666;
    float: left;
    height: 20px;
    padding: 3px;
    width: 186px;
	border: 1px solid #f2f2f2;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

#site_subcribe .button-s {
   background: #000000;
   padding: 5.5px;
   line-height: 27px;
   padding: 6px;
   padding-left: 10px;
   padding-right: 10px;
   color: #FFF;
   text-decoration: none;
   font-size: 14px;
   text-transform: uppercase;
   margin-left: 10px;
   transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
}
#site_subcribe .button-s:hover {
   background: #ff3246;
}
.error_subscribe {
	color: #FF0000;
	float: left;
	clear: both;
	margin-top: 5px;
}
/*
------------ METIS Social Icons ------------
*/
.box-social {
    float: right;
    padding-bottom: 20px;
    padding-top: 10px;
}
.box-social-heading {
	float: left;
	color: #5b5b5b;
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 17px;
	margin-left: 4px;
}
.facebook-icon, .twitter-icon, .google-icon, .pinterest-icon, .youtube-icon {
	display: inline-block;
    float: left;
    height: 40px;
    width: 43px;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
}	
.facebook-icon {
	background: url("../image/facebook.png") no-repeat transparent; 
	background-position: 0px 4px;
}
.twitter-icon {
	background: url("../image/twitter.png") no-repeat transparent; 
	background-position: 0px 4px;
}
.google-icon {
	background: url("../image/google.png") no-repeat transparent; 
	background-position: 0px 4px;
}
.pinterest-icon {
	background: url("../image/pinterest.png") no-repeat transparent; 
	background-position: 0px 4px;
}
.facebook-icon:hover, .twitter-icon:hover, .google-icon:hover, .pinterest-icon:hover {
	 background-position: -40px 4px;
}
/*
 
Laatst bewerkt:
Kan je even een link plaatsen, dat is makkelijker te 'debuggen'.
 
Is het de bedoeling dat hij er zo uit komt te zien?

Schermafbeelding 2013-12-22 om 20.29.54.png

Dat los je op zoals TimVN al zei met padding-bottom: 20px; bij .box-newsletter en bij .box-social weg te halen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan