So I have a table that I'm trying to make. Essentially, it will be two rows of three images each, with very short text below each one.
My structure looks like this:
<div class="mission-statement-1">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
<div class="mission-statement-2">
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
<div class="iconDiv">
<img src="img.jpg" />
<span>Some text</span>
</div>
</div>
I have the two main div elements with display: block with a width of 100%, so that they'd be one under the other. The inner divs are display: inline, so that they would be next to each other, and are given a width of 30%.
If I have just images alone, this works as intended. However, I'm trying to have the text centered underneath each image, and adding text will mess up the intended layout. If I use a block text element, such as a p, then I'll have six rows of one item each. If I stick with the span, then the text comes after the image (as it should given its inline property). I can't seem to make it work the way that I want it to.
Any help?
Try giving your inner divs display: inline-block;.
inline-block elements maintain the support of block styles, such as defined width and height, but can be rendered next to other objects like inline elements.
.mission-statement-1,
.mission-statement-2{
display:block;
}
.iconDiv{
display:inline-block;
text-align:center;
}
img{
background-color:green;
width:100%;
height:100%;
}
<div class="mission-statement-1">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text1</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text2</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text3</figcaption>
</figure>
</div>
<div class="mission-statement-2">
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text4</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
<figcaption>Some text5</figcaption>
</figure>
<figure class="iconDiv">
<img src="img_pulpit.jpg" alt="The Pulpit Rock" >
<figcaption>Some text6</figcaption>
</figure>
</div>
You can Html figure and figcaption tags.
Try using Flex with some CSS. It'll also work as a better way to have a responsive table that's mobile friendly. Also, use the tags Figure and FigCaption which will basically glue the text to the images.
.parent-wrapper {
height:100%;
width:100%;
}
.parent {
display: flex;
flex-wrap: nowrap;
margin:-10px 0 0 -10px;
}
.child {
display: inline-block;
margin:10px 0 0 10px;
flex-grow: 1;
height:150px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
<div class="parent">
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
<div class="child"><figure><img src="http://media.nbcwashington.com/designimages/ots_dark_wx_103.png" /><figcaption>Some text</figcaption>
</figure></div>
</div>
</div>
</body>
Here is an example about flex, and breaking point that can set to let content wrap if need. You can inspire yourself from it and dig into flex here
The snippet below uses figure and figcaption, HTML tags dedicated to this kind of content, and flex and flex-wrap for the CSS part.
min or max-width can be used to enhance your styling and set some basic breaking points unless you want also or only use media queries.
.imgcpt {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
figure {
flex: 1 1 30%;
margin: 5px;
border: solid;
min-width: 300px;
text-align: center;
}
figure img {
width: 100%;
max-width: 800px;
}
figcaption>* {
margin: 0.25em
}
<div class="imgcpt">
<figure>
<img src="http://lorempixel.com/200/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/201/100/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/202/102/" alt="i show ..." />
<figcaption>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/203/103/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/204/104/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/205/105/" alt="i show ..." />
<figcaption>
<h1>Single title</h1>
</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/206/106/" alt="i show ..." />
<figcaption>
<h1>title</h1>
<p>Or just simple text caption</p>
</figcaption>
</figure>
</div>
Run snippet in fullpage or play with it and edit it # http://codepen.io/gc-nomade/pen/dvoQyR
Not so much CSS has to be used when using flex.
Related
I am trying to create a responsive image gallery for my website using a flexbox. However, I am trying to make it wrap to the next line and stay in order, which I am having trouble with. For example:
Desktop
1,2,3
4,5,6 etc
Tablet
1,2
3,4 etc
Mobile
1
2 etc
Please see the example code I included.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33%;
max-width: 33%;
}
.column img {
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 2</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 3</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
The first thing I would do is nest it in a container. Flex works in order of the markup so I switched your order back to the correct numerical order. Then, what I would do is nest each of your figure's in their own div. I just used your column div to demonstrate. Then remove the media queries and let flex do its thing.
The main issue was you were trying to split them up in rows of 3 but had 2 nested per div, and were trying to set max-width to the div. To have a row of 3 they should be nested in their own div's with width: 33%;
EDIT ~ I made the min-width: 200px;because your image renders at about 160px. 200px would be a good breaking point on mobile devices. Check your dev tools for mobile.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
min-width: 200px;
width: 33.33%;
}
.container {
margin: auto;
width: 100%;
}
<div class="container">
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
</div>
Your HTML elements are set up incorrectly. To achieve what you want, you shouldn't put in the same element "first" and "fourth". While it looks good on desktop, you won't be able to put element "second" or "third" between them. You will only be able to change the position of those elements inside of the . Very basic HTML and CSS stuff.
I would advise you to rename class "column" to "cell" and put them in order:
<div class="row">
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
And of course in your CSS file change the .column to .cell
This way you will achieve your wanted responsive look on tablet and mobile.
While testing the desktop version of a template I am creating in Chrome I noticed when my figcaptions are all the same (example: Caption) or similar (example: Caption One... Caption Two) my images and caption line up fine. Once I make them unique the images start to change sizes and nothing lines up correctly. I'm not adding any sort of crazy captions, just simple one or two word descriptions like "Hello World" or "Example Caption". I have ran it through dev tools and looked at a few other posts on stack overflow about issues concerning figcaptions but noting seems to be working. All of my images are the same size. I'm sure it is something simple that I am just overlooking but I would appreciate a new set of eyes at this point. Thanks in advance for your time and assistance.
* {
margin: 0;
padding: 0;
}
.content-section {
display: grid;
grid-template-columns: auto auto auto;
}
figure img {
width: 100%;
height: auto;
}
<!--lines up correctly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
</section>
<!--lines up incorrectly-->
<section class="content-section">
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Some Words</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Hello World</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Something Else</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Caption Five</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/640x360" alt="">
<figcaption>Example</figcaption>
</figure>
</section>
and answering my own question...
.content-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Lines up perfect
This is a follow-up question from this post:
HTML / CSS How do I force images to horizontally display
The code below will display 6 figures. Each figure contains a single image with a caption. The figures are laid out 3 horizontally in 2 vertical groups. Now I want to add an additional image to each of my figures directly below (vertical) the first image. Rest of the layout should remain the same. How do I do that? (I added the extra example image in each figure, but it displays horizontally instead of vertically.)
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Simply put a <br> between the two images, i.e.
<img src="example.jpg"/><br>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
HTML
<div class="image1">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<img src="images/img2.png" width="250" height="444" alt="Screen 2"/>
<img src="../images/img3.png" width="250" height="444" alt="Screen 3"/>
</div>
If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline)
What I'm attempting to do is this (with some space between the images):
[image1] [image2] [image3]
[text] [text] [text]
I haven't given the images their own individual class names because the images don't align horizontally to one another.
Add a container div for the image and the caption:
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<img src=""/>
<span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
http://jsfiddle.net/ZhLk4/1/
Updated answer
Instead of using 'anonymous' div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
figure.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
}
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
<img src=""/>
<figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
http://jsfiddle.net/ZhLk4/379/
Best way is to wrap the Image and Paragraph text with a DIV and assign a class.
Example:
<div class="image1">
<div class="imgWrapper">
<img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
<p>It's my first Image</p>
</div>
...
...
...
...
</div>
Since the default for block elements is to order one on top of the other you should also be able to do this:
<div>
<img src="path/to/img">
<div>Text Under Image</div>
</div
img {
display: block;
}
I created a jsfiddle for you here: JSFiddle HTML & CSS Example
CSS
div.raspberry {
float: left;
margin: 2px;
}
div p {
text-align: center;
}
HTML (apply CSS above to get what you need)
<div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 2"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
<div class = "raspberry">
<img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
<p>Raspberry <br> For You!</p>
</div>
</div>
You can use the HTML5 Caption feature.
Easiest way excpecially if you don't know images widths is to put the caption in it's own div element an define it to be cleared:both !
...
<div class="pics">
<img class="marq" src="pic_1.jpg" />
<div class="caption">My image 1</div>
</div>
<div class="pics">
<img class="marq" src="pic_2.jpg" />
<div class="caption">My image 2</div>
</div>
...
and in style-block define
div.caption: {
float: left;
clear: both;
}
Instead of images i choose background option:
HTML:
<div class="class1">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class2">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="class3">
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
CSS:
.class1 {
background: url("Some.png") no-repeat top center;
text-align: center;
}
.class2 {
background: url("Some2.png") no-repeat top center;
text-align: center;
}
.class3 {
background: url("Some3.png") no-repeat top center;
text-align: center;
}
I am a newb. I have finally figured out how to get images aligned on my main page in my index.html along with code in my default.css.
Now I would like to add text under each image. I know this should be easy, but am not able to find anything that seems to work.
Here is my HTML Code:
<div id="random">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
Here is my CSS code:
#random{
max-width: 650px
}
#random img{
display:inline-block;
width:80px;
}
Wrap your images in a container, and put the text under them. Something like this:
http://jsfiddle.net/8xf2N/1/
<div id="random">
<div class='img-container'>
<img src="1.jpg" />
<p>Image One</p>
</div>
<div class='img-container'>
<img src="2.jpg" />
<p>Image Two</p>
</div>
<div class='img-container'>
<img src="3.jpg" />
<p> Image Three</p>
</div>
</div>
CSS:
#random{
max-width: 650px
}
#random img{
width:80px;
}
.img-container{
display: inline-block;
}
You can always use the HTML 5 figure tag. (Assuming your website is follwoing HTML 5 standards). That way, you can nest a tag and style them.
<div id="random>
<figure>
<img src="1.jpg"/>
<figcaption>Your Caption</figcaption>
</figure>
</div>
That way you have selectors to style them with CSS as well.
Try:
#random{
max-width: 650px
}
#random .image-wrap{
display:inline-block;
width:80px;
}
<div id="random">
<div class="image-wrap">
<img src="1.jpg" />
<p>Text for image 1</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
</div>
You should wrap the images in a div. Here is a fiddle http://jsfiddle.net/a6pNw/
CSS:
#random{
max-width: 650px
}
#random div{
display:inline-block;
width:80px;
text-align:center;
}
HTML:
<div id="random">
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>