I have three social media images (Facebook, Twitter and LinkedIn) which I want to embedded on to my home page with links within, I have got the CSS for each logo but I just can't get them to line up (three in a row, centralized), any advises?
CSS:
.twitter-logo {
width: 40px;
height: 40px;
background: url("https://www.sites.com/Twitter_web.png") no-repeat;
float: left;
}
.facebook-logo {
width: 39px;
height: 40px;
background: url("https://www.sites.com/Facebook_web.png")no-repeat;
float: left;
}
.linkedin-logo {
width: 41px;
height: 40px;
background: url("https://www.sites.com/LinkedIn_web.png") no-repeat;
float: left;
}
.follow-us-three {
margin: 10px 0;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
HTML
<div class="follow-us-three">
<a class="facebook-logo" href="link"></a>
<a class="twitter-logo" href="link"></a>
<a class="linkedin-logo" href="link"></a>
</div>
Try This, I think by three in a row and centralized you mean you want to set the size of the background as your link's size.
I have just added background-size:cover;
.twitter-logo {
width: 40px;
height: 40px;
background: url("download.png") no-repeat;
background-size: cover;
float: left;
}
.facebook-logo {
width: 39px;
height: 40px;
background: url("download.png") no-repeat;
background-size: cover;
float: left;
}
.linkedin-logo {
width: 41px;
height: 40px;
background: url("download.png") no-repeat;
background-size: cover;
float: left;
}
.follow-us-three {
margin: 10px 0;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
you can try below css code.
.linkedin-logo,.twitter-logo,.facebook-logo{
width: 40px;
height: 40px;
background-image: url("https://pbs.twimg.com/profile_images/666407537084796928/YBGgi9BO.png");
float: left;
background-position: center;
background-size: 40px 40px;
}
.follow-us-three {
margin: 10px 10px;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
float: left;
}
<div class="follow-us-three">
<a class="facebook-logo" href="link"></a>
<a class="twitter-logo" href="link"></a>
<a class="linkedin-logo" href="link"></a>
</div>
I just added "background-position: center; background-size: 40px 40px;" so that you can see the icons in proper way.
In the spirit of reducing replicated code I have done the following:
Created a generic logo class
Used CSS sprites to position the image.
Changed from float to inline-block to center the links easier and more efficiently.
NOTE Don't use the sprite as provided, use your own. Also note inline-block introduces about a px space between the links.
.follow-us-three .logo
{
width: 40px;
height: 40px;
background: url("http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg") no-repeat;
display:inline-block;
}
.logo.twitter {
background-position:-120px 0px ;
}
.logo.facebook {
background-position:-80px 0px ;
}
.logo.linkedin {
background-position:-325px 0px ;
}
.follow-us-three {
margin: 10px auto;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
text-align:center;
}
<div class="follow-us-three">
<a class="logo facebook" href="link"></a>
<a class="logo twitter" href="link"></a>
<a class="logo linkedin" href="link"></a>
</div>
What i would like to suggest is use <img> tag inside your <a> tags and avoid using background property of link like
CSS:
.twitter-logo {
width: 40px;
height: 40px;
float: left;
}
.facebook-logo {
width: 39px;
height: 40px;
float: left;
margin-left:10px;
}
.linkedin-logo {
width: 41px;
height: 40px;
float: left;
margin-left:10px;
}
.follow-us-three {
margin: 10px 0;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
HTML:
<div class="follow-us-three">
<img class="twitter-logo" src="https://g.twimg.com/Twitter_logo_blue.png"></img>
<img class="facebook-logo" src="https://www.facebookbrand.com/img/fb-art.jpg"/>
<img class="linkedin-logo" src="http://www.freeiconspng.com/uploads/linkedin-logo-3.png"/>
</div>
Mention whatever you like to mention in href attribute of your links and also Your links were not working so added new links.Hope it helps.
Another tip i would like to give you is start learning bootstrap because it has pre-defined icons for sites like facebook,twitter and thore icons are very good looking and easy to use.
There are two issues...
Anchor elements <a> default display is inline
You need to restore document flow with clear fix
You can easily change the display of your anchor tags by setting the display property to display: block or display: inline-block. This will allow these element to have a width and a height.
Because you are floating the elements you need to restore document flow by applying a clear fix to the parent element.
Here is an example...
https://jsfiddle.net/kennethcss/5jzqyhjh/
Also note, that you could remove the floats and just change the display property to inline-block and get the same result but either is valid.
Additional reading:
CSS Display Property
Clear Fix and Floats
Related
I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
I'm trying to set the left border of siginimage to 40px, but since the height of the signinimage is 25px, the border height is also being set as 25px.
.top-header {
float: left;
border-left: 2px solid #CCCCCC;
height: 30px;
margin-top: 0px;
}
#signinimage {
padding-top: 6px;
padding-left: 10px;
height: 25px;
width: 25px;
}
<img src="images/signinimage.png" class="top-header" id="signinimage">
Two approaches.
Either create a container and put the image inside it
In your question, you said you wanted to extend the border to the left
(but I mean that's just a matter of simple float:, but you can apply
this approach in general
img {
width: 100px;
height: 100px;
float: right;
}
#container {
border: 3px solid black;
width: 150px;
height: 100px;
}
<div id ="container">
<img src=https://i.imgur.com/QIsNrpM.png/>
</div>
The other alternative, if you insist on using only one element instead of two, you can set the image as a background-image of a differently sized div
#imganddiv {
border: 3px solid black;
width: 150px;
height: 100px;
background-image: url('https://i.imgur.com/QIsNrpM.png');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right center;
}
<div id="imganddiv"></div>
I personally prefer the first option as it's a bit more intuitive and generally considered a common practice on to how containers (elements inside elements) should be handled.
To get a border taller than the image, you can wrap the image in a container, and apply the border to that container.
.top-header{
float: left;
border-left: 2px solid #CCCCCC;
height: 40px;
margin-top: 0px;
/* Center the image vertically */
display: flex;
align-items: center;
}
#signinimage{
height: 25px;
width: 25px;
padding-left: 10px;
}
<div class="top-header">
<img src="http://placekitten.com/25/25" id="signinimage">
</div>
How do I get the logo centered inside the topbar who has a width of 100%? I feel like a complete idiot lol. margin: 0px auto aint working..
HTML
<div id="topbar-fullwidth">
<div class="tb menu" id="unfoldMenu"></div>
<div class="tb logo"></div>
</div>
CSS:
#topbar-fullwidth {
width: 100%;
height: 42px;
background: #000;
border-bottom: 2px solid #000;
position: relative;
overflow: hidden;
}
.tb.menu {
width: 44px;
height: 44px;
float: left;
background: url('../images/icons/unfold_menu#2x.png') no-repeat;
background-size: 22px;
background-position: 10px 13px;
}
.tb.logo {
width: 140px;
height: 44px;
float: left;
margin: 0px auto;
display: block;
background: url('../images/logo#2x.png') no-repeat;
background-size: 125px;
background-position: 10px;
}
Thanks lol.
You can't use margin:0 auto; on a floated element. So you need to remove float:left; on the logo.
FIDDLE
First of all you should not use float: with element that have margin:0 auto set.
Here is an example I hope it will help, changed background: with background-color to make changes visible. I have also removed float:left.
I want to contain the teal hover within the borders of my social media links. I’ve tried adjusting the padding and heights and widths via CSS properties but when hovering, it still overlaps over the right border.
This is what it looks like while not hovering:
This is what it looks like when hovering:
The image sizes are each 19px × 15px.
#box {
width: 200px;
height: 50px;
background-clip: padding-box;
position: relative;
margin: 0;
left: 1.4em;
background: rgba(0, 0, 0, 1);
float: right;
z-index: 200;
}
#boxlist li {
height: 50px;
width: 20px;
position: relative;
list-style-type: none;
display: inline-block;
bottom: 1em;
margin-left: -2.5em;
float: left;
}
.imgli:hover {
background: rgba(0, 255, 255, 1);
}
.imgli {
border-left: 1px solid rgba(153, 153, 153, 1);
padding-right: 4em;
}
.imgli:first-child {
left: -0.1em;
border: none;
}
.imgli:nth-child(2) {
left: 1em;
}
.imgli:nth-child(3) {
left: 2em;
}
<header>
<div id="box">
<ul id="boxlist">
<li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
<li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
<li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
</ul>
</div>
</header>
The overlapping is happening, I believe, because of the
margin-left:-2.5em combined with the fixed width of the container, you are still experiencing overlap, despite the fact that your elements are floating.
Without doing a detailed lookover of your layout, one solution is to apply a background color to your <li>s to prevent the overlap, see the update I made to your fiddle:
http://jsfiddle.net/VVj3R/1/
I just added the background line to .imgli's definition and it seems to work.
.imgli {
border-left: 1px solid rgba(153,153,153,1);
padding-right:4em;
background-color:black;
}
You may want to change black to something else, as long as its an opaque color.
PS the images didn't show up in your fiddle because you used relative path names.
Try making your code bit simpler.. like this:
<div id="box">
<ul>
<li><div class="button" id="btn1"></div></li>
<li><div class="button" id="btn2"></div></li>
<li><div class="button" id="btn3"></div></li>
</ul>
</div>
CSS:
#box ul {
margin: 20px;
padding: 0px;
}
#box li {
float: left;
display: block;
background: #ededed;
padding: 1px;
}
#box .button {
width: 50px;
height: 50px;
background-color: #000;
}
#box .button:hover {
background-color:rgba(0,255,255,1);
}
#btn1 {
background-image: url(someicon.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px 40px;
}
Here is fiddle:
http://jsfiddle.net/tb2Ug/
Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.