I would like my image to come right after my <p> tag in the same line. I tried to wrap them inside a <div> block with display:inline-block set but to no avail.
<div style="float:left; display:inline-block; ">
<span style="float:left;width: 50%;">
<p style="float:left; display:block;" class="sentiment">Sentiment</p>
</span>
<span style="float:right;width: 50%;">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" style="width:20px;height:20px;">
</span>
</div>
http://jsfiddle.net/BMv5u/59/
Try adding inline-block to each of the sub elements:
<div>
<p style="display:inline-block;" class="sentiment">Sentiment</p>
<img style="width:20px;height:20px;display:inline-block" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png">
</div>
You can use align property on the img. check the fiddle here
<p >
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" ALIGN="right" alt="">
Sentiment
</p>
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
I want to align both image tag and p span tag next to each other. And I do not want to put them in two different div's to follow the grid system as then it doesn't give me the correct final output that I desire.
Here is my small piece of code that I want to correct: FIDDLE
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
FIDDLE
I want the <p> tag next to the image tag.
Two options
.row p {
display: inline-block;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
or
.row img {
float: left;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
Apply this css --
img, p {
display:inline-block;
}
This will make the img and p tag to be next to each other, as long as both element's width doesn't cross the container's width.
I am trying to transfer a table into a set of floating divs and I can't seem to get it. How can I make .div1 and .div2 behave like .td1 and .td2?
UPDATED (also replaced prior icon with image to show more clearly the issue.
Fiddle showing how it SHOULD work
table (before)
<table>
<img src="http://placehold.it/60x60">
</td>
<td class="td2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</td>
Fiddle showing how it doesn't work with divs
divs (after? Not working)
<div class="div_wrapper" style="display:inline-block">
<div class="div1" style="width: 62px; vertical-align: top; padding-top:5px">
<img src="http://placehold.it/60x60">
</div>
<div class="div2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</div>
In that case you can use float.
http://jsfiddle.net/n69aro2x/1/
Here is the code :-
<div class="div_wrapper" style="display:inline-block">
<div class="div1" style="width: 62px; vertical-align: top; padding-top:5px; float:left">
<img src="http://placehold.it/60x60">
</div>
<div class="div2" style="padding-left: 8px; float:left;">
<h4>
<strong>
Title
</strong>
</h4>
<span>
Here is come placeholder Text
</span>
</div>
</div>
</div>
You can use margin to align text :-
<div class="form-group" style="display:inline-block">
<div class="div1" style="width: 33px; vertical-align: top; padding-top:5px">
<i class="fa fa-cog" style="font-size: 36px"></i>
</div>
<div class="div2" style="padding-left: 8px">
<h4>
<strong style="margin-left:30px;">
Title
</strong>
</h4>
<br/>
<span style="margin-left:30px;">
Here is come placeholder Text
</span>
</div>
</div>
</div>
hi the below is given the using table and using div's both demo code
here is the demo code using table
Dmo code using table
<table>
<tr>
<td class="td1" width= "33" style="vertical-align: top; padding-top:5px">
<i class="fa fa-cog " style="font-size: 36px"></i>
</td>
<td class="td2" style="padding-left: 8px">
<h4>
<strong>
Title
</strong>
</h4>
<br/>
<span>
Here is come placeholder Text
</span>
</td>
</tr>
</table>
here is the demo code made using div's
Demo code made using div's
<div class="form-group" style="display:inline-block">
<div class="div1" style="width: 33px; vertical-align: top; padding-top:13px">
<i class="fa fa-cog" style="font-size: 36px"></i>
</div>
<div class="table_wrapper_div">
<div class="div2" style="padding-left: 53px;">
<h4><strong>Title</strong></h4><br/>
<span>Here is come placeholder Text</span>
</div>
</div>
i'm designing with div and span tag & i have created table by using these two tages. I want to set the position of the particular span inside the div . how to do this?
below is my design
<html>
<head></head>
<body>
<div style="margin-left:10px;margin-right:10px;">
<div style="height:30px;">
<span class="name">A.B. Enterprises</span>
<span>(42100001)</span>
<span>OS : Cr.</span>
<span style="float:right; left:0px; top:0px;position:relative;">
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span ><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
</span>
</div>
<div>
<span>Supriya Dye Chem</span>
<span>Turn Over : Cr.</span>
</div>
<div>
<span>Indrabhan Pandey</span>
<span>(Mumbai1</span><span>,Mumbai1)</span>
</div>
<div><hr /></div>
</div>
</body>
</html>
thanks
<div style="position:relative;">
<span style="position:absolute: top:0px; left:0px;"></span>
</div>
<div class="your_div">
<span style="float:left; left:0px; top:2px;"></span>
</div>
You can set the position playing with 'left' and 'top' values
For some kind of menu I would like a box of 300 pixels width, with the items in it aligned to the right. I came up with the following code which works just fine in IE and Chrome, but not in FF :
<div style="width:300px;" align="left">
<div align="right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
UPDATE : In FF, the images are on the right side of the screen, in stead of aligned right at 300px from the left.
UPDATE 2 : The solution appeared to be text-align...
OK, after a lot of trying out things, I found it myself : text-align does the trick
(although it's aligning images here)
<div style="width:300px; text-align:right;">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
Try that:
<div style="width: 300px;">
<div style="float: right;">
<img src='images/item1.png' />
</div>
</div>
Oh and also, don't use HTML align parameters, use style.
Try using this instead:
<div style="width=300px;">
<div style="float: right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
try this width : not width =
<div style="width:300px;">
<div style="float: right">
<img src="images/item1.png">
<br />
<img src="images/item2.png">
<br />
<img src="images/item3.png">
<br />
<img src="images/item4.png">
<br />
</div>
</div>
<div style="width:300px;">
<div style="float:right">
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
</div>
</div>