I have this code:
<div align="center"><img src="http://via.placeholder.com/350x44" width="100%" height="44">
<div align="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
<div align="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
</div>
</div>
</div>
Which looks like:
But in my achievement I like it to look like this image:
Please can any one give me simple css code for this?
First of all The align attribute is not supported in HTML5. Use CSS instead.
You can use position:absolute to right align your images. Just remember to set position:relative to your parent element.
Stack Snippet
.main {
position: relative;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.right img {
display: block;
border: 1px solid red;
}
<div class="main">
<img src="http://via.placeholder.com/350x44" width="100%" height="44">
<div class="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
</div>
</div>
Related
Im new to css and trying to get an image to overlay another image multiple times. So the orange dots overlay the images. In the same spot for multiple images.
code
So what you need is to play with css position property.
give to parent element position: relative and to the overlaying child position: absolute, then play with the exact position using left and top properties.
should be something like this:
.parent {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
left: 10px;
top: 10px;
}
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
I have an HTML, which is displaying a lot of PDF files. They are arranged in a table, and the table scales dynamically.
For a while this format was working:
.main .work {
display: table-row;
width: 100%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.main .work .media {
width: 100%;
}
.main .work .caption {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #ffffff;
opacity: 0;
}
.main .work a:hover .caption {
opacity: 1;
}
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="33%" height="100%">
<div class="work">
<a href="inner_004.html">
<embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report1</h1>
</div>
</div>
</a>
</div>
</td>
<td width="33%" height="100%">
<div class="work">
<a href="inner_005.html">
<embed src="http://www.googleguide.com/print/adv_op_ref.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report2</h1>
</div>
</div>
</a>
</div>
</td>
<td width="33%" height="100%">
<div class="work">
<a href="inner_006.html">
<embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report3</h1>
</div>
</div>
</a>
</div>
</td>
<td width="1%">
<div class="work">
<a href="MQBOVERALL.html">
<img src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/12200-67-3.jpg" class="media" alt="">
</a>
</div>
</td>
</tr>
</tbody>
</table>
The HTML was working fine for a while, the PDFs were scaling with the table. I even have that Scaler image at the end of the table as a 4th cell, which makes sure that the cells should have a ration of 1:1.
I think in one of the recent updates in chrome made this happen.Now it's completely broken, and the PDFs have a fixed height. Is there any way to fix this?
Thank you in advance!
Edit: The same goes when I try to insert an HTML instead of the PDF:
<td width="33%" height="100%">
<div class="work">
<a href="inner_010.html">
<iframe src="https://www.google.com/" width="200%" height="190%" style="-webkit-transform:scale(0.5);-webkit-transform-origin: top left;-moz-transform: scale(0.5, 0.5); -moz-transform-origin: top left;">
<p>Your browser does not support iframes.</p>
</iframe>
<div class="caption">
<div class="work_title">
<h1>Measurement and Analysis<br>Overview</h1>
</div>
</div>
</a>
</div>
</td>
Edit2:
So basically a while ago this code resulted PDFs and HTML previews dinamically scaling with the other elements of the table. As you can seee there's that scaler image, which scales well if I change my window size in the live version. However the PDF and HTML previews' height remains a constant 150 for some reason. I want them to scale with the image, however only their with is scaling, not their height.
how can I put text beside picture without disturbing the other content?
this is a header
html
<div>
<img src="logo.ico" width="300px" height="200px" alt="logo"/>
<h1 class="header">Movies19</h1>
</div>
you can add the two elements in the div to display:inline-block tag
.line>* {
display: inline-block;
}
h1 {
vertical-align: middle;
height: 200px;
margin: 0;
}
<div class="line">
<img src="http://placehold.it/300x200" width="300px" height="200px" alt="logo" />
<h1 class="header">Mo</h1>
</div>
Use this
<style type="text/css">
img {
display: inline-block;
}
</style>
look at this link it may help more:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_default_css
<div>
<table>
<tr>
<td>
<img src="logo.ico" width="300px" height="200px" alt="logo" />
</td>
<td>
<h1 class="header">Movies19</h1>
</td>
</tr>
</table>
</div>
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
My template :
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="">
<div class="align-bottom">
text
</div>
</td>
How do I vertical-middle align the image (the images have different sizes...) and vertical-bottom align the text(different sizes.)
The td height is dynamic.
I'm sorry but position:absolute doesn't work ...the images have different sizes.
What you can do is to have 2 rows in the table.
Row 1 with all the images and Row 2 with the text
for each image add
img {
margin:auto;
}
and for text, align:center.
I think that should do the job.
Use this structure : http://jsfiddle.net/vse8cq5y/
From your given HTML and request I'm assuming this is what you will need to get what you want.
The images should automatically do what you are asking, all you need to do is position absolute the text to the bottom of the td.
By adding padding bottom to the each td, you are allowing space for the text to go, meaning that it will never overlap with your image (regardless of image size).
img {
background-color: red;
display: block;
width:5em;
height:2em;
margin: 0 auto;
}
td {
width:10em;
padding-bottom: 1em;
position: relative;
vertical-align: middle; /*should be default*/
}
.container {
background-color: blue;
display:inline-block;
}
.align-bottom {
position: absolute;
bottom: 0;
left:0;
display: inline;
width: 100%;
text-align: center;
}
<table>
<tr>
<td class="image">
<img src="" style="height: 4em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 7em">
<div class="align-bottom">
text
</div>
</td>
<td class="image">
<img src="" style="height: 10em">
<div class="align-bottom">
text
</div>
</td>
</tr>
</table>