Question 184328 in CSS Question posted in
Some basic documentation can be found here.

Css – Element is not shifting up

1

2

I had put a text beside image. I want to shift that text up but not able to do it. Padding bottom is not working on it. Tried everything but still facing this issue.

Code:

section {
  margin-top: 0px;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}

section ul li {
  display: inline-block;
}

.left-section {
  float: left;
  width: 40%;
}

.right-section {
  float: right;
  width: 58%;
  margin-top: -70px;
  text-align: right;
  height: auto;
}

.pp {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 15px;
  margin-bottom: 11px;
}

figure {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  font-size: 12px;
  text-align: center;
  margin-right: 10px;
  background: #fff;
  line-height: 1.7em;
  border: 1px solid #ccc;
}

figure img {
  display: inline-block;
  width: 22px;
  height: auto;
  margin-bottom: -22px;
}

.sp1 {
  /* margin-left: 323px;*/
  padding-right: 100%;
}

.pp1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-right: 80%;
}
<section>
  <ul class="left-section">
    <li><img class="prog" src="images/programming.png" alt=""></li>
    <li class="pp">DGcom</li>
  </ul>

  <ul class="right-section">
    <li class="sp1">
      <figure>
        <img src="images/clk.png" alt="">
      </figure>
    </li>
    <li class="pp1">Opening Hour</li>
  </ul>
</section>

Pls Refer above code and let me know how to fixed it.

I’m creating section with logo and some details like opening hours, call us, etc. You can see the screenshot.

Tags:

4

Answers


  1. 0

    Personally I would advise changing your HTML. You are using two separate list items to create the icon-text element which doesn’t really make sense. Based on the design, the icon is merely a visual indicator of what the text is telling the user. As such they should be part of the same element i.e. a single <li> containing both the icon and the text. Your html should therefore look more like this:

    <ul class="right-section">
    <li class="sp1">
        <img class="prog" src="images/programming.png" alt="">
        <span class="pp1">Opening Hour</span>
    </li>
</ul>

    To get the icon and the text to line up as you wish, display: flex is the solution I – and many others – would suggest. The CSS to achieve this, based on the HTML I’ve provided above would be as follows:

    .prog {
    display: block;
}

.right-section {     
    list-style: none;
}

.sp1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

    Setting the image to display: block will make it easier and more predictable to work with. As an aside, personally I would advise setting all <img>s to display: block in your reset.

    Setting your <li> to display: flex will automatically put the icon and the text side by side. Setting align-items: center will then align the icon and the text as you want it to. I have used gap to create the space between the icon and the text but using margin would work too.

    Login or Signup to reply.
  2. 0

    You have to change HTML for your solution. Kindly check my answer.

    section {
        margin-top: 0px;
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
        height: auto;
    }

    section ul li {
        display: inline-block;
    }

    .left-section {
        float: left;
        width: 40%;
    }

    .right-section {
        float: right;
        height: auto;
        display: flex;
        align-items: center;
    }

    .pp {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 700;
        color: #3b6cff;
        font-size: 38px;
        padding: 15px;
        margin-bottom: 11px;
    }

    figure {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        font-size: 12px;
        text-align: center;
        margin-right: 10px;
        background: #fff;
        line-height: 1.7em;
        border: 1px solid #ccc;
    }

    figure img {
        display: inline-block;
        width: 22px;
        height: auto;
        margin-bottom: -22px;
    }

    .pp1 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       
    }

    .pp1 span {
        display: block;
    }

    / new /
    .ab {
        display: flex;
        align-items: center;
        width: inherit;
    }
        <section>
        <div class="ab">
        <ul class="left-section">
            <li><img class="prog" src="images/programming.png" alt=""></li>
            <li class="pp">DGcom</li>
        </ul>

        <ul class="right-section">
            <li class="sp1">
                <figure>
                    <img src="images/clk.png" alt="">
                </figure>
            </li>
            <li class="pp1"><span>Opening Hour</span><span><b>Mon-Fri, 8:00-9:00</b></span></li>
        </ul>
    </div>
    </section>
    Login or Signup to reply.
  3. 0

    You can use simply use grid to align items as like as you want

    look likes this:

    h4 {
  padding: 0;
  margin: 0;
}

section {
  margin-top: 0px;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}
section ul li {
  display: inline-block;
}
.left-section {
  width: 40%;
}
.right-section {
  width: fit-content;
  height: min-content;
}
.open {
  display: grid;
  flex-wrap: wrap;
}
.pp {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 15px;
  margin-bottom: 11px;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 12px;
  background: #fff;
  line-height: 1.7em;
  border: 1px solid #ccc;
  margin-right: 10px;
  grid-column: 1;
  grid-row: 1/3;
  display: flex;
  justify-content: center;
  align-items: center;
}
div img {
  width: 22px;
  height: auto;
}

.pp1 {
  color: #787878;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: fit-content;
  grid-column: 2;
}
.pp2 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: fit-content;
  grid-column: 2;
  font-weight: bolder;
}
    <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="style.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <ul class="left-section">
        <li><img class="prog" src="images/programming.png" alt="" /></li>
        <li class="pp">DGcom</li>
      </ul>

      <ul class="right-section">
        <li class="open">
          <div class="icon">
            <img src="images/clk.png" alt="" />
          </div>
          <h4 class="pp1">Opening Hour</h4>
          <h4 class="pp2">Mon-Fri,8:00-9:00</h4>
        </li>
      </ul>
    </section>
  </body>
</html>
    Login or Signup to reply.
  4. 0

    Based on the code you provided, it appears that the text you are trying to move up is the "DGcom" text beside the programming image. To move this text up, you can try adjusting the padding or margin values of the ".pp" class in your CSS code. Here’s an example:

    .pp {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 0 15px; /* adjust the padding values */
  margin: 0; /* reset the margin to 0 */
}

    In the example above, I removed the margin-bottom property and set the top and bottom padding to 0, while keeping the left and right padding at 15px. This should move the "DGcom" text up closer to the programming image.

    If this doesn’t work, you may need to adjust the margin or padding values of the "ul" and "li" elements surrounding the image and text. You can also try adjusting the "line-height" property of the "pp" class to reduce the space between lines of text.

    I hope this helps! Let me know if you have any further questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search