Hola a todos de nuevo, queria reabrir de nuevo este tema porque me ha surgido una complicacion, supongo que sera facilito, si veis la foto del ejercicio que me mandaron hacer (
http://prntscr.com/7yc3fk) y este que he hecho yo:
http://prntscr.com/7zrpi6
me sale el fallo ese de los puntos suspensivos y la cosa empeora cuando lo la pantalla se adapta a la de un movil y tablet:
http://prntscr.com/7zrqra
ya que los puntos suspensivos en el Article 5-2 desaparecen y en el 5-3 estan en la primera linea
segui el ejemplo que me pusisteis (
http://www.w3.org/Style/Examples/007/leaders.en.html) y consegui hacer casi todo pero me falla eso. mi codigo es este:
Código HTML:
<div class="container">
<div class="grid-d-12">
<h1>Table Of Contents</h1>
<ol>
<ul><!-- chapter 1 list-->
<li><span><strong>Chapter 1: </strong>Chapter Title</span><span>23</span></li>
<ul id="art">
<li><span><strong>Article 1-1:</strong> Article Title</span>
<span>23</span></li>
<li><span><strong>Article 1-2:</strong> Article Title</span>
<span>23</span></li>
<li><span><strong>Article 1-3:</strong> Article Title</span>
<span>23</span></li>
<li><span><strong>Article 1-4:</strong> Article Title</span>
<span>23</span></li>
</ul>
</ul><!-- chapter 1 list end-->
<ul>
<li><span><strong>Chapter 2: </strong>Chapter Title</span><span>23</span></li>
<li><span><strong>Chapter 3: </strong>Chapter Title</span><span>23</span></li>
<li><span><strong>Chapter 4: </strong>Chapter Title</span><span>23</span></li>
</ul>
<ul> <!-- chapter 5 list-->
<li><span><strong>Chapter 5: </strong>Chapter Title</span><span>23</span></li>
<ul id="art"> <!-- article list-->
<li><span><strong>Article 5-1:</strong> Article Title</span><span>23</span></li>
<li><span><strong>Article 5-2:</strong> Article Title Article Title Article Title Article Title Article Title Title Article Title Article Title Article Title Article Title</span><span>23</span></li>
<li><span><strong>Article 5-3:</strong> Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title Article Title</span><span>23</span></li>
<ul id="lis">
<li><span><strong>Listing 5-3-1:</strong> Listing Title</span><span>23</span></li>
<li><span><strong>Listing 5-3-2:</strong> Listing Title</span><span>23</span></li>
<li><span><strong>Listing 5-3-3:</strong> Listing Title</span><span>23</span></li>
<ul id="tab">
<li><span><strong>Table 5-3-4-1:</strong> Table Title</span><span>23</span></li>
<li><span><strong>Table 5-3-4-2:</strong> Table Title</span><span>23</span></li>
<li><span><strong>Table 5-3-4-3:</strong> Table Title</span><span>23</span></li>
<li><span><strong>Table 5-3-4-4:</strong> Table Title</span><span>23</span></li>
</ul>
</ul>
</ul><!-- article list end-->
<ul id="art">
<li><span><strong>Article 5-4:</strong> Article Title</span><span>23</span></li>
</ul>
</ul><!-- chapter 5 list end-->
<ul>
<li><span><strong>Chapter 6: </strong>Chapter Title</span><span>23</span></li>
</ul>
</ol>
</div>
</div> y el css esta asi:
Código HTML:
/* ==========================================================================
Author's custom styles
========================================================================== */
.container-fluid {
max-width:90%;
margin:0 5%;
}
ul{
padding: 10px 0;
}
ul, li{
list-style: none;
max-width: 100%;
padding: 0;
overflow-x: hidden;
}
ul li:before{
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}
ul li:first-child{
padding-top: 10px;
}
ul li:last-child{
padding-bottom: 10px;
}
ul span:first-child {
padding-right: 0.33em;
background: white
}
ul span + span {
float: right;
padding-left: 0.33em;
background: white
}
#art{
padding-left: 40px;
}
#lis{
padding-left: 60px;
}
#tab{
padding-left: 80px;
}
que es lo que podria hacer?