admin管理员组

文章数量:1406727

I have this container with a background around it. However, it's not fitting properly like how it's supposed to. Instead, it's looking weird, like this:

How can I fix this, by making the the container be covered entirely with that white background, with the appropriate padding. Here's my code (Ignore everything except the container on the left with the about and services, that looks like the image) I added everything just for producing a minimal reproducible output, so we could pinpoint the error:

.profile-img-container {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3; /* Placeholder background */
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid black;
}

.profile-banner {
    width: 100%;
    height: 200px;
    background-color: #5FA159;
    position: relative;
}

/* Center the Consultant Header in the Middle */
.consultant-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px; /* Space between profile pic & info */
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: #E3D2C3;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    top: -130px;
}

/* Ensure Profile Picture Stays Centered */
.profile-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}

.profile-info h1 {
  font-size: 40px;
}

/* Consultant Name */
.consultant-name {
    font-size: 26px;
    font-weight: bold;
    color: black;
    text-align: left; /* Ensures it stays left-aligned */
}

/* Subtext (Age, Gender, Country, Phone) */
.profile-subtext {
    font-size: 17px;
    color: black;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons */
.profile-subtext i {
    color: #5FA159;
}

/* Grid layout for info boxes */
.consultant-info-grid {
    display: flex;
    justify-content: center;
    gap: 70px;
    max-width: 90%;
    margin: 0 auto;
}

/* Individual Info Box Styling */
.consultant-info-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
    top: -80px; /* Move Upward */
}

/* Icon Container (Circle at the Top) */
.info-icon {
    width: 50px;
    height: 50px;
    background-color: #5FA159; /* Match Banner Color */
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Title Styling */
.consultant-info-box h2 {
    font-size: 18px;
    color: #5A5A5A;
    margin: 30px 0 10px;
}

/* Paragraph Styling */
.consultant-info-box p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

/* Hover Effect */
.consultant-info-box:hover {
    transform: translateY(-5px);
}

/* Left Container Wrapping About & Services */
.left-info-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adds spacing between About & Services */
    background: #f3f3f3; /* Light Grey Background */
    padding: 20px;
    border-radius: 10px;
    width: 500px;
}

