I'm trying to have it so that the images show up in the in my premade box that I created. Right now, they are too wide and showing up outside my width of 50em. Also, they are pretty big height wise, and I don't know if that is just a change of the picture or the code. I'm using flexbox for this.
Right now, without the images in there, it looks like they are all on one line from using the wrap, but once the images are in, then it stops working right.
main{
width:50em;
border-style:solid;
display:flex;
}
.images{
display: flex;
flex-direction: row;
flex: 1 1 25em;
flex-wrap: wrap;
flex-grow: 1;
}
<!DOCTYPE html>
<html>
<head>
<!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
<meta charset="UTF-8">
<!-- A link to reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<main class="wrapper">
<header id="images">
<img src="student-misc-02.jpg" alt="student1">
<img src="student-misc-06.jpg" alt="student1">
<img src="student-misc-08.jpg" alt="student1">
<img src="student-misc-12.jpg" alt="student1">
<img src="student-misc-19.jpg" alt="student1">
<img src="student-misc-20.jpg" alt="student1">
</header>
</main>
</body>
</html>
I've fixed the CSS code to match your HTML code. Also, in some of your edits, you showed as 3 columns, the last CSS rule try to reproduce those 3 columns layout.
main {
width: 50em;
border-style: solid;
display: flex;
}
/* fix the selector to match yout html code using id, not class */
#images {
display: flex;
flex-direction: row;
flex: 1 1 25rem;
flex-wrap: wrap;
flex-grow: 1;
}
/* If you need the three columns as your original question */
#images img {
width: 33%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
<meta charset="UTF-8">
<!-- A link to reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<main class="wrapper">
<header id="images">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
</header>
<section class="title">
<!--<h1>XD Rountable 2019 Event Calendar</h1>-->
</section>
<footer>
</footer>
</main>
</body>
</html>
Related
this is my code for my portfolio page and the links for my first row of images do not seem to be working
this screenshot shows which images links are not working
the CSS for this is here, so not too sure what i have done wrong
Check your folder structure first. Maybe that is the problem. Also, please write the code in your questions. It's easier for us to see the problem you are facing.
Added note
It's better in your case to make the parent element, div gallery, a grid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
margin: 20px;
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
text-align: center;
}
.gallery img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div class="gallery">
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
</div>
</body>
</html>
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 3 years ago.
so I am trying to create a simple image gallery using HTML and CSS, here's my code below
img{
float:left;
width: 30%;
margin: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="IMG_1.jpg">
<img src="IMG_2.jpg">
<img src="IMG_3.jpg">
<img src="IMG_4.jpg">
<img src="IMG_5.jpg">
<img src="IMG_6.jpg">
<img src="IMG_7.jpg">
<img src="IMG_8.jpg">
<img src="IMG_9.jpg">
</body>
</html>
and I should expect to get a 3*3 image grid, but here is what I got
there is HUGE whitespace at the left of the second row. when I inspect it, the blank doesn't belong to any of the images.
WHY!
Try this 100% it will work
.gallery{
display: flex;
flex-wrap: wrap;
}
img{
width: 30%;
margin: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
</div>
</body>
</html>
Try to use flex, rather than float.
Wrap that images inside div:
<div class="img-container">
<img src="IMG_1.jpg">
<img src="IMG_2.jpg">
...
</div>
And use this style:
.img-container {
display: flex;
flex-wrap: wrap;
}
img{
/*float:left;*/
width: 30%;
margin: 1.66%;
}
I will do set two images in inline, in the header of my website. But how I can do it?
https://imgur.com/0xnuqp5
I tried this... but (obviously) doesn't work.
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325">
Try this flexbox example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.image {
flex: 33.33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<style>
.img{float:left;}
</style>
or
<style>
.img{display:inline;}
</style>
And then apply the class:
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350" class="img"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325" class="img">
I am trying to build a website and I am making a collection of images that I want to be in a row with a margin of around 20 pixels (the images are in a div that is repeated for however many images there are). When I run the code the images appear in an weird configuration in that they seem to be layered. When I add 'img' to the div class the images then appear in a column which is not what I want. I have created a very simple website example with three repeated images that I want to be in a row. In previous websites I have been able to make the images appear in a row (the way I want it to be), but now this simply will not work. I will provide my code. Any help would be appreciated :).
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Updated correct CSS:
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 50px;
}
.image img {
width:100%;
height: 100%; *addition made by myself*
UPDATE
When I run the edited code and add 6 images the images do not resize. Is there a fix to this issue?
UPDATE Adding height: 100%; seems to have solved the issue. I will update the question to layout all steps in solving the problem.
Just add .image img {width:100%;}
so that the images will cover their entire parent div and won't be overlapped
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.image img {
width:100%;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Hello check if is ok ?
.image img{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Generate repeating hexagonal pattern with CSS3
I want to make a layout as in the image
But I am unable to do this in basic html.
Please help me with this. (As it's hexagon and it's images are not square bouded so I am facign problem)
You can download the unit hexagon from : Click here :
You can do it in a much simpler manner:
demo
You use a structure like:
<div class='box-wrapper'>
<div class='row'>
<div class='hexagon'><a href='#'></a></div>
<!--and so on, more hexagons-->
</div>
<!--and so on, more rows-->
</div>
And the CSS is simply:
.box-wrapper { margin: 5em 1em 1em; border: solid 1px silver; padding: 3.2em 0; }
.row { margin: -1.6em 0; text-align: center; }
.hexagon {
display: inline-block;
overflow: hidden;
width: 8em; height: 8em;
transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon a {
display: block;
height: 100%;
transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
background: gainsboro;
}
You can do it using HTML Map Tag very very easy and perfectly precise, if you use Dream Weaver then that will be piece of cake, so what you need is the actual picture of hexagons and start drawing them in DW or whatever other WYSIWYG editor you have, here is an example: Map Area Tag
Although it can be achieved with pure css/html too, by controlling the Margins of the divs.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.odd,
.even{
background:url('unite.png');
height:202px;
margin-bottom:-47px;
}
.odd{
margin-left:88px;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
<div class="even"></div>
</body>
If this is what you want I would be happy.. :)
Latest change for image but will give problem for links unless you use HTML Map Area
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.odd{
height:202px;
padding-left:88px;
}
.even{
height:202px;
margin-top:-47px;
}
</style>
</head>
<body>
<div class="odd">
<img src="unite.png" />
<img src="unite.png" />
<img src="unite.png" />
<img src="unite.png" />
</div>
<div class="even">
<img src="unite.png" />
<img src="unite.png" />
<img src="unite.png" />
<img src="unite.png" />
<img src="unite.png" />
</div>
</body>