The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> padding between floating items
JohanS
post May 22 2020, 06:07 AM
Post #1





Group: Members
Posts: 5
Joined: 18-May 20
Member No.: 27,354



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:

IPB Image

Sorry for the bad drawing skills rolleyes.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 22 2020, 07:47 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



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. wink.gif

The centering bit is harder. I can look at that later if no one else beats me to it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JohanS
post May 22 2020, 07:57 AM
Post #3





Group: Members
Posts: 5
Joined: 18-May 20
Member No.: 27,354



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:

IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 05:47 PM