/* Right Side: 3x2 Grid Layout */
.right-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    gap: 60px; /* Space between grid items */
    width: 100%;
}
  <div class="consultant-profile-container">
    <div class="consultant-header">
        <!-- Profile Picture -->
        <div class="profile-img-container">
            <img src="<?php echo !empty($consultant['profile_pic']) ? htmlspecialchars($consultant['profile_pic']) : 'medconnect_images/blank_profile_pic.png'; ?>"
                 alt="Profile Picture" class="profile-img">
        </div>

        <!-- Profile Info (Placed to the Right) -->
        <div class="profile-info">
            <h1 class="consultant-name"><?php echo htmlspecialchars($consultant['name']); ?></h1>

            <!-- Age, Gender, Country -->
            <p class="profile-subtext">
                <i class="fas fa-user"></i> <?php echo !empty($consultant['age']) ? $consultant['age'] : "Not listed"; ?> •
                <i class="fas fa-venus-mars"></i> <?php echo !empty($consultant['gender']) ? htmlspecialchars($consultant['gender']) : "Not listed"; ?> •
                <i class="fas fa-globe"></i> <?php echo !empty($consultant['country']) ? htmlspecialchars($consultant['country']) : "Not listed"; ?>
            </p>

            <!-- Phone Number -->
            <p class="profile-subtext">
                <i class="fas fa-phone"></i> <?php echo !empty($consultant['phone']) ? htmlspecialchars($consultant['phone']) : "Not listed"; ?>
            </p>
        </div>
    </div>

    <div class="consultant-info-grid">
      <div class="left-info-container">
        <div class="consultant-info-box">
            <div class="info-icon">
                <i class="fas fa-user"></i> <!-- Change Icon as Needed -->
            </div>
            <h2>About</h2>
            <p><?php echo !empty($consultant['about']) ? nl2br(htmlspecialchars($consultant['about'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon">
                <i class="fas fa-stethoscope"></i>
            </div>
            <h2>Services</h2>
            <p><?php echo !empty($consultant['services']) ? htmlspecialchars($consultant['services']) : "Not listed"; ?></p>
        </div>
      </div>

      <!-- Right Side: Grid Layout for Additional Info -->
      <div class="right-info-grid">
        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-calendar"></i></div>
            <h2>Offline Availability</h2>
            <p><?php echo !empty($consultant['offline']) ? htmlspecialchars($consultant['offline']) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
            <h2>Location</h2>
            <p><strong>City:</strong> <?php echo !empty($consultant['city']) ? htmlspecialchars($consultant['city']) : "Not listed"; ?></p>
            <p><strong>Hospital:</strong> <?php echo !empty($consultant['hospital']) ? htmlspecialchars($consultant['hospital']) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-graduation-cap"></i></div>
            <h2>Education</h2>
            <p><?php echo !empty($consultant['education']) ? nl2br(htmlspecialchars($consultant['education'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-medal"></i></div>
            <h2>Awards & Recognitions</h2>
            <p><?php echo !empty($consultant['awards']) ? nl2br(htmlspecialchars($consultant['awards'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-briefcase"></i></div>
            <h2>Experience</h2>
            <p><?php echo !empty($consultant['experience']) ? nl2br(htmlspecialchars($consultant['experience'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-user-md"></i></div>
            <h2>Specializations</h2>
            <p><?php echo !empty($consultant['specializations']) ? htmlspecialchars($consultant['specializations']) : "Not listed"; ?></p>
        </div>
      </div>
    </div>

    <div class="consultation-section">
      <h1 class="consultation-title">Why book a consultation?</h1>

      <div class="consultation-grid">
          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-user-md"></i> <!-- Doctor icon -->
              </div>
              <h2>Expert Medical Guidance</h2>
              <p>Get professional advice from verified healthcare experts tailored to your health needs.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-clock"></i> <!-- Clock icon -->
              </div>
              <h2>Flexible Scheduling</h2>
              <p>Book consultations at your convenience with available time slots that fit your schedule.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-video"></i> <!-- Video Call icon -->
              </div>
              <h2>Online or In-Person</h2>
              <p>Choose between online video consultations or in-person visits with our specialists.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-shield-alt"></i> <!-- Shield/Security icon -->
              </div>
              <h2>Confidential & Secure</h2>
              <p>Your consultations are private, encrypted, and handled with the highest level of security.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-stethoscope"></i> <!-- Stethoscope icon -->
              </div>
              <h2>Comprehensive Care</h2>
              <p>Receive personalized recommendations, treatment plans, and follow-up care options.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-check-circle"></i> <!-- Check mark icon -->
              </div>
              <h2>Trusted by Many</h2>
              <p>Join thousands of satisfied patients who trust MedConnect for their healthcare needs.</p>
          </div>
      </div>

      <button class="consultation-btn">Request a Consultation</button>
    </div>


  </div>

I have this container with a background around it. However, it's not fitting properly like how it's supposed to. Instead, it's looking weird, like this:

How can I fix this, by making the the container be covered entirely with that white background, with the appropriate padding. Here's my code (Ignore everything except the container on the left with the about and services, that looks like the image) I added everything just for producing a minimal reproducible output, so we could pinpoint the error:

.profile-img-container {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3; /* Placeholder background */
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid black;
}

.profile-banner {
    width: 100%;
    height: 200px;
    background-color: #5FA159;
    position: relative;
}

/* Center the Consultant Header in the Middle */
.consultant-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px; /* Space between profile pic & info */
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: #E3D2C3;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    top: -130px;
}

/* Ensure Profile Picture Stays Centered */
.profile-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}

.profile-info h1 {
  font-size: 40px;
}

/* Consultant Name */
.consultant-name {
    font-size: 26px;
    font-weight: bold;
    color: black;
    text-align: left; /* Ensures it stays left-aligned */
}

/* Subtext (Age, Gender, Country, Phone) */
.profile-subtext {
    font-size: 17px;
    color: black;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons */
.profile-subtext i {
    color: #5FA159;
}

/* Grid layout for info boxes */
.consultant-info-grid {
    display: flex;
    justify-content: center;
    gap: 70px;
    max-width: 90%;
    margin: 0 auto;
}

/* Individual Info Box Styling */
.consultant-info-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
    top: -80px; /* Move Upward */
}

/* Icon Container (Circle at the Top) */
.info-icon {
    width: 50px;
    height: 50px;
    background-color: #5FA159; /* Match Banner Color */
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Title Styling */
.consultant-info-box h2 {
    font-size: 18px;
    color: #5A5A5A;
    margin: 30px 0 10px;
}

/* Paragraph Styling */
.consultant-info-box p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

/* Hover Effect */
.consultant-info-box:hover {
    transform: translateY(-5px);
}

/* Left Container Wrapping About & Services */
.left-info-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adds spacing between About & Services */
    background: #f3f3f3; /* Light Grey Background */
    padding: 20px;
    border-radius: 10px;
    width: 500px;
}

/* Right Side: 3x2 Grid Layout */
.right-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    gap: 60px; /* Space between grid items */
    width: 100%;
}
  <div class="consultant-profile-container">
    <div class="consultant-header">
        <!-- Profile Picture -->
        <div class="profile-img-container">
            <img src="<?php echo !empty($consultant['profile_pic']) ? htmlspecialchars($consultant['profile_pic']) : 'medconnect_images/blank_profile_pic.png'; ?>"
                 alt="Profile Picture" class="profile-img">
        </div>

        <!-- Profile Info (Placed to the Right) -->
        <div class="profile-info">
            <h1 class="consultant-name"><?php echo htmlspecialchars($consultant['name']); ?></h1>

            <!-- Age, Gender, Country -->
            <p class="profile-subtext">
                <i class="fas fa-user"></i> <?php echo !empty($consultant['age']) ? $consultant['age'] : "Not listed"; ?> •
                <i class="fas fa-venus-mars"></i> <?php echo !empty($consultant['gender']) ? htmlspecialchars($consultant['gender']) : "Not listed"; ?> •
                <i class="fas fa-globe"></i> <?php echo !empty($consultant['country']) ? htmlspecialchars($consultant['country']) : "Not listed"; ?>
            </p>

            <!-- Phone Number -->
            <p class="profile-subtext">
                <i class="fas fa-phone"></i> <?php echo !empty($consultant['phone']) ? htmlspecialchars($consultant['phone']) : "Not listed"; ?>
            </p>
        </div>
    </div>

    <div class="consultant-info-grid">
      <div class="left-info-container">
        <div class="consultant-info-box">
            <div class="info-icon">
                <i class="fas fa-user"></i> <!-- Change Icon as Needed -->
            </div>
            <h2>About</h2>
            <p><?php echo !empty($consultant['about']) ? nl2br(htmlspecialchars($consultant['about'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon">
                <i class="fas fa-stethoscope"></i>
            </div>
            <h2>Services</h2>
            <p><?php echo !empty($consultant['services']) ? htmlspecialchars($consultant['services']) : "Not listed"; ?></p>
        </div>
      </div>

      <!-- Right Side: Grid Layout for Additional Info -->
      <div class="right-info-grid">
        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-calendar"></i></div>
            <h2>Offline Availability</h2>
            <p><?php echo !empty($consultant['offline']) ? htmlspecialchars($consultant['offline']) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
            <h2>Location</h2>
            <p><strong>City:</strong> <?php echo !empty($consultant['city']) ? htmlspecialchars($consultant['city']) : "Not listed"; ?></p>
            <p><strong>Hospital:</strong> <?php echo !empty($consultant['hospital']) ? htmlspecialchars($consultant['hospital']) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-graduation-cap"></i></div>
            <h2>Education</h2>
            <p><?php echo !empty($consultant['education']) ? nl2br(htmlspecialchars($consultant['education'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-medal"></i></div>
            <h2>Awards & Recognitions</h2>
            <p><?php echo !empty($consultant['awards']) ? nl2br(htmlspecialchars($consultant['awards'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-briefcase"></i></div>
            <h2>Experience</h2>
            <p><?php echo !empty($consultant['experience']) ? nl2br(htmlspecialchars($consultant['experience'])) : "Not listed"; ?></p>
        </div>

        <div class="consultant-info-box">
            <div class="info-icon"><i class="fas fa-user-md"></i></div>
            <h2>Specializations</h2>
            <p><?php echo !empty($consultant['specializations']) ? htmlspecialchars($consultant['specializations']) : "Not listed"; ?></p>
        </div>
      </div>
    </div>

    <div class="consultation-section">
      <h1 class="consultation-title">Why book a consultation?</h1>

      <div class="consultation-grid">
          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-user-md"></i> <!-- Doctor icon -->
              </div>
              <h2>Expert Medical Guidance</h2>
              <p>Get professional advice from verified healthcare experts tailored to your health needs.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-clock"></i> <!-- Clock icon -->
              </div>
              <h2>Flexible Scheduling</h2>
              <p>Book consultations at your convenience with available time slots that fit your schedule.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-video"></i> <!-- Video Call icon -->
              </div>
              <h2>Online or In-Person</h2>
              <p>Choose between online video consultations or in-person visits with our specialists.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-shield-alt"></i> <!-- Shield/Security icon -->
              </div>
              <h2>Confidential & Secure</h2>
              <p>Your consultations are private, encrypted, and handled with the highest level of security.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-stethoscope"></i> <!-- Stethoscope icon -->
              </div>
              <h2>Comprehensive Care</h2>
              <p>Receive personalized recommendations, treatment plans, and follow-up care options.</p>
          </div>

          <div class="consultation-box">
              <div class="consultation-icon">
                  <i class="fas fa-check-circle"></i> <!-- Check mark icon -->
              </div>
              <h2>Trusted by Many</h2>
              <p>Join thousands of satisfied patients who trust MedConnect for their healthcare needs.</p>
          </div>
      </div>

      <button class="consultation-btn">Request a Consultation</button>
    </div>


  </div>

  • html
  • css
Share Improve this question edited Mar 4 at 17:00 God Gamer asked Mar 4 at 16:14 God GamerGod Gamer 391 silver badge6 bronze badges 2
  • 1 The code shown doesn't produce the output pictured: jsfiddle/GehnDo/bLunqmz0 Can you update the question to include a minimal reproducible example which demonstrates specifically what you're asking about? – David Commented Mar 4 at 16:24
  • Please check again. – God Gamer Commented Mar 4 at 17:00
Add a comment  | 

1 Answer 1

Reset to default 1

Your elements move out of their container because of this rule:

.consultant-info-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
    top: -80px; /* Move Upward */
}

The top: -80px is the culprit here

You may want to apply this offset to the container class instead:

.consultant-info-grid {
    display: flex;
    justify-content: center;
    gap: 70px;
    max-width: 90%;
    margin: 0 auto;
    top: -80px; /* <<< this */
}

本文标签： htmlBackground for ContainerStack Overflow

版权声明：本文标题：html - Background for Container - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745032454a2638578.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。