Не отображаются бордеры. В чем проблема?

bearsandvodka · June 28, 2012

Привет, ребят! У меня прописанные бордеры не отображаются, подскажите в чем проблема. Код представлен ниже:


<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
  <title>untitled</title>
  <meta charset="UTF-8">
  <style type="text/css">

  html, body {margin: 0;}

  .top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
    border-bottom: 2px dashed #ECE8E2;
  }

  .top-middle {
    position: absolute;
    top: 0px;
    left: 300px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
    border-bottom: 2px dashed #ECE8E2;
  }

  .top-right {
    position: absolute;
    top: 0px;
    left: 600px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-bottom: 2px dashed #ECE8E2;
  }

  .middle-left {
    position: absolute;
    top: 300px;
    left: 0px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
    border-bottom: 2px dashed #ECE8E2;
  }

  .middle-middle {
    position: absolute;
    top: 300px;
    left: 300px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
    border-bottom: 2px dashed #ECE8E2;
  }

  .middle-right {
    position: absolute;
    top: 300px;
    left: 600px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-bottom: 2px dashed #ECE8E2;
  }

  .bottom-left {
    position: absolute;
    top: 600px;
    left: 0px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
  }

  .bottom-middle {
    position: absolute;
    top: 600px;
    left: 300px;
    background-color: black;
    height: 300px;
    width: 300px;
    border-right: 2px dashed #ECE8E2;
  }

  .bottom-right {
    position: absolute;
    top: 600px;
    left: 600px;
    background-color: black;
    height: 300px;
    width: 300px;
    /*border: 2px dashed #ECE8E2;*/
  }

  .container {
    position: absolute;
    left: 25%;
    width: 900px;
    height: 900px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="top-left">

    </div>

    <div class="top-middle">

    </div>

    <div class="top-right">

    </div>

    <div class="middle-left">

    </div>

    <div class="middle-middle">

    </div>

    <div class="middle-right">

    </div>

    <div class="bottom-left">

    </div>

    <div class="bottom-middle">

    </div>

    <div class="bottom-right">

    </div>
  </div>
</body>
</html>

lexxcode · June 28, 2012

Лучше бы ссылку на страничку дали

bearsandvodka · June 28, 2012

Лучше бы ссылку на страничку дали

Простите пожалуйста за такой объем, но пока всё локально. в принципе все там предельно ясно. не ясно только одно - почему рамки не отображаются?

Viper · June 28, 2012

Бордеры вы перекриваете другими блоками. Например, первый блок(в стилях) имеет визуальные размеры 302х302 и, соответственно, соседний блок нужно двигать на top: 302, left: 302 и тд...

Бордер НЕ входит в значение width и height

bearsandvodka · June 29, 2012

Бордеры вы перекриваете другими блоками. Например, первый блок(в стилях) имеет визуальные размеры 302х302 и, соответственно, соседний блок нужно двигать на top: 302, left: 302 и тд...
Бордер НЕ входит в значение width и height

спасибо большое за разъяснение, теперь все встало как надо!

Sign In

Не отображаются бордеры. В чем проблема?

Question

bearsandvodka

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

lexxcode

Link to comment

Share on other sites

bearsandvodka

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

bearsandvodka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information