Блог

Главная - Вопросы по программированию - Я не могу центрировать карточки (HTML / CSS)

Я не могу центрировать карточки (HTML / CSS)

#html #css #responsive-design

#HTML #css — код #адаптивный дизайн

Вопрос:

я создал сайт-портфолио, но у меня проблема в том, что я не могу центрировать карточки (как на картинке). Когда я пытаюсь поместить «карточки» в панель навигации, я не могу центрировать их на сайте, но когда я этого не делаю, они находятся под панелью навигации.

И может кто-нибудь объяснить мне, как я создаю адаптивный веб-дизайн?

я надеюсь, что кто-нибудь может мне помочь.

         const list = document.querySelectorAll('.list');
        function activeLink(){
            list.forEach((item) =>
            item.classList.remove('active'));
            this.classList.add('active');
        }
        list.forEach((item) =>
        item.addEventListener('click',activeLink)); 
 .container {
    position: relative;
    font-family: 'Roboto', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1850px;
    flex-wrap: wrap;
}
.container .card {
    position: relative;
    width: 280px;
    height: 400px; 
    margin: 30px;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}
.container .card .content {
    font-family: 'Roboto', monospace;
    padding: 20px;
    text-align: center;
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}
.container .card:hover .content {
    transform: translateY(0px);
    opacity: 1;
}
.container .card .content h2 {
    position: absolute;
    top: -80px;
    right: 30px;
    font-size: 8em;
    color:rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.container .card .content h3 {
    font-size: 1.8em;
    color: #fff;
    z-index: 1;
}
.container .card .content p {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
    transform-style: preserve-3d;
}
.container .card .content a {
     position: relative;
     display: inline-block;
     padding: 8px 20px;
     margin-top: 15px;
     background: #fff;
     color: #000;
     border-radius: 20px;
     text-decoration: none;
     font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
} 
     <div class="centernav">
        <div class="navbar">
            <ul>
                <li class="list active">
                    <a href="#">
                        <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                        <span class="title">Home</span>
                    </a>
                </li>
                <li class="list">
                    <a href="2profil.html">
                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                        <span class="title">Profil</span>
                    </a>
                </li>
                <li class="list">
                    <a href="4settings.html">
                        <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                        <span class="title">Setting</span>
                    </a>
                </li>
                <li class="list">
                    <a href="5Galerie.html">
                        <span class="icon"><ion-icon name="images-outline"></ion-icon></span>
                        <span class="title">Galerie</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
                        <span class="title">Cooming Soon</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
                        <span class="title">Cooming Soon</span>
                    </a>
                </li>
                <li class="list">
                    <a href="8contact.php">
                        <span class="icon"><ion-icon name="mail-outline"></ion-icon></span>
                        <span class="title">Kontakt</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--Den Container genau neben der Navbar ohne den Container in die Div
        der Navbar rein zu packen
        -->
<!--========== Inhalt Profil ==========-->  
    </div>
<div class="container">
    <div class="card">
        <div class="content">
            <h2>01</h2>
            <h3>Profil</h3>
            <p> Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua </p>
            <a href="profil_readmore.html">Read More</a>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <h2>02</h2>
            <h3>Main Skills</h3>
            <p>Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua. </p>
                <a href="#">Read More</a>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <h2>03</h2>
            <h3>Tools</h3>
            <p>Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua. </p>
                <a href="#">Read More</a>
         </div>
        </div>
    </div>
</div>

<!--========== Java Script ==========-->

    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Проблема!

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

1. я создал jsfiddle jsfiddle.net/5hqdactz

2. Вы здесь много спрашиваете, это довольно много работы. Вы просите нас исправить панель навигации ( position: fixed возможно, использовать) и центрировать карты (посмотрите flexbox или grid ?)

3. Я знаю, что это большая работа, но я понятия не имею, что я могу сделать, чтобы заставить это работать. я тоже пробовал flexbox и grid, но это не сработало

Ответ №1:

Вы можете использовать flex для их выравнивания. Я отредактировал еще две вещи: орфографические ошибки и немного больше оформления.

Примечание: Эта панель навигации не реагирует. карты отзывчивы.

Итак, вот ваш окончательный код :

 const list = document.querySelectorAll('.list');

function activeLink() {
  list.forEach((item) =>
    item.classList.remove('active'));
  this.classList.add('active');
}
list.forEach((item) =>
  item.addEventListener('click', activeLink)); 
 .container {
  position: relative;
  font-family: 'Roboto', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1850px;
  flex-wrap: wrap;
}

.container .card {
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

.container .card .content {
  font-family: 'Roboto', monospace;
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}

.container .card .content h2 {
  position: absolute;
  top: -80px;
  right: 30px;
  font-size: 8em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.container .card .content h3 {
  font-size: 1.8em;
  color: #fff;
  z-index: 1;
}

.container .card .content p {
  font-size: 1em;
  color: #fff;
  font-weight: 300;
  transform-style: preserve-3d;
}

.container .card .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background: #fff;
  color: #000;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.someclass {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.someclass .list {
  margin: 10px;
  list-style: none;
}

.someclass .list a {
  text-decoration: none;
} 
 <div class="centernav">
  <div class="navbar">
    <ul class="someclass">
      <li class="list active">
        <a href="#">
          <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
          <span class="title">Home</span>
        </a>
      </li>
      <li class="list">
        <a href="2profil.html">
          <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
          <span class="title">Profile</span>
        </a>
      </li>
      <li class="list">
        <a href="4settings.html">
          <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
          <span class="title">Settings</span>
        </a>
      </li>
      <li class="list">
        <a href="5Galerie.html">
          <span class="icon"><ion-icon name="images-outline"></ion-icon></span>
          <span class="title">Galery</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
          <span class="title">Cooming Soon</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
          <span class="title">Cooming Soon</span>
        </a>
      </li>
      <li class="list">
        <a href="8contact.php">
          <span class="icon"><ion-icon name="mail-outline"></ion-icon></span>
          <span class="title">Contact</span>
        </a>
      </li>
    </ul>
  </div>
  <!--Den Container genau neben der Navbar ohne den Container in die Div
    der Navbar rein zu packen
    -->
  <!--========== Inhalt Profil ==========-->
</div>
<div class="container">
  <div class="card">
    <div class="content">
      <h2>01</h2>
      <h3>Profile</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua </p>
      <a href="profil_readmore.html">Read More</a>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <h2>02</h2>
      <h3>Main Skills</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua. </p>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <h2>03</h2>
      <h3>Tools</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua. </p>
      <a href="#">Read More</a>
    </div>
  </div>
</div>

<!--========== Java Script ==========-->

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Надеюсь, это поможет вам 🙂

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

1. Проблема в том, что панель навигации должна располагаться не сверху посередине, а сбоку, чтобы ее можно было откинуть. Я думаю, что я забыл добавить остальную часть кода, это была моя ошибка sry.

Метки: