Posted by: JohanS May 22 2020, 06:07 AM
Hi All,
I am trying to adjust the size between images (floating items), but unfortunatly the padding doesnt work. I would like to adjust these images:
Sorry for the bad drawing skills
1: i would like no space in between;
2: i would like no space in between;
3: is there a possibility to always make this size equal?
The code:
CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<html>
<head>
<title>Query Results (TST)</title>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Karla:ital@1&family=Nanum+Gothic:wght@700&family=Raleway:wght@300;400&display=swap" rel="stylesheet">
<style>
body{
text-align:center;
background-color: #EEEEEE;
font-family: 'Karla', sans-serif;
}
.container{
width:1040px;
min-height: 200px;
margin: 0px auto;
overflow: hidden;
background: white;
}
.container header{
width: 1040px;
text-align: center;
border-bottom: 1.4px solid #a9a9a9;
font-size: 30px;
color: #242424;
float: left;
}
div.item2{
width: 300px;
height: 230px;
margin: 22px;
float: left;
background-color: red;
display: inline-block;
font-size: 14px;
}
img{
border-radius: 3%;
}
a{
text-decoration:none;
color: inherit;
}
@media only screen and (max-width: 70em) {
.container{
width: 98%;
}
div.item2{
width: 95%;
}
}
</style>
</head>
<body>
<section class="container">
<br>
<br>
<header>
<p>2020 (11)</p>
</header>
</div>
<div class='item2'>
<a href='images_normal/456.jpg'><img src='images/456.jpg' width='300' height='169'></a><br>
<b>Ninespine stickleback</b><br>
<i>(Pungitius pungitius)</i><br>
</div>
<div class='item2'>
<a href='images_normal/472.jpg'><img src='images/472.jpg' width='300' height='169'></a><br>
<b>Roach</b><br>
<i>(Rutilus rutilus)</i><br>
</div>
<div class='item2'>
<a href='images_normal/596.jpg'><img src='images/596.jpg' width='300' height='169'></a><br>
<b>Spined loach</b><br>
<i>(Cobitis Taenia)</i><br>
</div></section>
</html>
THank you!
Johan
Posted by: pandy May 22 2020, 07:47 AM
I don't see any padding anywhere? Just as good. It's not padding you want. It's margin. You've added 22px margin all around and that's what you get.
CODE
div.item2{
width: 300px;
height: 230px;
margin: 22px;
...
I noticed a stray closing tags for DIV that should be removed.
Here.
CODE
<header>
<p>2020 (11)</p>
</header>
</div>
Also, You shouldn't use BR to create space. You should use margin.
The centering bit is harder. I can look at that later if no one else beats me to it.
Posted by: JohanS May 22 2020, 07:57 AM
Hi All,
Unfortunately i`m not able to edit my own post (?)
Anyway i solved the issue by removing all the margin settings, next thing is adding a new margin setting: margin-left: 3.5%; This worked for me!
I still have a similar issue:
1: How to adjust this space in between?
2: How to adjust this space in between? I used margin-top, but then all images are adjusted, i would like to adjust only the first row (so ppl can see the line).
The code:
CODE
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<html>
<head>
<title>Query Results (TST)</title>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Karla:ital@1&family=Nanum+Gothic:wght@700&family=Raleway:wght@300;400&display=swap" rel="stylesheet">
<style>
body{
text-align:center;
background-color: #EEEEEE;
font-family: 'Karla', sans-serif;
}
.container{
width:1040px;
min-height: 200px;
margin: 0px auto;
overflow: hidden;
background: white;
}
.container header{
width: 1040px;
text-align: center;
margin-top: -20px;
margin-bottom: 0px;
border-bottom: 1.4px solid #a9a9a9;
font-size: 30px;
color: #242424;
float: left;
}
div.item2{
width: 300px;
height: 230px;
margin-left: 3.5%;
background-color: white;
display: inline-block;
font-size: 14px;
float: left;
}
img{
border-radius: 3%;
}
a{
text-decoration:none;
color: inherit;
}
@media only screen and (max-width: 70em) {
.container{
width: 98%;
}
div.item2{
width: 95%;
}
}
</style>
<h1> Query results </h1>
</head>
<body>
<section class="container">
<header>
<p>2020 (11)</p>
</header>
<div class='item2'>
<a href='images_normal/57.jpg'><img src='images/57.jpg'</a><br>
<b>White-eye bream</b><br>
<i>(Ballerus sapa)</i><br>
</div>
<div class='item2'>
<a href='images_normal/63.jpg'><img src='images/63.jpg'</a><br>
<b>White bream</b><br>
<i>(Blicca bjoerkna)</i><br>
</div>
<div class='item2'>
<a href='images_normal/90.jpg'><img src='images/90.jpg'</a><br>
<b>Crucian carp</b><br>
<i>(Carassius carassius)</i><br>
</div>
<div class='item2'>
<a href='images_normal/91.jpg'><img src='images/91.jpg'</a><br>
<b>Prussian carp</b><br>
<i>(Carassius gibelio)</i><br>
</div>
<div class='item2'>
<a href='images_normal/197.jpg'><img src='images/197.jpg'</a><br>
<b>Three-spined stickleback</b><br>
<i>(Gasterosteus aculeatus)</i><br>
</div>
<div class='item2'>
<a href='images_normal/292.jpg'><img src='images/292.jpg'</a><br>
<b>Belica</b><br>
<i>(Leucaspius delineatus)</i><br>
</div></section>
</html>
Thanks!
Johan