Блог

Главная - Вопросы по программированию - Как я могу показать вертикальную белую рамку в нижнем колонтитуле?

Как я могу показать вертикальную белую рамку в нижнем колонтитуле?

#html #css

#HTML #css

Вопрос:

Мне нужно сделать вертикальную белую рамку в нижнем колонтитуле примерно на 90% ширины.

Вот как это должно выглядеть:

введите описание изображения здесь

В настоящее время у меня такая же, как на изображении, но без белой линии справа.

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
}  
 <footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em> 44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Ответ №1:

Укажите свой нижний колонтитул position: relative и добавьте внутри него div.verticalLine, определенный как so:

 .verticalLine{
    position: absolute;
    top: 0;
    right: 10%;
    width: 30px;
    height: 100%;
    background: #fff;
}

Ответ №2:

Этого можно довольно легко достичь с помощью :after псевдоэлемента, который не потребует от вас изменения разметки. Укажите нижний колонтитул position:relative , затем используйте CSS, чтобы поместить в него абсолютно расположенную полосу:

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;
}
footer:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  right: 50px;
  background: white;
  content: "";
}  
 <footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
            42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em> 44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Ответ №3:

Вы можете добавить псевдоэлемент с помощью CSS 

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position:relative;
}
footer:after{
    content:'';
    position:absolute;
    right:10%;
    width:10px;
    top:0;
    bottom:0;
    background-color:#fff;
}

Полная демонстрация

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position:relative;
}
footer:after{
  content:'';
  position:absolute;
  right:10%;
  width:10px;
  top:0;
  bottom:0;
  background-color:#fff;
}  
 <footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em> 44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Ответ №4:

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;             /* 1 */
}

footer::after {
  content: "";                    /* 2 */
  position: absolute;             
  width: 25px;
  height: 100%;
  background-color: white;
  top: 0;
  right: 10%;
}  
 <footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
      42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>
  <a href=""><em> 44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>
  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Примечания:

  1. Установите ближайший позиционированный предок для абсолютного позиционирования.
  2. Используйте псевдоэлемент с абсолютным расположением для создания границы.

Ответ №5:

добавьте один div в нижний колонтитул

 footer {
    width: 100%;
    background-color: #CDDE47;
 }

.a1 {
    width: 90%;
    border-right: 10px solid #fff;
    padding: 10px;
}  
 <footer>
  <div class="a1">
        <h2>Contact us</h2>
        <p><em>You can find our physical location on:<br>
            42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em></p>

        <a href=""><em> 44 (2345) 345 456</em></a><br>
        <a href=""><em>info@growiteatit.co.uk</em></a>

        <ul>
            <li><a href=""><em>Check out our facebook page</em></a></li>
            <li><a href=""><em>Check out our twitter feed</em></a></li>
        </ul>
</div>
</footer>

Ответ №6:

Вы можете добавить внутреннюю оболочку и применить к ней границы и отступы. 

 footer {
  width: 100%;
  background-color: #CDDE47;
}

.borderWrapper{
  border-right: solid 8px #fff;
  width: 90%;
    padding: 10px;
}  
 <footer>
<div class="borderWrapper">
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em> 44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
  </div>
</footer>

Ответ №7:

может быть, используйте псевдоэлемент:after для создания белого разделителя и убедитесь, что нижний колонтитул имеет position:relatve, чтобы содержать абсолютный элемент? например

 footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;
}

footer::after {
 content: '';
 position: absolute;
 width: 30px;
 background: white;
 right: calc(10% - 15px);
 top: 0;
 height: 100%;
}