I'm working on a blog page template in Shopify and having a real tough time trying to figure out why the Facebook share button won't line up vertically with the other share buttons? It appears the Facebook button is 5px lower than the others.
The Facebook share button code is:
<div style='margin-top: -5px;'
class="fb-share-button"
data-href="MY URL"
data-layout="button_count"
data-mobile-iframe="true"></div>
As you can see I have tried applying an inline style to line up the buttons, however it doesn't have any effect. I'm sure other people have come across this problem. Any ideas?
Cheers, DB.
Add vertical-align: top; to your div.
<div style='vertical-align: top;'
class="fb-share-button"
data-href="MY URL"
data-layout="button_count"
data-mobile-iframe="true"></div>
You can read more about vertical-align here.
Related
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I am a beginner with developing websites. I ran into this problem. I would be really glad if I am helped with the same.
I want to incorporate twitter feed in my webpage. I got the script from twitter.com for displaying feeds by creating a widget. When I display just the twitter feed inmy HTML page it works. But when I try to include inside my div tag, it doesn't show up.
The Following is the code snippet
<div class="span3 right tc-sidebar">
<div id="right" class="widget-area" role="complementary">
<a class="twitter-timeline" href="https://twitter.com/xxx" data-widget-id="xxx">Tweets by #_Harish_vK</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
U tried every possible thing I can. Please help me out . Since I have can only use the CSS which are already available for my organization(policy), is there a way to do it without modifying those CSS?
I fixed this by making a separate page for twitter feed and including it in an iframe under the divs.
Thank you guys!
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.