I want to center the facebook like button vertically. how to do that?
heres my website:
http://feednews.id/
see the like button on the top right of the page?
why it gets aligned to the top? i already use
style="display: inline-block; vertical-align: middle;"
Please, please, please help me. as I already try to figuring it out for all day long. I'm now got headache :(
I prefer not to change any css file. can i still do that?
Heres the facebook button code that i use: fiddle
use margin property:
._2tga._3e2a {
border-radius: 4px;
font-size: 13px;
height: 28px;
padding: 0 4px 0 6px;
margin-top: 10px;
}
You should seperate your inline-styles using ; not "and"
Remove:
and vertical-align: middle;
and update it: vertical-align:middle
Do not use "and" in between styles.
Related
So I have a problem and hope you could help me out here for I am out of ideas:
I try to create a html/css-based bill of fare (I hope it's right... perhaps "menu" is better english? sry, german here), and it worked out fine so far, but there's one little flaw in my css I cant' figure out.
To make things clearer, I created a fiddle over here: [removed, the picture makes it clear :) ]
So in the fiddle you see the "days"-line, which css-class .day have just the same percentual width than my menu-cssclass.
Here's the corresponding css:
.a4 .days td div {
color: #ffffff;
font-size: 20px;
padding: 6px 0 4px;
text-align: center;
display: inline-block;
width: 14.28%;
border-right: 2px solid white;
box-sizing: border-box;
font-family: 'OpenSans_SemiBold';
}
...and
.a4 .menu-item {
width: 14.28%;
float: left;
vertical-align: top;
margin-bottom: 5px;
}
So I thought menus and day-fields would be aligned correctly. But sadly, as seen in the fiddle, the nearer my plan goes "to sunday", the less space is between the menu and the end of the day-rectangle.
I hope someone here could help me out, because after trying to change position: relative to absolute and some other Ideas I am out of Ideas now and clearly in need of help.
edit: here's a screenshot from the comments better describing my problem! actually, I want all fields to look like the "Monday" with the same margin between pictures and end of "monday"-headline (sry for my bad english):
On this line remove colspan="2"
<tr class="content">
<td class="hspace border-color">
<td class="border-color" colspan="2"> <--- here
And the reason is your table rows are of different width, the "days" row is 1174px and the "content" row is 1204px, so 14.28% of that width gives two different values
I'm not sure if i understand your problem correctly but i think this might help.
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/static/flat/css3-modsel-33.html
Use the last class to target the Sunday and give it a bigger margin? If that is what you want.
I hope this helps!
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
I am working on one website so i have given CSS div hover effect on shopping cart link in the top menu...
Once you will add one product in the cart than hover it in the top menu on shopping cart link that hover div is not working properly when i hover that its come and sudden disappear not getting the exact bug....
So pls try to find out the bug.....
I am talking about this bug once u will see attached image...
Here is the website link :- http://www.aurikjewels.com/index.php/
Thanks in Advance
hover is not working as expected and dis-appears as you move out of the header-items because of the below property,
.block-cart-header #header-items
{
padding:15px;
}
if you give padding-top:0px; and add margin-top: -10px this issue will not occur.
Add margin-top: -10px; to header-items div
By simply moving the cart like so, into the button-show :
<span class="button-show">Shopping Cart
- <div id="header-items">
All cart informations
</div><span class="price">Rs. 37,212.00</span>
</span>
And adding a height to your button-show :
.block-cart-header .button-show {
background: url(../images/shopping_bag.png) no-repeat right center;
color: #FFFFFF;
float: right;
font-size: 12px;
margin: 5px 14px 0 0;
padding-right: 20px;
position: relative;
height: 24px;
display: inline-block;
}
this works for me !
The problem was .button-show do not have enough height to hold the event-hover.
Once the cursor moves away to gap between .button-show and #header-items, the hover dies.
and #header-items fades.
To overcome this problem, you have to do few things like
Add padding-bottom: 10px; to the class="button-show" as inline style
The line will look like <span class="button-show" style="padding-bottom: 10px;">
Add background of .block-cart-header .button-show as url(../images/shopping_bag.png) no-repeat right 1px
Hi all i have sorted out the issue....
I have removed the
.block-cart-header .actions { display:none !important; }
And now its working fine...
Thanks for all for your great support... :-)
JS Fiddle
I am trying to get the text "Message" aligned to the top so it is right next to where the message box starts instead of it being at the bottom of the box, I have tried multiple methods and have tried using tables however the table does not give me the look that I am wanting. What would be the best way to make this work?
Codes I have tried:
vertical-align:text-top;
and
text-align: top;
None of the above samples work to give me the output I need.
Maybe
vertical-align: top;
That said, I know tables aren't fashionable, but it does look like tabular layout to me.
.contacttitle {
width: 100px;
font-size: 18px;
display:inline-block;
vertical-align: top;
text-align: top;
}
See the results here:
http://jsfiddle.net/EBGGg/
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better