Как убедиться, что внутренний div не выходит за пределы своего контейнера div flexbox только с помощью CSS / HTML?

#html #css

#HTML #css

Вопрос:

Я пытаюсь вставить содержимое внутри внутреннего div (в данном случае изображения), однако, несмотря на то, что были установлены значения max-width и width, а также max-height и height контейнера div (flex container), внутренний div по-прежнему выходит за пределы границ, покрывающих другие элементы (за пределами его собственногоdiv).

Как убедиться, что любой контент, который я помещаю внутри div, никогда не выйдет за пределы максимальной области, которую я назначаю ему с помощью CSS или HTML?

В этом случае, когда я нажимаю на свои сообщения с левой панели навигации, это то, что я получаю:

 const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i  ) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i  ) {
      if (ProfileForm[i].style.display == "block" amp;amp; ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

   @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Latoamp;display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  border: thick dotted yellow;
  margin-bottom: 18%;
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  border: thick dotted red;
  flex: 1;
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick dotted green;
  flex: 1;
  width: 666px;
  max-width: 666px;
  height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.utilities_elements,
.utilities_image {
  /*border: thin solid red;*/
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  cursor: pointer;
}

.properties_dashboard_container {}

.properties_detail_widget {
  border: thin dotted #003580;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*border: thin solid red;*/
  flex-wrap: nowrap;
}

.property_details {
  margin-left: -6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 333;
  text-align: center;
}

.properties_detail_label {
  margin-left: 6px;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.prop_detail {
  max-width: 450px;
  max-height: 250px;
  margin: 33px;
  border: thick solid #003580;
}

.property_image_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image_wrapper {
  border: thick dotted purple;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image {
  border: thick dotted gray;
  max-width: 666px;
  max-height: 666px;

 <!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <!--        <meta http-equiv="refresh" content="3" >-->
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="prague">Prague</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: none">Short-Term</a></li>
          <!--I'll put in this 2 icons, monthly and daily-->
          <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
        </ul>
        <div class="search_input_widget">
          <i class="fas fa-search" style="padding-right:9px;"></i>
          <input type="text" placeholder="Search" class="search_input_input">
        </div>
      </div>
      <div class="header_right_container_inner_center">
        <button class="header_right_container_inner_center_button">Login</button>
      </div>
      <div class="header_right_container_inner_right">
        <button class="header_right_container_inner_right_button">Place Your Ad</button>
      </div>
    </div>
    <! -- HEADER RIGHT SIDE CONTAINER STOP -->
  </header>
  <! -- HEADER STOP -->
  <div class="main_dashboard_container">
    <div class="left_navbar">
      <div class="sub">
        <ul class="ul_flex">
          <li class="dashboard_user_widget"><span class="span" style="min-height:350px;">amp;nbsp;</span></li>
          <li class="dashboard_buttons" id="profile_id"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li>
          <li class="dashboard_buttons" id="properties_id"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li>
          <li class="dashboard_buttons" id="bids_id"><i class="far fa-money-bill-alt" style="padding-right:9px;"></i>My Offers</li>
          <li class="dashboard_buttons" id="utilities_id"><i class="fas fa-file-contract" style="padding-right:9px;"></i>My Utilities amp; Ejari</li>
          <li class="dashboard_buttons" id="favourite_id"><i class="far fa-heart" style="padding-right:9px;"></i>Favourite Properties</li>
          <li class="dashboard_buttons" id="messages_id"><i class="far fa-envelope" style="padding-right:9px;"></i>Messages</li>
          <li class="dashboard_buttons" id="settings_id"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li>
        </ul>
      </div>
    </div>
    <div class="right_content">
      <div class="dashboard_right_container_wrap" style="position:absolute;">
        <div class="profile_container" id="profile_container" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Profile</h4>
          <form class="profile_form" id="profile_form">
            <div class="profile_internal_container">
              <label for="name" style="color: black;" class="label_profile_form">Name:</label>
              <input type="text" id="name" placeholder="Name" class="input_profile_form">
              <input type="text" placeholder="Family Name" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="nationality" style="color: black;" class="label_profile_form">Nationality:</label>
              <select id="nationality" class="profile_form_dropdown">
                <option value="">Italy</option>
                <option value="">Germany</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="day" style="color: black;" class="label_profile_form">Date of birth:</label>
              <select id="day" class="profile_form_dropdown">
                <option value="">22</option>
                <option value="">21</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">December</option>
                <option value="">January</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">1984</option>
                <option value="">2021</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="phone" style="color: black;" class="label_profile_form">Phone number:</label>
              <input type="number" id="phone" placeholder=" 97150...." class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="email" style="color: black;" class="label_profile_form">Email:</label>
              <input type="email" id="email" placeholder="email" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="password" style="color: black;" class="label_profile_form">Password:</label>
              <input type="password" id="password" placeholder="*******" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="passport" style="color: black;" class="label_profile_form">Passport:</label>
              <input type="text" id="passport" placeholder="Type Passport Number" class="input_profile_form">
              <input type="file" id="inp" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="eid" style="color: black;" class="label_profile_form">Emirates ID:</label>
              <input type="password" id="eid" placeholder="Type EID Number" class="input_profile_form">
              <input type="file" id="inp2" class="input_profile_form">
            </div>
          </form>
          <div class="profile_save_button_container">
            <button class="profile_save_button">Save</button>
          </div>
          <!--                        TODO all this part should first be autofilled with the user details and become a form exclusively if editing is needed-->
        </div>
        <div class="profile_container" id="my_properties_container" style="display:none">
          <h4 class="profile_title">My Properties</h4>
          <div class="properties_dashboard_container">
            <div class="properties_detail_widget">
              <label class="properties_detail_label" for="address">Address:</label>
              <div class="property_details" id="address">Dubai Marina, Emaar Six Tower, Apt.1305</div>
              <label class="properties_detail_label" for="status">Status:</label>
              <div class="property_details" id="status" style="color:lawngreen; font-weight: bold">Rented</div>
              <label class="properties_detail_label" for="expiry">Expires:</label>
              <div class="property_details" id="expiry">17 Mar 2022</div>
              <label class="properties_detail_label" for="more_details">More:</label>
              <div class="property_details" id="more_details">More Details</div>
              <!--                                TODO all this part must be retrieved automatically from the database-->
            </div>
            <div class="property_image_wrapper">
              <img src="images/prop.jpg" class="prop_detail">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_bids" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Bids</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_utilities" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Utilities</h4>
          <div class="properties_dashboard">
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/dewa.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/du.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/etisalat.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/empower.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/ejari.png">
            </div>
            <div class="utilities_elements">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_favourites" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Favourites</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_messages" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Messages</h4>
          <div class="properties_dashboard">
            <div class="msg_image_wrapper">
              <img src="images/msg.PNG" class="msg_image">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_settings" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Settings</h4>
          <div class="properties_dashboard">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>

Развернуть фрагмент

1. попробуйте .profile_container img { max-width: 100% }

2. попробовал, не получилось, изображение по-прежнему выходит за пределы своей области

3. Я не видел никакого изображения в вашем коде, не могли бы вы его обновить?

Ответ №1:

Не уверен, что это то, что вы ищете.

Обновлено .msg_image_wrapper , как показано ниже, это заставит изображение соответствовать определенной высоте, установленной max-height свойством.

 .msg_image_wrapper {
  border: thick dotted purple;
  /*display: flex;
  justify-content: space-around;
  align-items: center;*/
  
  display: block; /* Added item */
  max-height: 350px; /* Added item */
  overflow: auto; /* Added item */
}

 const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i  ) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i  ) {
      if (ProfileForm[i].style.display == "block" amp;amp; ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Latoamp;display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  border: thick dotted yellow;
  margin-bottom: 18%;
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  border: thick dotted red;
  flex: 1;
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick dotted green;
  flex: 1;
  width: 666px;
  max-width: 666px;
  height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.utilities_elements,
.utilities_image {
  /*border: thin solid red;*/
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  cursor: pointer;
}

.properties_dashboard_container {}

.properties_detail_widget {
  border: thin dotted #003580;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*border: thin solid red;*/
  flex-wrap: nowrap;
}

.property_details {
  margin-left: -6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 333;
  text-align: center;
}

.properties_detail_label {
  margin-left: 6px;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.prop_detail {
  max-width: 450px;
  max-height: 250px;
  margin: 33px;
  border: thick solid #003580;
}

.property_image_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image_wrapper {
  border: thick dotted purple;
  /*display: flex;
  justify-content: space-around;
  align-items: center;*/
  
  display: block; /* Added item */
  max-height: 350px;
  overflow: auto;
}

.msg_image {
  border: thick dotted gray;
  max-width: 666px;
  max-height: 666px;

 <!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <!--        <meta http-equiv="refresh" content="3" >-->
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="prague">Prague</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: none">Short-Term</a></li>
          <!--I'll put in this 2 icons, monthly and daily-->
          <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
        </ul>
        <div class="search_input_widget">
          <i class="fas fa-search" style="padding-right:9px;"></i>
          <input type="text" placeholder="Search" class="search_input_input">
        </div>
      </div>
      <div class="header_right_container_inner_center">
        <button class="header_right_container_inner_center_button">Login</button>
      </div>
      <div class="header_right_container_inner_right">
        <button class="header_right_container_inner_right_button">Place Your Ad</button>
      </div>
    </div>
    <! -- HEADER RIGHT SIDE CONTAINER STOP -->
  </header>
  <! -- HEADER STOP -->
  <div class="main_dashboard_container">
    <div class="left_navbar">
      <div class="sub">
        <ul class="ul_flex">
          <li class="dashboard_user_widget"><span class="span" style="min-height:350px;">amp;nbsp;</span></li>
          <li class="dashboard_buttons" id="profile_id"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li>
          <li class="dashboard_buttons" id="properties_id"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li>
          <li class="dashboard_buttons" id="bids_id"><i class="far fa-money-bill-alt" style="padding-right:9px;"></i>My Offers</li>
          <li class="dashboard_buttons" id="utilities_id"><i class="fas fa-file-contract" style="padding-right:9px;"></i>My Utilities amp; Ejari</li>
          <li class="dashboard_buttons" id="favourite_id"><i class="far fa-heart" style="padding-right:9px;"></i>Favourite Properties</li>
          <li class="dashboard_buttons" id="messages_id"><i class="far fa-envelope" style="padding-right:9px;"></i>Messages</li>
          <li class="dashboard_buttons" id="settings_id"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li>
        </ul>
      </div>
    </div>
    <div class="right_content">
      <div class="dashboard_right_container_wrap" style="position:absolute;">
        <div class="profile_container" id="profile_container" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Profile</h4>
          <form class="profile_form" id="profile_form">
            <div class="profile_internal_container">
              <label for="name" style="color: black;" class="label_profile_form">Name:</label>
              <input type="text" id="name" placeholder="Name" class="input_profile_form">
              <input type="text" placeholder="Family Name" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="nationality" style="color: black;" class="label_profile_form">Nationality:</label>
              <select id="nationality" class="profile_form_dropdown">
                <option value="">Italy</option>
                <option value="">Germany</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="day" style="color: black;" class="label_profile_form">Date of birth:</label>
              <select id="day" class="profile_form_dropdown">
                <option value="">22</option>
                <option value="">21</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">December</option>
                <option value="">January</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">1984</option>
                <option value="">2021</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="phone" style="color: black;" class="label_profile_form">Phone number:</label>
              <input type="number" id="phone" placeholder=" 97150...." class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="email" style="color: black;" class="label_profile_form">Email:</label>
              <input type="email" id="email" placeholder="email" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="password" style="color: black;" class="label_profile_form">Password:</label>
              <input type="password" id="password" placeholder="*******" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="passport" style="color: black;" class="label_profile_form">Passport:</label>
              <input type="text" id="passport" placeholder="Type Passport Number" class="input_profile_form">
              <input type="file" id="inp" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="eid" style="color: black;" class="label_profile_form">Emirates ID:</label>
              <input type="password" id="eid" placeholder="Type EID Number" class="input_profile_form">
              <input type="file" id="inp2" class="input_profile_form">
            </div>
          </form>
          <div class="profile_save_button_container">
            <button class="profile_save_button">Save</button>
          </div>
          <!--                        TODO all this part should first be autofilled with the user details and become a form exclusively if editing is needed-->
        </div>
        <div class="profile_container" id="my_properties_container" style="display:none">
          <h4 class="profile_title">My Properties</h4>
          <div class="properties_dashboard_container">
            <div class="properties_detail_widget">
              <label class="properties_detail_label" for="address">Address:</label>
              <div class="property_details" id="address">Dubai Marina, Emaar Six Tower, Apt.1305</div>
              <label class="properties_detail_label" for="status">Status:</label>
              <div class="property_details" id="status" style="color:lawngreen; font-weight: bold">Rented</div>
              <label class="properties_detail_label" for="expiry">Expires:</label>
              <div class="property_details" id="expiry">17 Mar 2022</div>
              <label class="properties_detail_label" for="more_details">More:</label>
              <div class="property_details" id="more_details">More Details</div>
              <!--                                TODO all this part must be retrieved automatically from the database-->
            </div>
            <div class="property_image_wrapper">
              <img src="images/prop.jpg" class="prop_detail">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_bids" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Bids</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_utilities" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Utilities</h4>
          <div class="properties_dashboard">
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/dewa.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/du.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/etisalat.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/empower.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/ejari.png">
            </div>
            <div class="utilities_elements">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_favourites" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Favourites</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_messages" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Messages</h4>
          <div class="properties_dashboard">
            <div class="msg_image_wrapper">
              <img src="https://via.placeholder.com/800" class="msg_image">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_settings" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Settings</h4>
          <div class="properties_dashboard">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>

Развернуть фрагмент

Ответ №2:

Это то, что вы хотели? Я внес 3 основных изменения, см. Отредактированный фрагмент ниже.

Добавлено box-sizing: border-box в ваш глобальный селектор, чтобы помочь с вашими перекрывающимися границами.
Добавлено object-fit: contain к изображению, чтобы содержать его внутри границ контейнера
Добавлена высота / ширина контейнера вокруг изображения, чтобы позволить object-fit работать.

 const ProfileForm = document.getElementsByClassName('profile_container');
const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i  ) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i  ) {
      if (ProfileForm[i].style.display == "block" amp;amp; ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Latoamp;display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
  /* Add box-sizing here to help with your borders overlapping */
  box-sizing: border-box;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  border: thick dotted yellow;
  margin-bottom: 18%;
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  border: thick dotted red;
  flex: 1;
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick dotted green;
  flex: 1;
  width: 666px;
  max-width: 666px;
  height: 350px;
  max-height: 350px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.utilities_elements,
.utilities_image {
  /*border: thin solid red;*/
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  cursor: pointer;
}

.properties_dashboard_container {}

.properties_detail_widget {
  border: thin dotted #003580;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*border: thin solid red;*/
  flex-wrap: nowrap;
}

.property_details {
  margin-left: -6px;
  padding: 6px;
  font-size: 12px;
  font-weight: 333;
  text-align: center;
}

.properties_detail_label {
  margin-left: 6px;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.prop_detail {
  max-width: 450px;
  max-height: 250px;
  margin: 33px;
  border: thick solid #003580;
}

.property_image_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.msg_image_wrapper {
  border: thick dotted purple;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* width and height need to be set here in order to properly contain the image */
  width: 100%;
  height: 100%;
}

.msg_image {
  border: thick dotted gray;
  /* max-width and max-height can just be 100% here as well since it inherits the size from it's parent */
  max-width: 100%;
  max-height: 100%;
  /* object-fit contain here will take any size image and contain it within the size of the container */
  object-fit: contain;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <!--        <meta http-equiv="refresh" content="3" >-->
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="prague">Prague</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: none">Short-Term</a></li>
          <!--I'll put in this 2 icons, monthly and daily-->
          <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
        </ul>
        <div class="search_input_widget">
          <i class="fas fa-search" style="padding-right:9px;"></i>
          <input type="text" placeholder="Search" class="search_input_input">
        </div>
      </div>
      <div class="header_right_container_inner_center">
        <button class="header_right_container_inner_center_button">Login</button>
      </div>
      <div class="header_right_container_inner_right">
        <button class="header_right_container_inner_right_button">Place Your Ad</button>
      </div>
    </div>
    <! -- HEADER RIGHT SIDE CONTAINER STOP -->
  </header>
  <! -- HEADER STOP -->
  <div class="main_dashboard_container">
    <div class="left_navbar">
      <div class="sub">
        <ul class="ul_flex">
          <li class="dashboard_user_widget"><span class="span" style="min-height:350px;">amp;nbsp;</span></li>
          <li class="dashboard_buttons" id="profile_id"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li>
          <li class="dashboard_buttons" id="properties_id"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li>
          <li class="dashboard_buttons" id="bids_id"><i class="far fa-money-bill-alt" style="padding-right:9px;"></i>My Offers</li>
          <li class="dashboard_buttons" id="utilities_id"><i class="fas fa-file-contract" style="padding-right:9px;"></i>My Utilities amp; Ejari</li>
          <li class="dashboard_buttons" id="favourite_id"><i class="far fa-heart" style="padding-right:9px;"></i>Favourite Properties</li>
          <li class="dashboard_buttons" id="messages_id"><i class="far fa-envelope" style="padding-right:9px;"></i>Messages</li>
          <li class="dashboard_buttons" id="settings_id"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li>
        </ul>
      </div>
    </div>
    <div class="right_content">
      <div class="dashboard_right_container_wrap" style="position:absolute;">
        <div class="profile_container" id="profile_container" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Profile</h4>
          <form class="profile_form" id="profile_form">
            <div class="profile_internal_container">
              <label for="name" style="color: black;" class="label_profile_form">Name:</label>
              <input type="text" id="name" placeholder="Name" class="input_profile_form">
              <input type="text" placeholder="Family Name" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="nationality" style="color: black;" class="label_profile_form">Nationality:</label>
              <select id="nationality" class="profile_form_dropdown">
                <option value="">Italy</option>
                <option value="">Germany</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="day" style="color: black;" class="label_profile_form">Date of birth:</label>
              <select id="day" class="profile_form_dropdown">
                <option value="">22</option>
                <option value="">21</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">December</option>
                <option value="">January</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">1984</option>
                <option value="">2021</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="phone" style="color: black;" class="label_profile_form">Phone number:</label>
              <input type="number" id="phone" placeholder=" 97150...." class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="email" style="color: black;" class="label_profile_form">Email:</label>
              <input type="email" id="email" placeholder="email" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="password" style="color: black;" class="label_profile_form">Password:</label>
              <input type="password" id="password" placeholder="*******" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="passport" style="color: black;" class="label_profile_form">Passport:</label>
              <input type="text" id="passport" placeholder="Type Passport Number" class="input_profile_form">
              <input type="file" id="inp" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="eid" style="color: black;" class="label_profile_form">Emirates ID:</label>
              <input type="password" id="eid" placeholder="Type EID Number" class="input_profile_form">
              <input type="file" id="inp2" class="input_profile_form">
            </div>
          </form>
          <div class="profile_save_button_container">
            <button class="profile_save_button">Save</button>
          </div>
          <!--                        TODO all this part should first be autofilled with the user details and become a form exclusively if editing is needed-->
        </div>
        <div class="profile_container" id="my_properties_container" style="display:none">
          <h4 class="profile_title">My Properties</h4>
          <div class="properties_dashboard_container">
            <div class="properties_detail_widget">
              <label class="properties_detail_label" for="address">Address:</label>
              <div class="property_details" id="address">Dubai Marina, Emaar Six Tower, Apt.1305</div>
              <label class="properties_detail_label" for="status">Status:</label>
              <div class="property_details" id="status" style="color:lawngreen; font-weight: bold">Rented</div>
              <label class="properties_detail_label" for="expiry">Expires:</label>
              <div class="property_details" id="expiry">17 Mar 2022</div>
              <label class="properties_detail_label" for="more_details">More:</label>
              <div class="property_details" id="more_details">More Details</div>
              <!--                                TODO all this part must be retrieved automatically from the database-->
            </div>
            <div class="property_image_wrapper">
              <img src="images/prop.jpg" class="prop_detail">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_bids" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Bids</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_utilities" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Utilities</h4>
          <div class="properties_dashboard">
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/dewa.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/du.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/etisalat.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/empower.png">
            </div>
            <div class="utilities_elements">
              <img class="utilities_image" src="images/Utilities Logos/ejari.png">
            </div>
            <div class="utilities_elements">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_favourites" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Favourites</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_messages" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Messages</h4>
          <div class="properties_dashboard">
            <div class="msg_image_wrapper">
              <img src="https://picsum.photos/1500/1200" class="msg_image">
            </div>
          </div>
        </div>
        <div class="profile_container" id="my_settings" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Settings</h4>
          <div class="properties_dashboard">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>

Развернуть фрагмент

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Как я могу сделать это очевидным, когда в EXCEL выполняются вычисления вручную?

Регулярное выражение работает в Chrome, но не в Safari

Как выполнить быстрый поиск файлов по всему рабочему пространству (код Visual Studio)