Border around details-tag

Question

I'm facing a little problem at the moment:

On my site im working with HTML's <details>-tag. My idea is to have a border around it when it's opend.

The following picture shows how it actually looks like. The red line is what I want to add:

My code looks like that:

.myListDiv {
  width: 230px;
  height: 500px;
  overflow-x: hidden;
}
h2 {
  font: 400 25px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.testList:last-child {
  border: none;
}
.testList {
  text-decoration: none;
  color: #000;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
  display: block;
  width: 180px;
  font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
.testList:hover {
  font-size: 20px;
  background: #f6f6f6;
}
h2:hover + .myUL {
  display: block;
}
.myUL:hover {
  display: block;
}
.DetailDiv {
  z-index: 100;
  top: 50px;
  position: relative;
}
.Details {
  margin: 10px;
  outline: none;
}
.Summary {
  position: relative;
  top: 8px;
  background-color: #EAEAEA;
  border-radius: 10px;
  color: #999999;
  border: 1px solid #cdcdcd;
  outline: none;
}

<div id="ContentPlaceHolder1_placeHolder">
  <details class="Details">
    <summary class="Summary">Test</summary>
    <div style="position:relative; top: 10px;">
      <div class="myListDiv" style="position:absolute; left:10px">
        <h2>test0</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>
      <div class="myListDiv" style="position:absolute; left:260px">
        <h2>test1</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

      <div class="myListDiv" style="position:absolute; left:510px">
        <h2 style="">test2</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

    </div>
  </details>

Why all is position absolute? With that layout is impossible to put a normal border. — Marcos Pérez Gude, Dec 01 '15 at 15:02
Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) — Paulie_D, Dec 01 '15 at 15:02
@MarcosPérezGude Feel free to change if you got an solution with other positioning :) — Felix Gerber, Dec 01 '15 at 15:13

score 1 · Accepted Answer · answered Dec 01 '15 at 15:19

How about this?

.myListDiv {
  width: 32%;
  height: 500px;
  overflow-x: hidden;
  display: inline-block;
}
details > div {
  border: 1px solid red;
  border-top:0;
}
h2 {
  font: 400 25px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.testList:last-child {
  border: none;
}
.testList {
  text-decoration: none;
  color: #000;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
  display: block;
  width: 180px;
  font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
.testList:hover {
  font-size: 20px;
  background: #f6f6f6;
}
h2:hover + .myUL {
  display: block;
}
.myUL:hover {
  display: block;
}
.DetailDiv {
  z-index: 100;
  top: 50px;
  position: relative;
}
.Details {
  margin: 10px;
  outline: none;
}
.Summary {
  position: relative;
  top: 8px;
  background-color: #EAEAEA;
  border-radius: 10px;
  color: #999999;
  border: 1px solid #cdcdcd;
  outline: none;
}

<div id="ContentPlaceHolder1_placeHolder">
  <details class="Details">
    <summary class="Summary">Test</summary>
    <div style="position:relative; top: 10px;">
      <div class="myListDiv">
        <h2>test0</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>
      <div class="myListDiv">
        <h2>test1</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

      <div class="myListDiv">
        <h2 style="">test2</h2>
        <ul class="myUL">
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
          <li class="testList">test</li>
        </ul>
      </div>

    </div>
  </details>

You're welcome, and take care with absolute positioning, as @Paulie_D said in his comment above it's dangerous and not responsive. Relative positioning is the normal in the 99% of the cases. Good luck! — Marcos Pérez Gude, Dec 01 '15 at 15:37

score 0 · Answer 2 · answered Dec 01 '15 at 15:10

0

For class summary or class details, try giving three sides border. As -

.details/.summary{
  border-left:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
}

answered Dec 01 '15 at 15:10

Vikas Mishra

246
1
12

unfortunately that doen't work, do you have any other idea? – Felix Gerber Dec 01 '15 at 15:12

Border around details-tag

2 Answers2