I cant put the pictures and text inline properly - html

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>

Related

How do I make table of images with text over each image in HTML/CSS?

I'm making a website, and I have to make a panel of images, with a text over each one of them. I made a <table>, but when I added up <p> to every image, they became one column instead of a table.
Making <p>'s position absolute doesn't help at all.
How can I link every <p> to the middle of the image while saving table position?

If you want to use table and not divs, then try something like this - this will center the text over each image in each table cell:
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<table >
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
<td class="container">
<img src="image.jpg" alt="" style="width:100%;">
<div class="centered">Centered</div>
</td>
</table>
</body>
</html>

How to place a clickable icon behind banner image?

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>

How to have these pictures side by side?

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; }

CSS/HTML Can't align 3 pictures on the same line

I have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used

div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/

See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}

Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>

I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>

Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>

you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>

div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>

vertical-align image + bottom text

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>