Handle 1-pixel edge to avoid double edge (1+1 pixels) with side-by-side elements

Asked

Viewed 570 times

8

I have a grid created with a list ul whose internal elements to li contains a border.
The idea is that when the elements are side by side the edges are manipulated so that only a single stroke with 1 pixel is left instead of what happens:

Example in Jsfiddle

inserir a descrição da imagem aqui

Problem

As the list should be at a width of 100% of the area where it is inserted and its elements li should stick to 25% of the width of the list, the gray border is applied on the link a within each li so as to prevent the 25% width plus the 2 pixels that the edge (1px right edge + 1px left edge) occupies break the layout:

HTML

<ul>
    <li>
        <a href="#" title="">1</a>
    </li>
    <li>
        <a href="#" title="">2</a>
    </li>
    <li>
        <a href="#" title="">3</a>
    </li>
    <li>
        <a href="#" title="">4</a>
    </li>
    <li>
        <a href="#" title="">5</a>
    </li>
    <li>
        <a href="#" title="">6</a>
    </li>
    <li>
        <a href="#" title="">7</a>
    </li>
    <li>
        <a href="#" title="">8</a>
    </li>
</ul>

CSS

ul, li, a{
    display:block;
    margin:0;
    padding:0;
}
ul{
    width:100%;
}
li{
    float:left;
    width:25%;
}
a{
    border:1px solid #c9c7c7;
    text-align:center;
    height:200px;
}

Question

How to make the final result of the grey edges look like the bottom ?

inserir a descrição da imagem aqui

css css3 css-border

  • The number of squares is fixed or dynamic?

  • @Kennyrafael The grid is as presented, but in the future more rows may be needed! Columns will always be four.

  • And this content is generated with PHP?

  • 1

    What is the content of this? Use a table with border-collapse would be out of the question for semantic reasons?

  • @bfavaretto Out of the question because of the animations via jQuery that will be applied, otherwise there was already a table :)

  • @Zuul, this content is generated manually or via PHP or other language?

  • 1

    @Kennyrafael PHP, but if possible I prefer to run away from a solution that is dependent on the "generator" of the list.

Show 2 more comments

2 answers

8


With certain CSS3 rules it is possible to affect only some of the edges to achieve the desired result:

/* apaga todas as bordas direitas e inferiores */
li a { 
    border-right-color: transparent; 
    border-bottom-color: transparent;
}
/* mostra borda direita a cada 4 itens */
li:nth-child(4n) a { border-right-color: #c9c7c7; }
}
/* mostra borda inferior nos últimos 4 itens */
li:nth-last-child(-n+4) a { border-bottom-color: #c9c7c7; }

http://jsfiddle.net/e73EU/1/

Alternative solution to resolve the 1px gap

li a { 
    border-right-color: transparent;
    border-bottom-width: 0;
}
li:nth-child(4n) a { border-right-color: #c9c7c7; }
li:nth-last-child(-n+4) a { border-bottom-width: 1px; }

http://jsfiddle.net/e73EU/4/

Support

  • Pseudo-class nth-child: IE9+
  • Pseudo-class nth-last-child: IE9+

  • Just remember that if you are working with browsers including IE8, selectors like Nth-Child do not work...

  • Now included links with support details.

  • One option is to use these selectors with Jquery, so it will work in any browser!

  • Almost there, but it gets a square of the color of the background (white), due to the absence of color in the border.

  • @Zuul Complicou. I added a second option that solves this, but you need to know the number of grid lines (or write CSS for extra lines), and the content gets a little shifted up.

  • @Zuul I replaced my second solution with a better, more generic one.

Show 1 more comment

1

The simplest way to do this is by using box-Sizing and edges concentrated in both UL and Lis. See:

ul, li { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  width: 100%;
  overflow: hidden;
}

ul li {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  width: 25%;
  float: left;
}

Browser other questions tagged css css3 css-border

You are not signed in. Login or sign up in order to post.