Two images and two text lines lining up - html
I have two <img> and two <p> (basic caption text)
I want to format them in css to line up like this:
<img1> <img2>
<text1> <text2>
basically, two images with two captions under them.
I know this is fairly simple, but everything I have tried has not worked.
This is pretty basic stuff:
HTML
<div>
<img src="http://www.placekitten.com/100/100" />
<p>Text</p>
</div>
<div>
<img src="http://www.placekitten.com/100/100" />
<p>Text</p>
</div>
CSS
div {
float:left;
text-align:center;
margin:20px;
}
jsFiddle example
Essentially you wrap your image/text pairs in divs and float the divs left.
You can do it with this way basically:
HTML
<ul class="images">
<li>
<img src="/path/to/img1" /><br/>
<p>Your caption here</p>
</li>
<li>
<img src="/path/to/img2" /><br/>
<p>Your caption here</p>
</li>
</ul>
CSS
.images{
list-style-type:none;
}
.images li{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img-caption
{
float:left;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div class="img-caption">
<img src="image-name.gif" width="95" height="84" alt="" /><br>
CSS is fun!
</div>
<div class="img-caption">
<img src="image-name.gif" width="95" height="84" /><br>
CSS is fun!
</div>
</body>
</html>
Related
Put icon left of H1
I want to put an icon next to my heading. But it does not fit correctly..how can I make this fit? <div style="width:100%;"> <div style="float: left;width:7%;min-width:40px;"> <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /></div> <div style="float: left;width:93%;"> <h1>My heading</h1> </div> </div>
Use vertical-align:middle, so if you change the size of text or image, the position is automatically aligned.
.myHeading img {
margin-right:10px;
}
.myHeading h1, .myHeading img {
display:inline-block;
vertical-align:middle;
}
<div class="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
<div class="myHeading">
<img height="60px" src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
<div class="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1 style="font-size:70px;">My heading</h1>
</div>
I suppose you want to align the image in the middle to match the text. You could just float the img and edit its position for a pixel-perfect alignment.
Also you are using a lot of unnecessary wrappers, all of this can be simplified into the following:
#myHeading img {
float:left;
margin-right:10px;
position: relative;
top:2px;
}
<div id="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
It is also possible to do it with inline-blocks.
img, h1{
display: inline-block;
vertical-align: middle;
}
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" alt="">
<h1>My heading</h1>
HTML Marquee between 2 divs?
I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left. I also have an image that travels across the screen with the marquee tag. Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images. If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs. This is my code for the test site: <!DOCTYPE html> <head> <title>Example</title> </head> <body> <div style="float:left; width:350px"> <img src="Jaffa.png"> <img src="Jaffa.png"> <img src="Jaffa.png"> </div> <div style="float:right; width:350px" > <img src="Jaffa.png"> <img src="Jaffa.png"> <img src="Jaffa.png"> </div> <p style="text-align: center"> <marquee><img src="Hobnobs.jpg"></marquee> </p> Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.
you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/
Just give a style as float:left to paragraph tag Just like below <p style="text-align: center;float:left"> <marquee><img src="Hobnobs.jpg"></marquee> </p>
Try this: <!DOCTYPE html> <head> <title>Example</title> </head> <body> <div style="float:left; width:50px"> <img src="http://benjiworld.ueuo.com/Jaffa.png"> <img src="http://benjiworld.ueuo.com/Jaffa.png"> <img src="http://benjiworld.ueuo.com/Jaffa.png"> </div> <div style="float:right; width:50px" > <img src="http://benjiworld.ueuo.com/Jaffa.png"> <img src="http://benjiworld.ueuo.com/Jaffa.png"> <img src="http://benjiworld.ueuo.com/Jaffa.png"> </div> <p style="text-align: center; position: absolute; z-index: -1; width: 100%"> <marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee> </p>
cannot make my data in small centerd gray boxes
This is the beginning of my html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"></link> <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <h1>Delta Fresh Samples:</h1> <p>save date: 08:23:11 31-May-02015</p> <div class="jumbotron" id="distance_small"> <h3>distance small</h3>0_1 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span> <br> </div> <div class="jumbotron" id="distance_large"> <h3>distance large</h3>0_0 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/? and this is the result: I wanted to created boxes in the center of the page. I saw twitter bootstrap example (this example) but I cannot make class "jumbotron" center my data in medium size gray boxes. what am i missing? In Addition, if i would want to style this without twitter bootstrap how would you advise me to do this?
you can achieve that with some styling
like this:
html
<h1>Delta Fresh Samples:</h1>
<p>save date: 08:23:11 31-May-02015</p>
<div class="jumbotron" id="distance_small">
<h3>distance small</h3>0_1
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span>
<br>
</div>
<div class="jumbotron" id="distance_large">
<h3>distance large</h3>0_0
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?"></a>
</div>
css:
.jumbotron{
background:#ddd;
width:220px;
margin:0 auto;
}
.jumbotron img{
display:block;
margin:0 auto;
}
.jumbotron a,.jumbotron span{
display:inline-block;
margin-left:10px;
}
see this fiddle
.jumbotron{
position : relative;
margin: 0 auto;
}
and for being in one line use display: inline-block
Image alignment issue in html
I am creating a small page using html which has a header and a body. The header is within a tag with blue background. The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header. I don't want to use CSS to align the image. Click Run Code Snippet to view the current page layout <html> <body> <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3""> <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div> <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png"> </div> <div style="width:400px;height:400px;border:1px solid blue"> <p> Hey,<br> I am on vacation. I will respond after i come back</p> <i><p>Sent from gmail</p></i> </div> </body> </html>
I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row: <html> <body> <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"> <img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> <div style="font-size:20px;color:white; text-align:left; float:left"> <h3>Something</h3> </div> <img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png"> </div> <div style="width:400px;height:400px;border:1px solid blue"> <p> Hey, <br>I am on vacation. I will respond after i come back</p> <i><p>Sent from gmail</p></i> </div> </body> </html>
jsBin demo
Learn to use <style>. Makes life easier and more time to drink coffee with friends.
Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)
<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline
<style>
.float-left{ float:left;}
.float-right{float:right;}
#header{
width:400px;
height:60px;
border:1px solid blue;
background-color:#2196F3;
}
#header img{
height:50px;
}
#header h3{
font-size:20px;
color:white;
}
#content{
width:400px;
height:400px;
border:1px solid blue;
}
</style>
HTML
<div id="header">
<img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<h3 class="float-left">Something</h3>
<img class="float-right" src="http://www.sona-systems.com/img/android.png">
</div>
<div id="content">
<p>
Hey,<br>
I am on vacation. I will respond after i come back
</p>
<p><i>Sent from gmail</i></p>
</div>
Another solution would be to place your images right inside the H3 element
<h3><img> Some Text <img></h3>
but than you need to play with the H3's line-height and the image's vertical-align etc.
Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook. You can do this without using CSS on your images by simply moving the second image before the first one within the HTML. <html> <body> <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3""> <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png"> <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div> </div> <div style="width:400px;height:400px;border:1px solid blue"> <p> Hey,<br> I am on vacation. I will respond after i come back</p> <i><p>Sent from gmail</p></i> </div> </body> </html>
I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are. Instead of <div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div> <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png"> Do <img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height--> <div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div> You also have some a wrong double quote in this line
Position image + text together?
How would I go about placing my text at the center of an image, this is what it looks right now: http://gyazo.com/442aa9f927c1c1ee505435c2422f7322.png and this is how I want it to be: http://gyazo.com/bc3bb2d0472a1c963d4ac00081065461.png This is my current code: <p><img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> Some random text</p> I would really appreciate if someone could help me out with this.
try to insert the image inside a div and put the text on it like this:
<div class="img">
<p>your text</p>
</div>
css:
.img{
background: url('http://findicons.com/files/icons/941/web_design/32/page_text.png') no-repeat;
height:100%;
}
DEMO
After you can mode your text where you want
If you don't want to use the image like a background and you want only to put text at the center of your element try this:
<div class="container">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" />
<span>your text</span>
<br style="clear:both;" />
</div>
css
.container{
width:100%;
height:100px;
}
.container span{
line-height:30px;
float:left;
}
.container img{
float:left;
}
DEMO2
Demo:
http://jsfiddle.net/5ser6/1/
<div class="thingy">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" alt="" />
<p>Text</p>
<br style="clear:both;">
</div>
* {font-family:arial}
.thingy img {float:left;}
.thingy {height:32px;float:left;}
.thingy p {float:left;margin:0 0 0 10px;padding:0;line-height:32px;}
If your framework has a clearfix, you don't need the clear:both, just put a clearfix on the outer div.