Insert 3 texts on the same line HTML code
cathy
-
nEm3sis Posted messages 722 Status Membre -
nEm3sis Posted messages 722 Status Membre -
Hello,
I managed to put 3 photos on the same line: left-aligned, centered, and right-aligned. Here is my HTML code
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Following the same principle, I want to do the same thing with text but I can't manage it. I've looked at quite a few tutorials but I haven't found an answer.
The idea is to put text under each photo. On the left, centered, and on the right.
Does anyone have the solution?
Thank you
Cathy
I managed to put 3 photos on the same line: left-aligned, centered, and right-aligned. Here is my HTML code
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Following the same principle, I want to do the same thing with text but I can't manage it. I've looked at quite a few tutorials but I haven't found an answer.
The idea is to put text under each photo. On the left, centered, and on the right.
Does anyone have the solution?
Thank you
Cathy
7 réponses
<style type="text/css"> .left-col { float: left; width: 100px; } .mid-col { float: left; width: 100px; } .right-col { width: 100px; } </style> <div class="left-col"> <img><br> blabla1 </div> <div class="mid-col"> <img><br> blabla2 </div> <div class="right-col"> <img><br> blabla3 </div> the width in the style is optional
If an answer is helpful, please give a +1
If you have solved your problem, let us know and mark your thread as resolved.
Thank you for your response.
Is that the only way? I've never made a table.
When I try the basic one, it sends me to the next line. So it's well to the left, center, and right but on 3 lines.
<h4 align="center">Title aligned to the center</h4>
<h4 align="left">Title aligned to the left</h4>
<h4 align="right">Title aligned to the right</h4>
If it's the only way, I'll go for it....
Is that the only way? I've never made a table.
When I try the basic one, it sends me to the next line. So it's well to the left, center, and right but on 3 lines.
<h4 align="center">Title aligned to the center</h4>
<h4 align="left">Title aligned to the left</h4>
<h4 align="right">Title aligned to the right</h4>
If it's the only way, I'll go for it....
<table style="width:100%" border="0">
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXT01
</td><td>
TEXT02
</td><td>
TEXT03
</td></tr></table>
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXT01
</td><td>
TEXT02
</td><td>
TEXT03
</td></tr></table>
Thank you Kisscool
it's working. However, even though <table style="width:100%" border="0"> my image on the left is not stuck to the right, I need to set it to 120 - 130%
is that normal?
it's working. However, even though <table style="width:100%" border="0"> my image on the left is not stuck to the right, I need to set it to 120 - 130%
is that normal?
Try playing with the style sheets to adjust the space between your images using (padding and margin) and see how it looks.
Hello everyone,
The other option is to use <style>display:inline;</style> for the images or to create a class for these photos:
Happiness is the only thing that can be given without having it.
The other option is to use <style>display:inline;</style> for the images or to create a class for these photos:
. photo { /* side-by-side photos */ display:inline; }then instead of <img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>do:
<img src="http://ebsd_logo_100x100.jpg" class="photo"/><br /> Caption 1 Caption 2 etc...
Happiness is the only thing that can be given without having it.
Also, the text is not quite centered under the image; is it possible to do that?
/!\ For additional information, it actually only works under IE and Opera. In Chrome and Firefox, the last image is next in line.
like this is better?
<style type="text/css"> .col { float: left; width: 33%; min-width: 160px; text-align: center } .clear { clear: both; } </style> <div class="col left"> <img src="..."><br> blabla1 </div> <div class="col mid"> <img src="..."><br> blabla2 </div> <div class="col right"> <img src="..."><br> blabla3 </div> <div class="clear"></div>for the issue with the last image it was an oversight on my part :/
the min-width is to be set to prevent the divs from overlapping actually (if the page is too small)
ps: the css classes left mid and right are not used for the moment but could be useful if you want to apply styles specifically to certain columns