Is possible to create layout as below in css (without flex)? Columns always must have 100% height.
Their content doesn't fill them from top to bottom, so I have this problem:
jsfiddle
.holder {
display: table;
width: 100%;
}
.holder > div {
display: table-cell;
}
<div class="holder" >
<div class="col-left" >
<div class="first" >
<h3>title</h3>
<p>text text text</p>
</div>
<div class="image-bottom" >
<img src="path/to/image" alt="Image" />
</div>
</div>
<div class="col-middle" >
<div class="image-top" >
<img src="path/to/image" alt="Image" />
</div>
<div class="second" >
<h3>title</h3>
<p>text text text</p>
</div>
<div class="image-bottom" >
<img src="path/to/image" alt="Image" />
</div>
</div>
<div class="col-right" >
<div class="image-top" >
<img src="path/to/image" alt="Image" />
</div>
<div class="third" >
<h3>title</h3>
<p>text text text</p>
</div>
</div>
</div>
Freewall plugin helps you to manage that effect.
See the main page.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I need to make a responsive gallery with two rows and 5 thumbnails on each row. I think I did something wrong cause the first row works fine but then instead of a new row underneath, it goes down the right side.I can't even make the thumbnails smaller without it changing the entire look. Can you please help me make my gallery work? I will put an image of the way it looks now.
<!DOCTYPE html>
<html >
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box > img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.box:hover {
transform: scale(1.04);
}
.box .title {
background: #ddd;
padding: .5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</div>
</body>
</html>
Try this HTML code. You were missing a closing </div> after the 5th box.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box>img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.box:hover {
transform: scale(1.04);
}
.box .title {
background: #ddd;
padding: 0.5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
</html>
create a DIV with a CSS class of menu
The .menu DIV should contain 4 DIV elements having a class of item
Each .item DIV should have an IMAGE displaying a placeholder from https://placeholder.com/ and a PARAGRAPH with class of mdc-typography--headline6
I've tried this code and I've commented out the placeholders as im not being allowed to post pictures. gonna be so grateful
<div class="item">
<!--<img src="https://via.placeholder.com/150" />-->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!-- <img src="http://via.placeholder.com/150"/> --->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!--<img src="http://via.placeholder.com/150"/>--->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!--<img src="http://via.placeholder.com/150"/>--->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
</div>
Here you go. It's <p> not <p1>
<div class="menu">
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
</div>
i think you have problem in write paragraph. you must write paragraph like <p> and closed by </p>.When you write a header , you need write like that <h1> and close by </h1>.
<html>
<head>
</head>
<body>
<div class="item">
<img src="http://via.placeholder.com/150"/>
<p >mdc-typograpy--headline6</p>
</div>
<div class="item">
<img src="http://via.placeholder.com/150" >
<p>mdc-typograpy--headline6</p>
</div>
<div class="item">
<img src="http://via.placeholder.com/150"/>
<p >mdc-typograpy--headline6</p>
</div>
</body>
</html>
I have a Razor page that displays a collection of thumbnail images in a vertical stack:
#foreach (var photo in Model)
{
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="#photo.LargeSquareThumbnailUrl" alt="Many cups!" />
</div>
}
However, what I have been trying to do is stack the images horizontally on one row. And if it overflows (which it nearly always will do) then to display with a horizontal scroll bar.
I guess I would handle the overflow in CSS, but I am unable to work out how to stack the images in the first place. Can anyone help?
I would use a container with white-space:nowrap and put each pod as inline block:
.container {
white-space: nowrap;
overflow: auto;
max-width: 100%;
}
.wrapper {
display: inline-block;
white-space: normal;
}
<div class="container">
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
</div>
I'll try a diagram before I jump into explaining this little contrived one.
MY AWESOME WEBSITE BANNER GOES IN A DIV ALONG THIS AREA NICELY...........
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----]
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----]
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----]
So I have a dynamic ajax page, when you click on a link from "MENU-NOT-PAGE" area, it loads a page into the page area, which is everywhere you see images at the moment. As you can see, it ignores the menu, until it hits below, and starts filling out that area. I currently use the current CSS to serve up my images neatly in a "grid"
and the HTML for the curious
.grids {
float: left;
padding: 1px;
text-align: center;
}
#pagearea {
width: 100%;
position:relative;
z-index: 1;
padding: 0 10px;
}
#sidebar {z-index: 999; float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; position: relative;}
#sidebar a{ font-weight:bold; }
#sidebar h2 { margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000; font-size:18px;}
#main { float:left; background:url(images/menubackgroud.gif) no-repeat top right #fff; max-width: 100%;} /*set width:100% to stop sliding effect*/
#text { padding:5px; width: 1800px;}
<div id="pagearea">
<div id="sidebar">
<h2>Menu</h2>
<div class="item"><img src="images/menuimage1.jpg" alt=" " />
<span class="description">Click here to change page</span></div>
<div class="item"><img src="images/menuimage2.jpg" alt=" " />
<span class="description">Click here to move page</span> </div>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
<div id="text" >
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
</div>
Now what I WANT to happen, is for the images to continue to align nicely as it does in the example above. I can confirm that the images "fit", as I had it "fit" before using A LOT of nbsp's for styling, but now it's not working with this CSS. I'll show a diagram of what it's currently doing below. Please forgive me for not having a live example, I don't like fiddling with ports for apache.
MY AWESOME WEBSITE BANNER GOES IN A DIV ALONG THIS AREA NICELY...........
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] MENU-NOT-PAGE
[-----Image-----]
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----]
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----]
Anyone can think of a solution to this? Is there a way to "force a break" in between div elements somehow? This is what I tried to do, using [br>'s in between the problem divs, but nothing.
There are a couple of big issues with your html. You don't close <div id="text">, also you use id="text" more then one time (ids are only once a page). You can solve this with this html and css.
body {
background-color: #333333;
}
#pagearea {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);
grid-auto-flow: dense;
}
.text {
display: flex;
justify-content: center;
align-items: center;
height 100%;
width: 100%;
background-color: deepskyblue;
}
.text:nth-child(2n) {
background-color: coral;
}
.text:nth-child(3n) {
background-color: lightgreen;
}
#sidebar {
background-color: lime;
grid-column: 5;
grid-row: span 3;
}
<div id="pagearea">
<div id="sidebar">
<h2>Menu</h2>
<div class="item">
<img src="images/menuimage1.jpg" alt=" " />
<span class="description">Click here to change page</span>
</div>
<div class="item">
<img src="images/menuimage2.jpg" alt=" " />
<span class="description">Click here to move page</span>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
<div class="text">
<div class="grids">
<img src="/images/image.jpg" alt="">
<p>This is an image</p>
</div>
</div>
</div>
.grids {
float: left;
padding: 1px;
text-align: center;
}
#grids {
margin-bottom: 350px;
}
Refined answer even further (dropping the .grids2 class entirely). Wrap the first 12 images (sticking with the diagram example) in a div with id #grids, wrap all the ones after in a div named #grids2 (emphasis on this being their id, not class), and thenn apply the #grids css above, tweaking the margin as required (theoretically it should be the height of the image, but the number needs to be tweaked ever so slightly).
This was a "quick, dirty, effective" fix.
I've been looking around here and found several good answers but still didn't get around it. I want to achieve something like in this image.
5 small images with each of them has a number above. I tried this but as you can see the numbers were not in center (testing just the first row).
.grid-img {
display: inline-block;
}
<div class="grid-img">
<p>1</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
<img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
<img src="img3" alt="image3">
</div
Check this. text-align: center; will place the number in center. Insert <br/> after the 3rd div. Please see below the updated code.
.grid-img {
display: inline-block;
text-align: center;
}
<div class="grid-img">
<p>1</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
<img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
<img src="img3" alt="image3">
</div>
<br/>
<div class="grid-img">
<p>4</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>5</p>
<img src="img2" alt="image2">
</div>