CODEWITHSUNDEEP
htmlcssposition
Roland Jegorov
Roland Jegorov

Reputation: 819

Hovering a paragraph makes list items move to the side

Whenever I hover over the #email all the social icons move to the left for a portion. Ideas were to use positition: fixed or float. I want to do that the icons stay intact but the #email still hovers.

HERE is the code - http://codepen.io/anon/pen/jyubq

#header ul li {
width:48px;
height:48px;
margin-left:15px;
margin-top: 5px;
display:inline-block;
background-color:#000000;
padding:0;
text-align: center;

}
#google{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('images/googleplus.png');
display:block;
}
#facebook{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png');
display:block;
}
#twitter{
width:48px;
height:48px;
border-radius: 50%/50%;
background-image:url('http://www.gmailnotifier.se/img/icon_twitter.png');
display:block;
}
#header ul li#google{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#google:hover{
background-color:#c23725;
}
#header ul li#facebook{
background-color:#3b5998;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#facebook:hover{
background-color:#2a4887;
}
#header ul li#twitter{
background-color:#2447B2;
transition:background-color;
transition-duration:0.17s;
}
#header ul li#twitter:hover{
background-color:#1F3D99;
}

#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email:hover {
font-weight: bold;
}

Upvotes: 1

Views: 72

Answers (2)

Akshay
Akshay

Reputation: 14368

I think Animus's answer is better but if you want to use font-weight:bold then you have to absolute position it http://codepen.io/anon/pen/jqyzs

#email{
position:absolute;
right:0;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}

Upvotes: 1

Animus
Animus

Reputation: 853

Your font becomes greater . And padding calculates from greater font (bold), not the regular. I can advise you this. When you hovering,text-shadow: 0px 0px 2px #000; appears instead of font-weight:bold;.

Upvotes: 4

Related Questions