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.
Related
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
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>
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
I have a circular thing going on for my website (amitnkalra.github.io)
My image seems to be to big for this? How do I make this smaller and still show the same part of the image that it's showing right now.
I have the following code :
.profile {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(img/Avatar.jpg) no-repeat;
width: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
height: 200px;
}
Also, my social media icons aren't displaying, they're clickable, but the icons don't show-up, why is that?
Here's the code for that:
.Twitter {
width: 25px;
height: 25px;
background: url(img/Twitter.png);
margin: auto;
display: inline-block;
}
Your divs are way smaller (25x25) than your background images, so you're only seeing fractions of them. In order to fit them you can use:
background-size: 100%;
on all the elements that have social images set as backgrounds.
Ideally, in order to optimize the website performance and safe some bandwidth, you'd shrink those images down to 25x25 pixels (unless you use the big versions elsewhere).
body {
text-align:center;
}
.profilePicture {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background-image: url(http://amitnkalra.github.io/img/anotherAvatar.jpg);
background-size: cover;
background-position: 45px top;
width: 200px;
height: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
}
.Twitter {
display: inline-block;
width: 50px;
height: 50px;
margin: auto;
}
.Twitter img {
height: 100%;
width: 100%;
}
<div class="profilePicture"></div>
<div class="Twitter"><img src="http://amitnkalra.github.io/img/Twitter.png" /></div>
The body css is not neccessary. I added it just to center the .Twitter
I used background-size: cover to ensure both width and height of the image fits the div and move the image to the left a bit by using background-position.
I'm having a layer problem where this layer content-3f display over all other layers below it:
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="line"><hr class="top" /></div>
Css:
#content-3f {
float: left;
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
clear:both;
}
#content-3-1f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Guided-tour-logo.png') no-repeat left top;
}
#content-3-1f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-2f
{
float: left;
width: 269px;
height: 202px;
margin:0px 20px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
#content-3-2f a
{
width: 269px;
height: 202px;
display:block;
}
#content-3-3f
{
float: left;
width: 269px;
height: 202px;
margin:0px 0px 0px 0px;
padding: 0px;
background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}
Screenshot:
As you see it goes over the <hr>
How to fix?
the problem is due to the "float:left" on your #content-3f. The float needs to be cleared for this to work. Here's your solution::
HTML
<div id="content-3f">
<div id="content-3-1f"></div>
<div id="content-3-2f"></div>
<div id="content-3-3f"></div>
</div>
<div class="clear"></div>
<div class="line"><hr class="top" /></div>
Notice the additional div with class "clear" This is used to clear the float in your elements.
Now the CSS
#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}
The rest of the css remains the same. Hope this helps.
Yes, I agree with gapple. I guess I didnt study your css properly. its the "height:103px" that's creating the problem. remove that and it works as it is.
But I would like to point out that its always a good idea to clear floats nonetheless.
Adding the following to your CSS should give you the answer you are looking for.
#content-3-1f,
#content-3-2f,
#content-3-3f {
position:relative;
z-index: 1;
}
Basically z-index tells things which "layer" to live on. The default layer is z-index: 0;
You also need to specify a relative or absolute position for it to take affect.
The more elegant solution is to use display:inline-block rather than float:left on your boxes.
http://www.vanseodesign.com/css/inline-blocks/