Hello I'm completely new to HTML and I was trying to make a little project for myself so that I can learn a little bit more, but I wanted to ask something about how I can change the height of this text I'm trying to make it like Twitter and so that the tweets are separate from the others.
So that the "tweets" are separate like this
<!DOCTYPE html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</body>
</html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.chat {
margin: 100px 0;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
</div>
<div class="chat">
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</div>
</body>
</html> ```
create a div that contain image and text and
give some margin or you want the last message to take all the remaining space?
So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)
If anyone can help, i would appreciate.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
.home-1 {
height: 100vh;
width: 100%;
background-color: #DBDBDB;
display: flex;
position: absolute;
}
<!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="assets/css/main.css" type="text/css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="home-1">
<div class="menu">
<p>Menu</p>
</div>
<div class="top-links">
About Me
Works
</div>
<div class="right-buttons">
<li onclick="toggleLanguage('English')">En</li>
<li onclick="toggleLanguage('Portuguese')">Pt</li>
</div>
<div class="logo-holder">
<div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
</div>
<div class="bottom-links">
Instagram
Behance
</div>
<div class="email">
<p>alo#scarrard.co</p>
</div>
</div>
<div class="home-2">
</div>
<div class="home-3">
<div class="row">
<div class="column">
<h1>My name is <br>
Sabrina Carrard,<br>
I’m a graphic designer <br>
and passionate <br>
about creating <br>
things and animals. <br>
</h1>
<hr class="solid">
<p>Before we say goodbye, you can get in <br>
touch through my email in Portuguese, <br>
English and French (I’m learning that, <br>
so please, be kind). <br>
</p>
</div>
<div class="column-2">
<p>My formal education was in UTFPR,
where I graduated in graphic design
as well. I started to work still I was in
college, and worked with brands like
ONU, Abril, Red Balloon, Wise up,
Porcelanosa, Medianeira, SEBRAE,
Prata e Arte, Bel Pesce, Universidade
do Intercâmbio e Casa Paraíso
Ecológico. Today I like to consider
myself as a brand and editorial
designer, things I really enjoy
while I’m working on.
</p>
<p>I started to care about art when
I was in school. At the time, I was
obsessed with movies and used to
watch four or five movies a day (but
I was a fine student, I swear). After
that I fell in love with art in
my college days, especially art
history. Today I’m very interested
in the discussion between gender
and art. Female artists, what they
did and their stories, really caught me.
</p>
</div>
<div class="column-3">
<p>
Besides animals, other thing that
is really important to know is that
I’m fascinated by books and
literature. I truly believed that
literature opened my eyes to
important questions such as
human rights and feminism.
So when I’m reading something,
usually they are novels related
to these subjects because it
is something that I care about
</p>
</div>
</div>
</div>
<div class="home-4">
</div>
<div class="home-5">
</div>
<div class="home-6">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
</figure>
<figure class="gallery__item gallery__item--5 ">
<img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
</figure>
</div>
</div>
<div class="home-7">
</div>
<div class="home-8">
</div>
<div class="home-9">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
</figure>
</div>
</div>
<div class="home-10">
</div>
</div>
</body>
</html>
Problem
The following CSS ruleset is wrong:
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
There's no class="body" in the HTML.
The selector only targets .home-10. When you list more than one tag, class, etc., how each part is delimited is very important:
Selector
Target
Declaration
.A {space} .B
.B
Target each .B that is a descendant of an .A
.A , .B
.A OR .B
Target all .A and all .B
.A > .B
.B
Target each .B that is a direct descendant (child) of an .A
.A + .B
.B
Target each .B that is the very next sibling of an .A
.A ~ .B
.B
Target each .B that is a sibling that proceeds an .A
.A.B
.A AND .B
Target all tags that have class="A B"
So if your intention was to target each of those classes, you need to delimit them with a comma:
.home-1, .home-2, .home-3, .home-4, .home-5, .home-6, .home-7, .home-8, .home-9, .home-10 {
scroll-snap-align: start;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght#300&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font: 2ch/1.25 Oswald;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: auto;
}
body {
background: #DBDBDB;
}
h1,
h2,
h3,
h4,
legend,
.byline,
.title {
font-family: Montserrat;
}
.byline {
font-style: italic;
}
header,
section,
footer {
padding: 10px 12px;
background: #DBDBDB;
scroll-snap-align: start;
}
header {
margin: 0 0 20px 0;
border-bottom: 3px inset grey;
}
section {
min-height: 100vh;
}
footer {
margin: 20px 0 0 0;
border-top: 3px inset grey;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
menu {
display: flex;
justify-content: space-around;
width: max-content;
list-style: none;
margin-left: 0;
}
.left,
.right {
display: flex;
align-items: center;
}
li {
margin: 0 5px
}
p {
margin-bottom: 5px;
}
.logo {
max-width: 3rem;
}
.logo img {
display: block;
object-fit: contain;
max-width: 3rem;
}
h1 {
margin-bottom: 10px
}
h2 {
margin-bottom: 5px
}
article {
padding: 5px 8px 8px;
flex: 1;
}
article:first-of-type {
flex: 0.5;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin: 10px;
}
.title {
margin-bottom: 0;
}
.gallery {
scroll-snap-align: none;
}
.gallery figure {
align-self: center;
margin: 10px;
scroll-snap-align: center;
}
<!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 href="assets/css/main.css" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Sabrina Carrard</h1>
<nav>
<div class='left'>
<p class='title'>Menu</p>
<menu>
<li>About Me</li>
<li>Works</li>
</menu>
</div>
<div class='right'>
<menu>
<li><a href="#" class='en lang'>En</a></li>
<li><a href='#' class='pt lang'>Pt</a></li>
</menu>
<figure class="logo">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"></figure>
</div>
</nav>
</header>
<main>
<section class='page'>
<div class="row">
<article class='column'>
<h2>My name is <br>Sabrina Carrard, </h2>
<p class='byline'>I’m a graphic designer and passionate about creating things and animals.</p>
</article>
<article class="column">
<p>My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce,
Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.</p>
<p>I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art
history.
</p>
</article>
<article class="column">
<p>Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.</p>
<p>Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something,
usually they are novels related to these subjects because it is something that I care about.</p>
</article>
</div>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/people?w=320&h=180&random=1&txt=1&txtclr=fc0' alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=2&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=3&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=4&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/people?w=160&h=90&random=1&txt=5&txtclr=fc0" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/things?w=480&h=270&random=1&txt=6&txtclr=fc0' alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=480&h=270&random=1&txt=7&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=720&h=405&random=1&txt=8&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=320&h=160&random=1&txt=10&txtclr=fc0
" alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=11&txtclr=fc0
" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
</main>
<footer>
<p>Before we say goodbye, you can get in touch through my <a href='emailto:alo#scarrard.co'>email</a> in Portuguese, English, and French (I’m learning that, so please, be kind).</p>
<address>
Street<br/>
City, Province/State<br/>
Phone
</address>
</footer>
<script>
/*Always put script right before the </body> end tag*/
</script>
</body>
</html>
I know there are a lot of questions like this, and I have tried many of the methods suggested by those who have answered those questions, however, nothing works. I am beginning to think that my methods are not wrong, but that something else in my code is interfering? Such as my main div
If anyone could help me out I would really appreciate it. Currently, my images are just stacked on top of each other (vertically) on the left edge of the container...
This is the HTML:
<div class="main">
<!-- a bunch of <p> tags here I won't include -->
<div class="img123">
<img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/>
</div>
</div>
This is the CSS solution I was trying to use for my images and the .main div
.image123 {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
.main {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 930px;
display: absolute;
}
My favourite way is to set up 2 classes site-wide:
.row {
display: flex;
flex-direction: row;
}
.col {
flex-direction: column;
}
This way you can align stuff easily using these two classes. Row should always be the parent container. Here is how you would handle the html:
<div class="row">
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
</div>
If you want it evenly spaced use:
.col {
flex: 1;
}
Stackblitz example: https://stackblitz.com/edit/js-nddsvq
<!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">
<title>flexbox</title>
<style>
.main{
width:100%;
height:100%;
background-color:yellow;
display:flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="main">
<div class="image"> <!--1 image-->
<img src="https://images.pexels.com/photos/1864189/pexels-photo-1864189.jpeg" width="200" height="200">
</div>
<div class="image"> <!--2 image-->
<img src="https://images.pexels.com/photos/1878095/pexels-photo-1878095.jpeg" width="200" height="200">
</div>
<div class="image"><!--3 image-->
<img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" width="200" height="200" >
</div>
</div>
</body>
</html>
I am trying to create a grid sort of style of images and having a box underneath. Is there an easier way to achieve this look?
I am trying to replicate the layout shown in this image
At the moment this is where I am at with positioning:
Screenshot of what I have now
I want the far right image to be at the right margin, and also have a bit of spacing between the images.
My HTML so far:
<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="review1">
<img src="images/ramenzundo.jpg" alt="ramenzundo" width="300" height="300" />
<img src="images/charlierabbit.jpg" alt="charlie" width="300" height="300" />
<img src="images/ichiran.jpg" alt="ichiran" width="300" height="300" />
</div>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
<div class="reviews4">
<img src="images/downandout.jpg" alt="down" width="300" height="300" />
<img src="images/speedos.jpg" alt="speedo" width="300" height="300" />
<img src="images/tinygiant.jpg" alt="tiny" width="300" height="300" />
</div>
</section>
My CSS:
#trending {
float:left;
width:960px;
height:1000px;
background-color:#fdded9;
}
#trending h{
position:absolute;
font-size: 30px;
font-family: 'Economica', sans-serif;
color:white;
background-color: black;
}
.review1 {
padding-top:50px;
margin-right: 30px;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}
Something like this? just make sure you know what kind of structure you are looking for then build around that.
Here each row have a container <div class="rowContainer"> contain 3 images, for each image use <div class="review1">. For content below image use:
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
#trending {
margin-top: 100px;
}
.review1 {
border: 1px solid red;
text-align: center;
display: inline-block;
margin: 15px;
}
.rowContainer {
display: flex;
align-items: center;
justify-content: center;
}
<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="rowContainer">
<div class="review1">
<img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
<div class="rowContainer">
<div class="review1">
<img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" />
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
</section>
Try this full code:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style type="text/css">
body{
font-family: 'Economica', sans-serif;
}
.heading{
position:absolute;
font-size: 30px;
color:white;
background-color: black;
}
#trending {
margin: 0 auto;
width:960px;
height:1000px;
background-color:#fdded9;
clear: both;
}
.grid-container{
clear: both;
padding-top: 70px;
}
.grid {
border: 4px solid #444;
overflow: hidden;
float: left;
width: 250px;
margin: 15px 27px;
text-align: center;
}
.grid a{
overflow: hidden;
color: #000;
text-decoration: none;
}
.grid p{
margin: 0;
padding: 20px 0px;
background-color: #C3D7CC;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<section id="trending">
<h1 class="heading"> TRENDING REVIEWS </h1>
<div class="grid-container">
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="down" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="speedo" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="tiny" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
</div>
</section>
</body>
</html>
Given that you are new to HTML and CSS - know that this is still one of the hardest things to do well. The question isn't really about images either. Making a 'grid' layout of elements is what you are doing. An image is and element - just like a div - but in this case - your elements are inside a parent.
Ensuring your markup is as great as it can be, is the first step:
<ul class='thing-list'>
<li class='thing'>
<a class='link' href='#'>
<figure>
<img src='https://placehold.it/800x1000' alt='thing poster'>
</figure>
<h1 class='title'>Title</h1>
<div class='rating'>
xxx
</div>
</a>
</li>
</ul>
This would live in some parent element for layout management.
Grids are almost always a list of something being spit out by an array of data, so you should actually use a list - maybe even an 'ordered' one. <ol>
Once you have solid markup - you have many choices of how to get a grid going. Most of what you choose will depend on what browsers you have to support.
Use a site like this: https://caniuse.com/#search=grid to check for browser compatibility for any CSS stuff.
You can make the list items display: inline-block; and they will lineup and break to the next line.
You could use a table layout (put the info into a table element)
You can use floats to align then next to each other (make sure to clearfix their parent - or overflow: hidden; it in the short term)
You can use CSS grid (look that up)
Or you can use flexbox, which is what I suggest. The only downside to this, is that you'll likely want to use a preprocessor and autoprefixer to ensure you don't have to write the tricky browser prefixes by hand. (this is not really a downside - but might be scary if you haven't used one.) I suggest codekit for beginners - or use the autoprefixer built into codepen for practice.
I HIGHLY recommend you try ALL the ways I mentioned - so you can learn the quirks of each.
Example: https://jsfiddle.net/sheriffderek/0egLgmge/
This is a great guide to help you with the specifics: https://css-tricks.com/snippets/css/a-guide-to-flexbox
ul {
list-style: none;
margin: 0;
padding: 0;
}
figure {
margin: 0;
}
figure img { /* make img's in figures responsive to their parent */
display: block;
width: 100%;
height: auto;
}
.thing-list {
display: flex;
flex-direct: row;
flex-wrap: wrap;
justify-content: space-between;
}
.thing-list .thing {
flex-basis: 30%;
background: rgba(0,0,0,.1);
margin-bottom: 30px;
}
.thing-list .thing .link {
display: block; /* this has children that are block - so it HAS to be block */
}
.thing-list .thing figure {
/* */
}
.thing-list .thing .title {
margin: 0;
padding: 10px;
font-size: 16px;
background: lightgreen;
color: white;
}
.thing-list .thing .rating {
padding: 10px; /* you can use flexbox for these stars too */
}
For different screen sizes - you'll need to use #media queries to change the style rules based on screen size.
You're also going to need this: https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :
Image1 Image2 Image3
Image4 Image5 Image6
Image7 Image8 Image9
<html>
<head>
<title>Display Images</title>
</head>
<body>
{% for image in images %}
<div>
<img src={{ self.item_.images }}>
</div>
{% endfor %}
</body>
<html>
All the images there after aligns in the same order. First row with three images, then automatically break, then next row.
Please help.
Best Regards
Simply float every image left...then clear after every third image in order to force the next three to a new line.
You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.
Demo Fiddle
CSS
img{
float:left;
}
img:nth-child(3n+1){
clear:left;
}
Is this what you want?
DEMO
HTML
<div class='container'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>
CSS
.container{
display:block;
width:400px;
}
.container img{
float:left;
padding:1px;
}
Image1 (fll) Image2 (fll) Image3 (fll)
(clear)Image4 (fll) Image5 (fll) Image6 (fll)
(clear)Image7 (fll) Image8 (fll) Image9 (fll)
Where :
fll - float: left
clear - clear: both
Do you want your images to have a fixed size?
If not:
<html>
<head>
<style>
img {
width: 33%;
height: 100px;
float: left;
}
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>
If yes: (You might need to consider a fixed container width.)
<html>
<head>
<style>
.main-container {
width: 900px;
margin: 0 auto;
}
img {
width: 300px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="main-container">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</div>
</body>
</html>
Floating allows the images to fill a row. Fixed with of images and the container makes it possible to determine how many images there will be in the row.
If you want to follow responsive design, you could add break point to your page so that in smaller screen sizes your grid of images depends on available space.
Normally you will want to have fixed size for your images that is their actual size. Otherwise the displayed quality of the images might be bad.
You can find the idea here
Then I customize it for you.
<!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:500px;
}
div.img
{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>