i am currently having problem aligning facebook share button and tweet button with each other as i am weak in CSS.
here is my code:
<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div>
Tweet <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>
But they don't seem to align themselves with each other.
Your problems is linked to the structure.
One is a DIV and the other a A link.
You shall place both of then into a li list
See exemple bellow, just adapt the img uri & destination linked
.social-icon-fb {
background: url('../images/social-icon-fb.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
.social-icon-twitter {
background: url('../images/social-icon-twitter.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
<ul class="list-inline">
<li>
<a href="https://www.facebook.com/">
<span class="social-icon-fb"></span>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<span class="social-icon-twitter"></span>
</a>
</li>
</ul>
Adding the following CSS class to your page should work. If you're placing the two buttons side-by side in a containing div.
.fb_iframe_widget {
vertical-align: top;
}
Have you tried applying the style
display: inline-block;
If you apply the css to both class for the buttons then you should be able to get them to align..
please take a look at my jsfiddle for a css solution
https://jsfiddle.net/digitaliss/koo6o16n/
Related
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
I have 3 hyper links. I would like one to be aligned left, one aligned in the center, and the last aligned to the right; all on one line, symmetrically. I've centered headings using ALIGN="CENTER" etc. But after some research i found out that element (A) doesn't recognize that as a command necessarily. So, what is the proper method for getting these hyperlinks to align the way i need? This is literally my first day using HTML or any kind of programming language for that matter. Your help and patience is appreciated, Thank you.
There are many approaches to this depending on markup, but the most common approaches involve using floats or absolute positioning. Since you haven't provided any code to start with, I'll just give you a basic example.
HTML:
<div class="wrapper">
<a class="pull-left">Left Link</a>
<a>Center Link</a>
<a class="pull-right">Right Link</a>
</div>
CSS:
.wrapper { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }
JSFiddle: https://jsfiddle.net/x4hrgdaL/
There are a few ways to do that, a table would be one, but this way is quick way. Not responsive however.
JS Fiddle
.hyperlink {
display: inline-block;
}
.one {
text-align: left;
width: 30%;
}
.two {
text-align: center;
width: 30%;
}
.three {
text-align: right;
width: 30%;
}
<div class="hyperlinkContainer">
<a class="hyperlink one" href="#">Hyperlink 1</a>
<a class="hyperlink two" href="#">Hyperlink 2</a>
<a class="hyperlink three" href="#">Hyperlink 3</a>
</div>
According to my understanding:your code looks like the following:
<a align="left">link1</a> <a align ="center">link 2</a> <a align="right">link 3</a>
If u want the alignment of the links to be in a format which you have mentioned,include the content in tag.
Ex:
<div align="left"><a>link1</a></div>
Here is the url for the home page: http://www.auvsishow.org/auvsi2015/public/mainhall.aspx
Here is the current markup for the "Attendee" Button.
Thanks all.
The easiest way for doing this is putting div tag inside a tag.
<a href="Content.aspx?ID=1526">
<div id="home_travel_btn">
</div>
</a>
#home_travel_btn {
width: 437px;
height: 128px;
float: left;
background-image: url(http://www.auvsishow.org/auvsi2015/custom/images/interface/Travel_btn_sprite.png);
}
Check example:
http://jsfiddle.net/DariuszMusielak/4j4wyukz/
I have a HTML structure like this:
<div id="main_tabs">
<ul id="main_tabs_nav">
<li class="sn1"><a id="divleftlink0" rel="nofollow" href="javascript:divActivate(0,2,'divleft');" class="active">Newsletter</a>
</li>
<li class="sn2"><a id="divleftlink1" rel="nofollow" href="javascript:divActivate(1,2,'divleft');" class="inactive">Get Social</a>
</li>
<li class="sn3"><a id="divleftlink2" rel="nofollow" href="javascript:divActivate(2,2,'divleft');" class="inactive">Testimonials</a>
</li>
</ul>
</div>
And I apply a CSS like this, and it works fine:
#main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}
But this does not work:
#main_tabs #main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}
How do I get the second piece of CSS code to work too ?
I want to put #main_tabs in the start of the CSS too, to strictly follow the hierarchy ..
There is nothing wrong with your HTML and CSS. Both of these CSS styles work from a hierarchical standpoint. You can see that I added in another style to turn the first link red using the #main_tabs as the parent, and it is working fine here.
If you are looking to do text replacement, I would use this method instead:
li.sn1 a {
text-indent: 100%;
white-space: no-wrap;
overflow: hidden;
}
I have a small menu panel that needs to be included on my page that looks like the image below:
I have the code in a jsFiddle that I have created so far and I know some of the images are incorrect but the issue is I cannot get the header to align neatly to the right of the image as shown in the image.
Any clues?
Changed 2 properties:
ul.block-with-icons span {
display: block;
font-size: 11px;
line-height: 1.2em;
position: relative;
top: 12px;
}
h5 {
font-size: 16px;
position: absolute;
left: 98px;
top: 30px;
}
http://jsfiddle.net/wRkdL/25/
If you are developing in HTML5, I think the best option is to move <h5> inside <a> tag like this:
<li class="b1">
<a href="#">
<h5>Our background</h5>
<span>A little background info on who we are...</span>
</a>
</li>
In HTML4 it's not allowed to insert a block element inside anchors.