Wewnętrzny border w divie

pytanie zadane 1 lutego 2017 w HTML i CSS przez TheGleeMat Bywalec (2,070 p.)

Hey. Chciałbym umieścić border wewnątrz diva, dodatkowo ustawić marginy dotyczące tylko border.
Tak jest:

Tak chciałbym żeby było:

kod poniżej:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>
    <div class=""> <!-- TEN PIERWSZY DIV -->
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-6 col-xl-6 sto red borderleft" >
            1
          </div>
          <div class="col-xs-6 col-xl-6 sto blue borderright">
            2
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

CUSTOM CSS (reszta plików to oryginalne bootstrap.css oraz bootstrap.js wersja 4)

.sto {
  height: 100vh;
  min-height: 100vh;
}

.red{
  background-color: #e74c3c;
}

.blue{
  background-color: #3498db;
}

.borderleft{
  border-width: 10px 0px 10px 10px;
  border-style: solid;
  border-color: black;
  box-sizing: border-box;
}

.borderright{
  border-width: 10px 10px 10px 0px;
  border-style: solid;
  border-color: black;
  box-sizing: border-box;
}

.pad{
  padding: 20px;
}

2 odpowiedzi

odpowiedź 1 lutego 2017 przez Ivan Maniak (60,650 p.)

Sposób wykonania od tego co chcesz osiągnąć. Jednym ze sposobów na osiągnięcie tego może być dodanie border dla body, a stworzenie tła jako background dla body. Coś w tym stylu: http://codepen.io/klusaktomasz/pen/BprpLP

Aby nie było żadnego zaskoczenia dodam, że:

Opera Mini oraz IE8 (IE to IE, Opera Mini i tak nie wspiera większości fajowych znaczników, na twoim miejscu oplułbym ją) nie wspierają linear-gradient
CSS variables jest niewspierane przez IE, Edge oraz kochaną Opere Mini. To jest najmniejszy problem
IE oraz Edge mają problem z vh. Aaa no i zapomniałem o Operze Mini. Proponuje przerzucić się na %. height: 100% dla html oraz body. Dodatkowo Safari i Safari iOS liczy sobie górny pasek (oraz dolny) do wysokość viewport.
calc() nie jest wspierany przez... Opere Mini! Jejjjj

odpowiedź 1 lutego 2017 przez Assasz Nałogowiec (30,460 p.)

Może div wewnątrz diva? Generalnie sam border wewnątrz diva możesz zrobić za pomocą box-shadow, ale z marginem nie da rady w ten sposób.

komentarz 1 lutego 2017 przez TheGleeMat Bywalec (2,070 p.)

Starałem się tak robić nie wychodzi mi, myślałem że to będzie proste zadanko, a mam z nim mocny problem :|

komentarz 1 lutego 2017 przez Assasz Nałogowiec (30,460 p.)

A z czym konkretnie masz problem?

komentarz 1 lutego 2017 przez TheGleeMat Bywalec (2,070 p.)

Z uzyskaniem efektu jak na drugim poglądowym obrazku

komentarz 1 lutego 2017 przez Assasz Nałogowiec (30,460 p.)

No to robisz diva w środku o załóżmy wymiarach 60px mniejszych, dajesz mu margin 30px, border i tyle.

komentarz 1 lutego 2017 przez TheGleeMat Bywalec (2,070 p.)

Tylko że pierwszy div dostosowuje się do rozmiaru okna

.sto {
  height: 100vh;
  min-height: 100vh;
}

Podobne pytania

+1 głos

1 odpowiedź 334 wizyt

HTML/CSS - Border h1 dla tekstu

pytanie zadane 6 lipca 2022 w HTML i CSS przez AnimaVillis Stary wyjadacz (12,450 p.)

+1 głos

1 odpowiedź 181 wizyt

Border: 1px powoduje powiększenie się całego diva.

pytanie zadane 5 lutego 2022 w HTML i CSS przez CYG4N Nowicjusz (240 p.)

0 głosów

1 odpowiedź 239 wizyt

Pierszy kod w HTML/CSS - do oceny i pytanie o prawy border style double

pytanie zadane 30 września 2019 w HTML i CSS przez Hubert91 Nowicjusz (220 p.)

Wewnętrzny border w divie

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci