I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}
Related
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I want to create a grid of images that first has a large featured image, then to it's right, has a grid of 4 (2 on each row).. and then underneath that, rows of 4 images at a time.
Loosely based on this design.
I think flexbox would probably be able to nail this one.
Say I have some markup like this
<div class="image-grid">
<div>
<img src="https://unsplash.it/1024/1024">
</div>
<div>
<img src="https://unsplash.it/1000/800">
</div>
<div>
<img src="https://unsplash.it/1100/1000">
</div>
<div>
<img src="https://unsplash.it/1120/1000">
</div>
<div>
<img src="https://unsplash.it/1130/1024">
</div>
<div>
<img src="https://unsplash.it/1101/1024">
</div>
<div>
<img src="https://unsplash.it/1020/1024">
</div>
<div>
<img src="https://unsplash.it/1021/1024">
</div>
<div>
<img src="https://unsplash.it/1002/1024">
</div>
<div>
<img src="https://unsplash.it/1003/1024">
</div>
<div>
<img src="https://unsplash.it/1004/1024">
</div>
<div>
<img src="https://unsplash.it/1005/1024">
</div>
</div>
with CSS
.image-grid {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
.image-grid > div:first-child {
flex-basis: 50%;
}
.image-grid > div {
flex-basis: 25%;
}
this almost does what I need it to. Codepen here.
I need two things fixed though...
display 4 images to the right of the featured image, instead of the current 2.
stretch each image to fit it's space so it's a tight grid (no spacing around any image). I'm thinking of using the object-fit CSS property but I haven't got it working yet.
Thank you.
So I figured the easiest way would be to use a framework like Foundation to create the top row, and then use flexbox for the rest.
<div class="row">
<div class="medium-6 columns featured-image">
<img src="https://unsplash.it/1023/1024">
</div>
<div class="medium-6 columns featured-image-grid">
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1024/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1022/1024">
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1021/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1020/1024">
</div>
</div>
</div>
</div>
<div class="image-grid">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
<img src="https://unsplash.it/1020/1022">
<img src="https://unsplash.it/1020/1021">
<img src="https://unsplash.it/1020/1029">
<img src="https://unsplash.it/1020/1028">
<img src="https://unsplash.it/1020/1027">
<img src="https://unsplash.it/1020/1023">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
</div>
with the CSS
.row {
max-width: 100%;
margin: 0 !important;
}
.columns {
padding: 0;
}
.featured-image img {
height: 400px;
}
.featured-image-grid img {
height: 200px;
}
img {
object-fit: cover;
width: 100%;
}
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid > img {
flex-basis: 25%;
height: 200px;
width: auto;
}
Codepen here.
It needs some work to make it responsive, but it works for what I needed it to do.
.image-grid {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 200px;
height: 100px;
}
.image-grid, .featured > img:first-child {
width: 100px;
height:100px;
}
.image-grid > img {
width: 50px;
height:50px;
}
<div class="image-grid featured">
<img src="https://unsplash.it/1024/1024">
<img src="https://unsplash.it/1000/800">
<img src="https://unsplash.it/1100/1000">
<img src="https://unsplash.it/1120/1000">
<img src="https://unsplash.it/1130/1024">
</div>
<div class="image-grid">
<img src="https://unsplash.it/1101/1024">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1021/1024">
<img src="https://unsplash.it/1002/1024">
<img src="https://unsplash.it/1003/1024">
<img src="https://unsplash.it/1004/1024">
<img src="https://unsplash.it/1005/1024">
</div>
I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.
I am trying to make the Images in "fullwidthbanner" as fully responsive. May be the problem is that it has two images which I want it to transform with size.
This is my HTML
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std"><div class="sub-container"><div class="fullwidthbanner-container">
<div class="fullwidthbanner>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.sub-container {overflow:auto;}
.main-container {background:#fafafa; }
.main { margin:0 auto; position: relative; z-index:1; }
.sub-container div.item{ background-color:red; float:left;}
.sub-container div.item:hover{ background-color:green;}
.sub-container div.item img{ width:100% !important; display:block;}
For some reason, it does everything I want it to, but both the Images are fully extending in terms of width. The width always remain the same and when the window size increases, it just shows an empty space in front of both images.
Assuming this is the html:
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std">
<div class="sub-container">
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Does this css do what you want?
.sub-container div.item {
background-color: red;
float: left;
width: 100%;
}
Although I would suggest using max-width, instead of width -- this will make it adapt to smaller screens, and on larger screens it won't get blurry.
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}