I've had a ShareThis plugin installed on my blog for quite some time now but have only just noticed that not all my 'share icon's' are displaying inline.
I've tried using padding-bottom and margin-bottom but that didn't accomplish what I was hoping.
Would any of you be able to shed some light on what I'm doing wrong?
Code snippet:
<div style= "display: inline; float: left; padding-left: 4px; padding-bottom: 4px;">
<span st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' </span>
<span st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
</div>
Note, in the preview window, the icons remain inline. Very odd.
Replace this CSS class in your script.
.stButton {
position: relative;
z-index: 1;
text-decoration: none;
color: black;
display: inline-block;
cursor: pointer;
margin-right: 3px;
margin-left: 3px;
font-size: 11px;
line-height: 26px;
}
As you can see I have changed line-height to 26px and now it can fit correctly.
I ended up solving my problem using this method: Vertical alignment of ShareThis icons
It's worked although displays oddly in the preview panel.
My next problem is the alignment of the disqus comments. I've tried text-align: right and padding to no avail. I also seem to have lost the line that went across the whole column beforehand... See the image and code below.
<div style="padding-bottom:1px; display: inline-block;">
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_fblike' displayText='Facebook Like'></span>
<span style="vertical-align: top;" st_url='{Permalink}' st_title='{Title}' class='st_twitter'> </span>
<span style="vertical-align: top;"st_url='{Permalink}' st_title='{Title}' class='st_email'></span>
{block:IfDisqusShortname}<div style= "display: inline-block; vertical-align: top;">{lang:View comments}</div>{/block:IfDisqusShortname}
{/block:Date}
Link to image!
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
<div id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<br />
<div id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
In MS IE:
However, in Chrome or MS Edge:
the html looks like:
The layout in IE is what I expect/want.
However, when I change to the Japanese chars to other language chars (English, Chinese, Korean, etc.).
They all look right.
How can I format the Japanese chars correctly in this case
Why Japanese chars are so special in this case in different browsers provided that they are all UTF-8 encoded?
Why Japanese chars are so special in this case in different browsers
provided that they are all UTF-8 encoded?
They are special because they use different font and therefore are taller than Latin characters. You can see the same result if you use Latin text, but increase the font-size for that specific value span.
However the main problem is that your wrapper div elements are basically non-existent and not forcing child elements to be in rows and therefore each element is trying to be next to its sibling. If you removed the br element you would see that there is only one row.
A better solution is to use css to order your elements into rows and remove the br completely. Simple way to do that is to use flex on your wrapper elements. Also you should fix the height of rows to get a more consistent appearance (I added line-height to counter that).
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
.row {
display: flex;
line-height: 9pt;
margin-bottom: .3em;
}
<div class="row" id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<div class="row" id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
I have a custom html box within Joomla with the following
<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">
<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/email_envelope.png"> contact#email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>
This works fine. However, when the browser is resized down to a certain level one will come undone until you resize even further.
Similarly, at another dimension they'll also not align properly.
Does anyone know why this behaviour is occurring?
EDIT: As Antonio suggested, adding clear:both to p in the CSS partially resolved this issue. Now the issue occurs only on the first line (when it didn't before)
Add clear:both to your p css rules
example.
I think that adding a clear:right should solve your issue, but I can't be so sure as the images in your snippet do not load.
<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">
<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;"><img src="/images/email_envelope.png"> contact#email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;
"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>
You would better forget using inline styles for your markup, as it has SEO downsides. instead use an external stylesheet.
Also, your markup has some problems, so you'd better do it like this:
.details{
text-align: right;
background-color: #744C27;
}
.details span{
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: 1em;
white-space: nowrap;
}
.icons{
width: 32px;
height: 32px;
margin-right: 20px;
background-repeat: no-repeat;
}
.phone{ background-image: url( 'images/telephone_call_contact.png' ) }
.email{ background-image: url( 'images/email_envelope.png' ) }
.shop{ background-image: url( 'images/shop_open.png' ) }
<div class="details">
<div><span class="icons phone"></span><span>0000000000</span></div>
<div><span class="icons email"></span><span>contact#email.co.uk</span></div>
<div><span class="icons shop"></span><span>Open 7 Days 5:00pm-11:00pm</span></div>
</div>
This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 8 years ago.
I'm trying to generate a web page with a diagram that shows how a word is broken down into bit fields. The way I want it to appear is for each field to appear as a row of boxes (one bit per box), and for the fields to be separated by some space. There will be a label below each field. This is what I've tried:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
.left-bit { border-style: solid dotted solid solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.middle-bit { border-style: solid dotted solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.right-bit { border-style: solid solid solid none; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.single-bit { border-style: solid; border-width: thin;
padding-left: 0.05in; padding-right: 0.05in;
margin-left: 0; margin-right: 0;
letter-spacing: 0; word-spacing: 0 }
.bit-field-label { font-size: smaller; font-weight: bold }
</STYLE>
</HEAD>
<BODY>
<DIV style="text-align: center">
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="single-bit">a</SPAN>
</CODE><BR>
<SPAN style="display: inline-block" class="bit-field-label">field A</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field B</SPAN>
</DIV>
<SPAN style="padding-right: 0.1in"></SPAN>
<DIV style="text-align: center; vertical-align: top; display: inline-block">
<CODE>
<SPAN class="left-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">c</SPAN>
<SPAN class="middle-bit">j</SPAN>
<SPAN class="right-bit">c</SPAN>
</CODE><BR>
<SPAN class="bit-field-label">field C</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
Basically, I've tried using borders to set up a box for each bit; each bit field and the label below it are supposed to be in their own "box", with the row of bits and label centered within the box, then there's to be a gap of a fixed size between each box horizontally, and then the whole thing is centered.
The result is almost correct except that I can't get the bits in each field to run up against each other. Here's a screenshot. As you can see, I tried getting rid of the space between bits by setting the margins, letter-spacing, and word-spacing to 0, to no avail. I also tried putting each group into another DIV like this:
<DIV style="display: inline-block">
<SPAN class="left-bit">b</SPAN>
<SPAN class="middle-bit">b</SPAN>
<SPAN class="right-bit">b</SPAN>
</DIV>
which had no effect.
Any ideas on what controls this space between the boxes, and how to override whatever it does? (I'm open to other approaches, and I might have to try some kind of <TABLE>, but I'd appreciate an explanation of what's going on even if I have to change my approach.)
I'm using Chrome 37.0. I haven't tried this on other browsers (except an earlier version of IE which apparently doesn't recognize inline-block at all.)
you could have your HTML cleaner but the problem is the display:inline-block create gaps, so you need to remove unnecessary spaces between your HTML tags or reset font-size to 0.
check it here :
Fighting the Space Between Inline Block Elements
There is more solutions on the link above.
Plus you can use display:block; float:left instead.
combining elements like so will remove the space
<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>
it's a hassle I know but it works somehow. you want to put those styles in an external style sheet, not inline like I have them here.