I am using the following code for text-align:
<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<span align="right" style="text-align: right;"><strong>TeamSpeak:</strong> ts.abendigo.org</span>
The first text Status: Updated should be on the left but the second part of the text TeamSpeak: ts.abendigo.org should be on the right side but using even both the deprecated align="right" with style="text-align: right;" seems to have no effect with span. They work fine with other tags like div but I want to keep both text on the same line.
<span> is an inline element. From the screenshot below you can see that its width is 188.859px and that's the size of the text in it.
You must wrap the inline elements in a block element. I'd suggest this:
.status {
float: left;
}
.teamspeak {
float: right;
}
<div class="status">
<strong>Status:</strong><span style="color: #01DF3A;">Updated</span>
</div>
<div class="teamspeak">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
NB: this answer explains how block level vs inline elements work.
The text-align property only works on block elements. <span> is inline. You should use a <div> or <p>.
<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<div style="text-align: right;">
<span><strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
NB: You can set span to be a block element, but unless your HTML is fixed (generated by some other application) and you cannot change it, don't do that. Better keep to what is standard and use div or p.
span { display: block; }
To get a working solution you should use float: right; on the span. I don't see why you would need to use a float:left; on the other text.
HTML
<div class="container"> <strong>Status:</strong>
<span class="left">Updated</span>
<span class="right">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
CSS
.left {
text-align:left;
color: #01DF3A
}
.right {
float:right;
}
You can use this
<div>
<strong>Status: </strong><span style="color: #01DF3A;">Updated</span>
<span style="float:right">TeamSpeak: ts.abendigo.org</span>
</div>
The easiest way is to use blocks or a table where is text-align property works on:
<strong>Status:</strong> <span style="color: #01DF3A;display:inline-block;width:45%">Updated</span><span align="right" style="text-align: right;display:inline-block;width:45%"><strong>TeamSpeak:</strong> ts.abendigo.org</span>
<table width="100%">
<tr>
<td><strong>Status:</strong> <span style="color: #01DF3A">Updated</span></td>
<td style="text-align:right"><span align="right" style="text-align:right"><strong>TeamSpeak:</strong> ts.abendigo.org</span></td>
</tr>
</table>
Try the fiddle:
JSFiddle
Try the below link
.status{
float:left
}
.team{
float:right;
}
Fiddle - Link
html:
<div class="status">
<strong>Status:</strong><span style="color: #01DF3A;"> Updated</span>
</div>
<div class="teamspeak">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
Css:
.status {
float: left;
}
.teamspeak {
float: right;
}
Demo
Related
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I want to show the text "You save ..." in a new line. I do not how to do. Please guide me. Please click for more details jsfiddle code
<div class="product-wrap first">
<div class="item">
<div class="product-image">Img area
</div>
<div class="product-content">
<div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>
</div>
<div class="price-box">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>
</div>
<div class="clr"></div>
</div>
</div>
</div>
Make use of <br/> tag here! It breaks the line
DEMO
UPDATE
Add below properties to your .product-wrap .item .price-box class css
DEMO
.product-wrap .item .price-box {
margin-top: 6px;
overflow: hidden;
width:auto; //Set this
float:left; //and keep it float left
}
span.div-discount {
/* display: block; */
clear: left;
display: block;
}
just add this to your css it will work
here is the demo please look out
DEMO
Add Css
.div-discount b, .div-discount em{display:block;}
Your paragraphs are set to float, which is fine, but you will need to clear and wrap it in a div and set that div to block so it extends the fill width.
Then you want to set the div-discount class to block too.
CSS:
.amounts {
display: block;
}
.div-discount {
color: #b50016;
display: block;
}
.clr-both {
clear: both;
}
HTML:
<div class="amounts">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p>
<div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>
See jsFiddle
The b element in HTML stands for bold. Add the rule in CSS defines is display as inline. It means the elements which possess inline or inline-block properties will be shown on same line. So If we want to show our custom text on a new line, we have to change its style from display inline to display as block.
.div-discount b{ display:block;}
How do I align the text as in the picture below?
<div id="contact-info">
<div id="contact-list">
<div id="adresa">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</div
<div id="telefon"></div>
<div id="mail"></div>
</div>
</div>
#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;
}
How can I solve this problem?
Fail to fix it as I want
www.avocat.dac-proiect.ro/wp
Generally, you should use div to nesting elements, in order to align them in a decent way. Also pay attention to the display:blockorinline. You could read more in W3C docs. My touch to this problem is as follow:
<div id="adresa">
<div id="addPadding" style="
padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="
float: right;
display: inline;
width: 80%;
">
<p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
<p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
</div>
</div>
</div>
I used 2<div>, one wrap the two <p> and the other one wrap the <img>and the new '' (or you can just simply add padding on the <div id="adresa">).
it will get a more similar layout result to your mockup, I wish I could took screen shot for you.
you just need to fix the text-align:left and margin on <p>tag to finish your job.
NOTE: This is NOT the whole solution. I just gave you an idea about what approach should be used.
This is so simple ... For this you need to make <p> and <img> position: absolute;. like below
.centered {
position: absolute;
right: 12px;
top: 110px;
}
and add class to ps and img like
<p class="centered">....</p>
<img class="centered" src="...." />
Try this using different top and right values for each p and `img.
Although the CSS purists would tell you not to, I would just add a table
<table>
<tr>
<td>
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;">
</td>
<td valign="top">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</td>
</tr>
</table>
I want to show text below image in these spans and spans do not jump to new line:
<span class="smileycode" id=":sm:">
<img src="images/smiley/sm.png">:sm:
</span>
<span class="smileycode" id=":sq:">
<img src="images/smiley/sq.png">:sq:
</span>
any suggestion?
DEMO
.smileycode{
display:inline-block;
}
.smileycode img{
display:block;
}
Add this to your class.
.smileycode
{
display:block;
}
This will convert you span into block level elements and shall make them jump to the next line.
Hope this is what you are looking for.
EDIT
If you want to make sure that the text appears like a caption just below the image, you can use display:table-caption; to achieve this.
Below is a working example.
DEMO
The CSS:
.smileycode{display:table-caption;}
Hope this helps.
You can try this code. As you can see I've made a table with no borders that shows the images as you want.
<table id="yourid" border="0">
<tr>
<td width="50%">
<span class="smileycode" id=":sm:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
</td>
<td width="50%"><span class="smileycode" id=":sq:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
</td>
</tr>
<tr>
<td width="50%">
:sm:
</td>
<td width="50%">:sq:
</td>
</tr>
Working example: fiddle
Just another way you could go about this problem... Taking advantage of :after and custom attributes.
HTML w/ custom attrs
<span class="smileycode" id=":sm:" data-text=":sm:">
<img src="http://placehold.it/50x50">
</span>
<span class="smileycode" id=":sq:" data-text=":sq:">
<img src="http://placehold.it/50x50">
<span class="smileycode" id=":sm:" data-text=":sm:">
<img src="http://placehold.it/50x50">
</span>
<span class="smileycode" id=":sq:" data-text=":sq:">
<img src="http://placehold.it/50x50">
<span class="smileycode" id=":sm:" data-text=":sm:">
<img src="http://placehold.it/50x50">
</span>
<span class="smileycode" id=":sq:" data-text=":sq:">
<img src="http://placehold.it/50x50">
</span>
CSS w/ pseudo-elements
.smileycode {
position: relative;
}
.smileycode:after {
position: absolute;
content: attr(data-text);
top: 1em;
left: 0;
z-index: 1;
}
DEMO
http://jsfiddle.net/hcDne/
<div class="smileycode" id=":sm:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sm:</div> <div class="smileycode" id=":sq:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sq:</div>
.smileycode{
width:30px;
text-align:center;
float:left;
}
I see some table based approach here. Since I am more of a table-less person I offer a left-stacking solution using float: left.
You will have to wrap your existing span with one more span that float it to the left.
<span class="pull-left"><span class="smileycode" id=":sm:">
<img src="http://placehold.it/50x50/dddddd/ffffff">:sm:
</span></span>
<span class="pull-left"><span class="smileycode" id=":sq:">
<img src="http://placehold.it/50x50/dddddd/ffffff">:sq:
</span></span>
CSS:
span.smileycode img {
display: block;
}
.pull-left {
float: left;
margin-right: 5px;
}
Working fiddle: http://jsfiddle.net/bND5Z/
This is not that difficult. Effective usage of <pre> / <br> and then display style will do the trick for you . See the code below :
HTML :
<body>
<span class="smileycode" style="display:inline-table" id=":sm:">
<img src="images/smiley/sm.png"><pre>:sm:</pre>
</span>
<span class="smileycode" style="display:inline-table" id=":sq:">
<img src="images/smiley/sq.png"><pre>:sq:</pre>
</span>
</body>
See the working solution here : http://jsbin.com/AHiYuPO/2/edit . Remember to run with js.
Based on an image you provided me, here is a complete solution.
Markup:
<div class="smileycode" id=":sm:">
<span>:sm:</span>
<img src="http://www.zeropages.com/smileys/sm_2828a.gif" />
</div>
<div class="smileycode" id=":sq:">
<span>:sq:</span>
<img src="http://www.zeropages.com/smileys/sm_2828a.gif" />
</div>
CSS:
.smileycode { clear:both; padding:5px; }
.smileycode span { float:left; padding:3px 0px 0 0; width:30px; }
.smileycode img { float:left; }
jsfiddle
.smileycode {
float: left;
margin-right: 10px;
}
.smileycode img {
display: block;
}
jsfiddle
As #Roko said but add a hack css for compatibility with old IEs :
.smileycode {
display:inline-block;
*display: inline;
}
Also I would add a
text-align:center;
line-height:1.2em;
to your span. But it's just design detail :) as other can have added in their examples !
Also you can clean all your of your HTML code (if you can)
How can i right-align text as below. I want product, price and year to be right-aligned.
product Computer
price $1500
year 2013
Currently the html code below gives layout as shown
product Computer
price $1500
year 2013
<div style="clear: both;display: block;">
<p style="float: left">
<strong>product</strong>
</p>
<p style="float: left">
<span>Computer</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>price</strong>
</p>
<p style="float: left">
<span>$1500</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>year</strong>
</p>
<p style="float: left">
<span>2013</span>
</p>
</div>
try display: inline-block, does wonders
Try aligning the left-floated words with text-align:right;.
Give the <p> tags some width and margin to your last child element inside the <div>. Then assign text-align: right to your first child element. It should look something like this jsFiddle example.
I would solve it using inline-block elements instead of floating ones. To stick a little to your markup you could do:
HTML
<div class="row">
<span>product</span>
<span>computer</span>
</div>
<div class="row">
<span>price</span>
<span>$1500</span>
</div>
CSS
div.row > span {
display: inline-block;
width: 100px;
text-align: right;
margin: 0 20px 0 0;
}
div.row > span:last-child {
width: 200px;
text-align: left;
}
Demo
Try before buy
As a note: You might think of using another element for your content:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
If your data is actually tabular, you can use a <table>-element instead. You can also go with some markup like I did, or you can even use a definition list <dl> or an unsorted list <ul>.
Edit
As requested in the comments. Here's a version using a table:
HTML
<table>
<tbody>
<tr>
<td>Product</td>
<td>Computer</td>
</tr>
<tr>
<td>Price</td>
<td>1500 USD</td>
</tr>
</tbody>
</table>
CSS
table {
width: 350px;
}
table > tbody > tr > td:first-child {
width: 100px;
padding: 0 50px 0 0;
text-align: right;
}
Demo
Try before buy