i have a silly doubt

what is that space above that line ?

47 Replies

indeeOP•2y ago

body {
  font-family: Arial, sans-serif;
  font-size: 19px;
  background-color: #FAF3F0;
  height: 100vh;
}

article {
  margin: auto;
  max-width: 65ch;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 5px 5px 0 #DBC4F0;
  margin-top: 20px;
  margin-bottom: 20px;
}

article>h1 {
  background-color: #DBC4F0;
}

.post-meta {
  color: #888;
  font-style: italic;
}


img{
    object-fit: contain;
    width: 50%; 
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
        margin-right: auto;
}

body {
  font-family: Arial, sans-serif;
  font-size: 19px;
  background-color: #FAF3F0;
  height: 100vh;
}

article {
  margin: auto;
  max-width: 65ch;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 5px 5px 0 #DBC4F0;
  margin-top: 20px;
  margin-bottom: 20px;
}

article>h1 {
  background-color: #DBC4F0;
}

.post-meta {
  color: #888;
  font-style: italic;
}


img{
    object-fit: contain;
    width: 50%; 
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
        margin-right: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
      <h1>Blog Post Title</h1>
      <p class="post-meta">Posted on July 16, 2023</p>
      <img src="./images/main.jpg" alt="Blog Post Image">
    <h3>Ingredients</h2>
    <ul>
      <li>Palak (Spinach) - 1 bunch (Leaves only)</li>
      <li>Onion - 3 medium, cut in cubes</li>
      <li>Tomato - 1, cut in cubes</li>
      <li>Green Chillies - 8 to 10</li>
      <li>Cloves (Lavang) - 4 to 5</li>
      <li>Cinnamon (Dalchini) - 1 inch piece</li>
      <li>Garlic - 4 to 5 pods (Optional)</li>
      <li>Ginger - 1 inch piece</li>
    </ul>
      <img src="./images/1.jpg" alt="hehe">
    <ul>
      <li>Kasoori Methi - 2 tsp</li>
      <li>Amchur Powder - 1 tsp</li>
      <li>Kitchen King Masala - 1 tsp</li>
      <li>Salt</li>
      <li>Sugar - 1/2 tsp</li>
      <li>Oil - 2 tsp</li>
      <li>Milk - Half a cup</li>
      <li>Paneer - 200g, cut into small cubes</li>
    </ul>
      <img src="./images/2.jpg" alt="hehe">
    <h3>Method</h2>
    <ol>
      <li>In a kadai, add 2 tsp oil.</li>
      <li>Add the cloves and cinnamon.</li>
      <li> 3. Add onions, tomato, green chillies, ginger and garlic. Fry for a few minutes till the onions soften and are glossy. Add a pinch of salt. switch off the stove and the let it cool down. <p>(The process continues from Step 7)</p></li>
    </ol>

      <img src="./images/3.jpg" alt="hehe">

</article>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
      <h1>Blog Post Title</h1>
      <p class="post-meta">Posted on July 16, 2023</p>
      <img src="./images/main.jpg" alt="Blog Post Image">
    <h3>Ingredients</h2>
    <ul>
      <li>Palak (Spinach) - 1 bunch (Leaves only)</li>
      <li>Onion - 3 medium, cut in cubes</li>
      <li>Tomato - 1, cut in cubes</li>
      <li>Green Chillies - 8 to 10</li>
      <li>Cloves (Lavang) - 4 to 5</li>
      <li>Cinnamon (Dalchini) - 1 inch piece</li>
      <li>Garlic - 4 to 5 pods (Optional)</li>
      <li>Ginger - 1 inch piece</li>
    </ul>
      <img src="./images/1.jpg" alt="hehe">
    <ul>
      <li>Kasoori Methi - 2 tsp</li>
      <li>Amchur Powder - 1 tsp</li>
      <li>Kitchen King Masala - 1 tsp</li>
      <li>Salt</li>
      <li>Sugar - 1/2 tsp</li>
      <li>Oil - 2 tsp</li>
      <li>Milk - Half a cup</li>
      <li>Paneer - 200g, cut into small cubes</li>
    </ul>
      <img src="./images/2.jpg" alt="hehe">
    <h3>Method</h2>
    <ol>
      <li>In a kadai, add 2 tsp oil.</li>
      <li>Add the cloves and cinnamon.</li>
      <li> 3. Add onions, tomato, green chillies, ginger and garlic. Fry for a few minutes till the onions soften and are glossy. Add a pinch of salt. switch off the stove and the let it cool down. <p>(The process continues from Step 7)</p></li>
    </ol>

      <img src="./images/3.jpg" alt="hehe">

</article>
</body>
</html>

\ html and css is here

Mannix•2y ago

margin-top from article

indeeOP•2y ago

but why is it doing for the whole body not just the article

Mannix•2y ago

something somethin collapsing margins

indeeOP•2y ago

help me pls i dint get that

13eck•2y ago

The body element has a default 8px margin. If you want to remove it set margin: 0; on your body selector

indeeOP•2y ago

still the body is also comming down

Mannix•2y ago

if you want to stick the article to the top remove the margin from body and margin-top from article

13eck•2y ago

Can you be more specific about what you’re talking about? Your initial question is pretty vague. What space above what line?

indeeOP•2y ago

when i use do that margin-top and open the devtools and hover on the body there is a small gap but the article should have that gap

Mannix•2y ago

because of collapsing margin that 8px margin you see on body is a part of the margin set on the article hope that makes sens

indeeOP•2y ago

oh ok

indeeOP•2y ago

how to do something like this ?

indeeOP•2y ago

i want to achieve this overlappin thing

Mannix•2y ago

position/translate/grid pick your flavor 🙂

Satya•2y ago

Grid didn't come to my mind. Kinda curious how to do that

indeeOP•2y ago

grid lets do grid

Senra•2y ago

How do we do it using grid? I understood the position and translate approaches

indeeOP•2y ago

@mannix_ got some audience ah ? noice

Senra•2y ago

Have you tried using relative positions and z-index?

indeeOP•2y ago

ya bro but even i would like to try with grid

Mannix•2y ago

https://tenor.com/view/the-simpsons-homer-simpson-good-bye-bye-hide-gif-4983317

Tenor

Senra•2y ago

😂 I suggest you go with translate then dude. It doesnt look that hard

indeeOP•2y ago

@mannix_ pls help me Grid

Mannix•2y ago

just because it's an option doesn't mean it's most viable

indeeOP•2y ago

i will try it my self and let you know guys

Å Marlon G•2y ago

https://youtu.be/EashgVqboWo

Layout Land

YouTube

Overlap on the Web, Graphic Design Made Easy with CSS Grid

CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explor...

indeeOP•2y ago

guys i think i got it

indeeOP•2y ago

its almost easy i mean this is what i wanted

indeeOP•2y ago

indeeOP•2y ago

i need one help i want that red card width to be 65ch so how much the whole gird width to be .card-grid{ display:grid; max-width: calc(20px + 65ch); height: 500px; grid-template-columns: 20px 1fr 1fr 20px; grid-template-rows: 20px 20px 1fr 1fr 20px; margin: auto; } .card1{ background-color: blue; grid-row: 3 / 4; grid-column: 1 / 3; z-index: 3; } .card2{ background-color: red; grid-column: 2 / 5; grid-row: 2 / 5; } .card3 { grid-column-end: -2; grid-row: 1 / 4; } .card3 > img { object-fit: cover; width: 100%; } this is my css i want this card2 widht to be 65ch

Senra•2y ago

set that using a max-width property on card2, or if that doesnt work, try that on the card-grid. See if that works

Mannix•2y ago

for all of you that wanted grid solution https://codepen.io/MannixMD/pen/VwVXVmv

Disco•2y ago

For the none of you that wanted negative margins https://codepen.io/adamantonio/pen/gOQeZMz

indeeOP•2y ago

bro this is noice i love it

Senra•2y ago

dude wth! This was so simple.... why did anyone not think of that?

indeeOP•2y ago

i did that i posted a pic see up you will get an ugly ass colors but overlapping pic

Mannix•2y ago

it may be easy with margins but not responsive 😉 so be careful with negative margins

Senra•2y ago

You can just use media queries to change margin to become positive for smaller screens?

indeeOP•2y ago

this one pro i mean bro

Mannix•2y ago

of course you can

Senra•2y ago

i need to practice. grids more. Just today I learnt so much can be done with grid 😌

indeeOP•2y ago

yea i myself never loved css more

Mannix•2y ago

Grid is love Grid is life 😄

indeeOP•2y ago

btw i am making a food blog design i want some good color scheme where can i do that ? and is the grid setup i asked for is any good or should try something else and suggest me some bro pls

13eck•2y ago

If you have additional questions please make a new post in the appropriate channel

indeeOP•2y ago

oh ok

Gaming

Programming

i have a silly doubt