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)
Related
I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like
The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: JSFiddle
<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;">
<span style="margin-bottom: 5%;">
<img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" />
<span style="display: inline-block;">
<b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b>
</span>
</span>
</a>
img{
width:30px;
height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
float:left;
}
#img,#text{
display:inline;
}
#main{
margin-top:20px;
width:250px;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
#container{
margin:15px;
}
div.clickable {
position:relative;
}
div.clickable #mainlink {
position:absolute;
width:100%;
height:100%;
}
<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
</a>
</div>
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 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
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.