i got 3 images next to each other, wrapped in a div which can be resized using min-width and max-width.
the left and right image have a fixed width/height.
the center image should fill the available space depending on how wide the outer div is.
what i got so far:
<div id="orangeheader" style="min-width:750px;max-width:1140px;overflow:hidden;white-space:nowrap;">
<img src="images/header_left.gif" width="220" height="150" border="0" alt="" style="float:left"/>
<img src="images/header_middle.gif" height="150" alt="" style="width:100%" />
<img src="images/header_right.gif" width="275" height="150" alt="" style="float:right" />
</div>
maybe this should be solved with a table?
i say this is impossible.
but blow code Partly does:
<div style="min-width: 750px; max-width: 1140px; overflow: auto; width: 100%;" id="orangeheader">
<img width="220" height="150" border="0" style="float: left;" alt="" src="images/header_left.gif">
<img height="150" style="float: left; max-width: 645px; min-width: 255px; width: 30%;" alt="" src="images/header_middle.gif">
<img width="275" height="150" style="float:right" alt="" src="images/header_right.gif">
</div>
you can give percent % width to right and left so.
also you can use pattern for middle image. http://pattern8.com/
hope helps.
fwiw, i went with a table solution:
<table style="border-padding:0;border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:none;width:100%;overflow:hidden;white-space:nowrap;">
<tr>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:220px;"><img src="images/header_left.gif" style="width:220px;height:150px;border:0" alt=""></td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;"><img src="images/header_middle.gif" style="width:100%;height:150px" alt=""></td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:275px;"><img src="images/header_right.gif" style="width:275px;height:150px" alt=""></td>
</tr>
</table>
try this
<table style="border-padding:0;border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:none;width:100%;overflow:hidden;white-space:nowrap;">
<tr>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:220px;">
<a href="index.php">
<img src="images/header_left.gif" style="width:220px;height:150px;border:0" alt="">
</a>
</td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;">
<img src="images/header_middle.gif" style="width:100%;height:150px" alt="">
</td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:275px;">
<img src="images/header_right.gif" style="width:275px;height:150px" alt="">
</td>
</tr>
</table>
Related
This is my code, but the image is above the table, and I want them side-by-side:
<div style="float:left;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</div>
<div style="float:left;">
<table style="margin-left: 10%; float: top;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</div>
See current and desired output:
I think the issue is that you are using <div> rather than <span> tags. If you must use <div> you could either set the second one to float:right or add to their style - display: inline-block;.
Something like this:
<span style="float:left;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</span>
<span style="float:left;">
<table style="margin-left: 10%; float: left;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</span>
or this:
<div style="float:left;display:inline-block;">
<img src="http://localhost/test1/wp-content/uploads/2017/04/GautengNew-1.gif"; alt="" width="500" height="538" />
</div>
<div style="float:left;display:inline-block;">
<table style="margin-left: 10%; float: left;" border="1" width="440">
<tbody>
<!-- Table Rows Here -->
</tbody>
</table>
</div>
I would like to display two images next to each other inside a bootstrap table, any ideas?
Heres the code,
<tr>
<th scope="row">7</th>
<td></td>
<td>
<img class="img" src="example.jpg" alt="">
<img class="img" src="example.jpg" alt="">
</td>
</tr>
If you want to display images next to each others you can use divinstead of table, because it will be the best practice.
In Bootstrap, every row is divided into 12 columns. You can read this for your clarification about grid system of Bootstrap. You can use any combination to set your images.
6 + 6 = 12
4 + 4 + 4 = 12
3 + 3 + 3 + 3 = 12
-
-
etc
If we take 4 + 4 + 4 = 12 this combination for example. We will be able to set images in any two div. Code will be like this:
<div class="row">
<div class="col-md-4">
<img class="img" src="example.jpg" alt="">
</div>
<div class="col-md-4">
<img class="img" src="example.jpg" alt="">
</div>
<div class="col-md-4">
</div>
</div>
If you want to use table, then firstly read this article. Then code will be like the below:
<table>
<th scope="row">7</th>
<tr>
<td>
<img class="img" src="example.jpg" alt="">
</td>
<td>
<img class="img" src="example.jpg" alt="">
</td>
</tr>
</table>
Hi you can try this simple code for responsive bootstrap table, let me know
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td><img src="image1.jpg"></td>
<td><img src="image2.jpg"></td>
</tr>
</tbody>
</table>
</div>
You can add the css
img{
display:inline-block;
}
<table>
<th scope="row">7</th>
<tr>
<td>
<img class="img" src="example.jpg" alt="">
<img class="img" src="example.jpg" alt="">
</td>
</tr>
</table>
try this
Try this one out:
<tr>
<th scope="row">7</th>
<td></td>
<td>
<div class="d-flex flex-row flex-nowrap"> <!--div as flexbox with content in a row without wrap-->
<div class="img img-responsive"> <!--responsive img inside div-->
<img class="img img-fluid" src="example.jpg" alt="">
</div>
<div class="img img-responsive"> <!--responsive img inside div-->
<img class="img img-fluid" src="example.jpg" alt="">
</div>
</div>
</td>
</tr>
I have a table with cells that contain one image and one text link each, in that order. I have successfully vertically aligned the image with CSS:
.tdClass img {vertical-align:middle;}
But I can't seem to get the text link underneath it to align to the bottom of the cell. No matter what I've tried, it stays put right underneath the image. The ultimate goal here is to make the cells uniform horizontally as much as possible when my images are different heights.
<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
<td class="tdClass">
<a href="#">
<img src="#">
</a>
<div class="divClass">
TEXT
</div>
</td>
<td class="tdClass">
<a href="#">
<img src="#">
</a>
<div class="divClass">
TEXT
</div>
</td>
</tr>
</tbody>
</table>
Consider adding a uniform height to the links around the images, enough to fit the tallest image.
.img {
height: 50px;
display: table-cell;
vertical-align: middle;
}
<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
<td class="tdClass">
<a href="#" class="img">
<img src="http://placekitten.com/50/50">
</a>
<div class="divClass">
TEXT
</div>
</td>
<td class="tdClass">
<a href="#" class="img">
<img src="http://placekitten.com/30/30">
</a>
<div class="divClass">
TEXT
</div>
</td>
</tr>
</tbody>
</table>
add this :
td{
border: 1px solid red;
height: 350px;
}
td a:first-child,
td .divClass{
vertical-align: middle;
display: inline-block;
*display: inline; // ie7
*zoom: 1; //ie7
}
I am trying to create a vertical stack of image thumbnails. One thumbnail per line.
I am trying to upgrade my CSS skills. I have this working with a table using
<table>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
</table>
I'd like to not use a table and accomplish this using divs and CSS. This was I have better control over the spacing and layout in the future.
Any thoughts?
Very simple:
<div><img /></div>
<div><img /></div>
<div><img /></div>
A div is a block level element. Unless you specified other wise it acts similarly to a <tr> tag
Use a simple div and put some id's for every img. In CSS for the same you can modify the properties of the different id.
I would recommend you start by learning about DIVs and their properties. W3 Schools is a good start.
To get started with yours simply do:
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
DIVs by default are treated as block elements meaning they start on a new line automatically. So if you want them to appear inline then you will need to specify that by either using display: inline-block; or float:left;
Use divs/sections, define how many columns you want, lets say 4 columns...
http://jsfiddle.net/tBDjV/
<div class="col-1">
<img />
<img />
<img />
</div>
<div class="col-2">
<img />
<img />
<img />
</div>
<div class="col-3">
<img />
<img />
<img />
</div>
<div class="col-4 last">
<img />
<img />
<img />
</div>
.col-1, .col-2, .col-3, .col-4 {
float: left;
width: 22%;
margin-right: 4%;
box-sizing: border-box;
}
.last {
margin-right: 0;
}
I want to display the rows of a table on a single line. This is a problem in Internet Explorer 6 and 7 because setting the float attribute to left and the display to block won't do. And changing <tr>s to <td>s won't do either as these html elements are generated by a framework's code that i am not allowed to change.
Edit: Some of you wanted the code, i dunno why it would help but here it is (specific images and classes have been edited out, the code is not available online, some-class may not be the same class everywhere)
<table class="some-class" width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class">
<td class="some-class">
<img src=pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src=pic.jpg"/>
<p></p>
<p></p>
</div> <img src=pic.jpg"/>
</div>
</td>
</tr>
</table>
I'm afraid I don't think this can be done in a sane and valid manner. float: left in a table is absolutely taboo. Edit: This seems to be valid (!) and possible by taking away each element's table-* display property, but isn't well supported by IE.
The only workable solution I can think of is manipulating the table elements using JavaScript/jQuery, and making the needed conversions (trs into tds...).
The obvious downside of that is that it won't work with JavaScript turned off.
Have you thought about reformatting on the client using Javascript and/or a Javascript library like JQuery? It should be possible to manipulate the DOM to create an appropriate display structure possibly replacing the table elements with DIVs, for example.
Well, there is a css solution that is not without it's drawbacks, so I cannot say I whole-heartedly recommend it (and has not been thoroughly tested cross browser), but for purposes of "possibility" I offer it:
A slight modification of your html for illustration (added some classes to the tr tags):
<table class="some-class" border="0" cellspacing="0" cellpadding="0">
<tr class="some-class r1">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class r2">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
<tr class="some-class r3">
<td class="some-class">
<img src="pic.jpg"/>
<div class="some-class">
<div class="some-class">
<img src="pic.jpg"/>
<p></p>
<p></p>
</div>
<img src="pic.jpg"/>
</div>
</td>
</tr>
</table>
Some things to note before looking at the css:
I added display: block to some of the table elements for display purposes in FireFox, IE6-7 will ignore those. You may want to just target this solution to IE6-7 if you decide that it fits your purposes.
Some of this styling was illustration purposes.
This illustration uses a set and equal width to the td elements and is only valid for 3 rows. Numbers would have to change based on # of rows to display in line. Basically, my point is, this may not work for your situation, but it at least illustrative that given the right circumstances, it is possible to do what you requested with css only.
The css:
html, body {width: 100%; padding: 0; margin: 0;}
table {position: relative; table-layout: fixed; width: 33%; display: block;}
tr {position: absolute; width: 100%;}
td { border: 1px solid red; width: 100%; display: block;}
tr.r1 {left: 0;}
tr.r2 {left: 100%;}
tr.r3 {left: 200%;}
This would ideally have rows with set heights, as the table ends up with a height: 0 since the data within it is position: absolute, so setting a height to the table would be recommended if possible.