CODEWITHSUNDEEP
htmlcssborderoverlap
Dogmatics
Dogmatics

Reputation: 67

CSS - Stacked borders

I have this layout that needs to be a bunch of boxes stacked on top of each other, they all have a 1px border. In order to have the border always be 1px I put a margin-bottom of -1px to all of the boxes, but when I change the border color on hover it doesn't quite work as intended. Here's an example: Border collapsed

How can I make it so it doesn't overlap on hover?

My code:

.main-content ul li a {
  margin-bottom:-1px;
  padding:15px 23px;
  display:block;
  border:1px solid #545353;
  color:#545353;
}
.main-content ul li a:hover {
  border-color:#fff;
  color:#fff;
}

I tried giving them all a z-index and then making that higher on hover, but it didn't work either... Any ideas?

Thanks!

EDIT Adding HTML

<div class="row main-content">
  <div class="container">
    <div class="col-md-8 col-md-offset-2">
      <ul>
        <li><a href="#">Bienvenida</a></li>
        <li><a href="#">¿Por qué es la decisión correcta?</a></li>
        <li><a href="#">¿Cómo funciona este servicio?</a></li>
        <li><a href="#">¿Cuánto cuesta este servicio?</a></li>
        <li><a href="#">Estoy interesado, ¿qué hago?</a></li>
        <li><a href="#">Registro</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Views: 489

Answers (2)

David Li
David Li

Reputation: 1290

You can use the property:

box-sizing: border-box;

so that elements are exactly the width and height you want them to be. The border will be 1px within the element instead of stretching out to other ones. ewfaeg To keep the border at 1px, use this css:

.main-content ul li a {
    position: relative;
    z-index: 30;
    margin-bottom:-1px;
    padding:15px 23px;
    display:block;
    border:1px solid #545353;
    color:#545353;
}
.main-content ul li a:hover {
    border-color:#fff;
    color:#fff;
    z-index: 99;
}

The changes I made was setting a z-index for both unhovered links and hovered links. The position:relative is added because z-index does not reflect unless there is a position specified.

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122027

Try this https://jsfiddle.net/L565nwaL/1/

<div class="main-content">
    <ul>
        <li><a href="#">item one</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">item three large</a></li>
        <li><a href="#">item four</a></li>
    </ul>
</div>

CSS

.main-content ul li a {
  padding:15px 23px;
  display:block;
  border:1px solid #545353;
  border-bottom: transparent;
  color:#545353;
}
.main-content ul li a:hover {
  border:1px solid #fff;
  color:#fff;

} 

.main-content {
    background: #161616;
    box-sizing: border-box;

}

Upvotes: 0

Related Questions