[SOLUCIONADO] Alguien me explica que me piden exactamente?

alexkurban · #1 (**permalink**) 29/07/2015, 04:17

Hola a todos, estoy intentando entrar en una empresa para programador web principiante y una de las cosas que me han mandado hacer para ver si paso el tipo test es esto:

http://prntscr.com/7yc3fk

no tengo ni pajolera idea de que es esto, osea, si me mandas un psd y me dices que quieres esto yo pues lo entiendo pero aqui estoy perdido. Aparte tengo que hacerlo responsivo. Me podriais dar alguna idea?

muchas gracias a todos

AngelKrak · #2 (**permalink**) 29/07/2015, 08:28

por lo que yo entiendo quieren que hagas una tabla con articles y titles >_<

algo asi quizas pero mas modificado >_<

alexkurban · #3 (**permalink**) 29/07/2015, 09:14

sigo sin entenderlo, es posible en html y que encima sea responsivo?

LazyProgrammer · #4 (**permalink**) 29/07/2015, 11:33

Buenas Alex,

Lo que yo entiendo es que quieren que escribas la programación para ese indice. Cómo harías eso en html y css3?

Cierto es que no te han dado ningún tipo de explicación, pero teniendo en cuenta que es una empresa para programación web...

En la web de bootstrap hay unas buenas explicaciones de como realizar diseños responsive. http://getbootstrap.com

ya nos cuentas.

Saludos!

EDITADO: No se si habrán cambiado el enlace que pusiste, pero yo he visto un indice tipo word, nada de tablas...

alexkurban · #5 (**permalink**) 29/07/2015, 14:00

hola, el enlace esta bien, solo me han dicho que haga eso y el diseño sea responsive, lo que no tengo ni idea es de que tengo que hacer concretamente, nose si hacer una landing page con un menu de ese estilo o que concretamente.

Rafael · #6 (**permalink**) 29/07/2015, 17:21

¿Y si les preguntas a ellos?

Yo lo que veo es una tabla de contenidos con listas anidadas.

Lo que no recuerdo pero creo que hay una manera de hacer es que los puntos que unen la página con el resto sean responsive.

xfxstudios · #7 (**permalink**) 29/07/2015, 19:43

amigo eso que te estan pidiendo es una simple lista, claro aqui una muestra, lo que tienes es que adaptar, es decir, que la lista la puedes crear desde un xml, array, mysql o lo que sea:

Código HTML:

Ver original<ul>
<li>Primer titulo</li>
    <ul>
        <li>Base 1</li>
        <li>Base 2</li>
    </ul>
<li>Segundo titulo</li>
    <ul>
        <li>Base 1</li>
        <li>Base 2</li>
        <li>Base 3</li>
        <li>Base 4</li>
    </ul>
 <li>Tercer Titulo</li>
    <ul>
        <li>Capitulo 1</li>
        <li>Capitulo 2</li>
        <li>Capitulo 3</li>
            <ul>
                <li>Sub-capitulo 3-A</li>
                <li>Sub-Capitulo 3-B</li>
            </ul>
    </ul>
<li>Cuarto Titulo</li>
 
 
</ul>

alexkurban · #8 (**permalink**) 30/07/2015, 12:18

Cita:

Iniciado por Rafael

¿Y si les preguntas a ellos?

Yo lo que veo es una tabla de contenidos con listas anidadas.

Lo que no recuerdo pero creo que hay una manera de hacer es que los puntos que unen la página con el resto sean responsive.

creo que es esto lo quem e dices;
http://www.w3.org/Style/Examples/007/leaders.en.html

alexkurban · #9 (**permalink**) 30/07/2015, 12:21

Cita:

Iniciado por xfxstudios

amigo eso que te estan pidiendo es una simple lista, claro aqui una muestra, lo que tienes es que adaptar, es decir, que la lista la puedes crear desde un xml, array, mysql o lo que sea:

Código HTML:

Ver original<ul>
<li>Primer titulo</li>
    <ul>
        <li>Base 1</li>
        <li>Base 2</li>
    </ul>
<li>Segundo titulo</li>
    <ul>
        <li>Base 1</li>
        <li>Base 2</li>
        <li>Base 3</li>
        <li>Base 4</li>
    </ul>
 <li>Tercer Titulo</li>
    <ul>
        <li>Capitulo 1</li>
        <li>Capitulo 2</li>
        <li>Capitulo 3</li>
            <ul>
                <li>Sub-capitulo 3-A</li>
                <li>Sub-Capitulo 3-B</li>
            </ul>
    </ul>
<li>Cuarto Titulo</li>
 
 
</ul>

no puedo creer que sea tan facil hacer eso, se lo preguntare mañana de todas formas al hombre que me lo ha mandado. el tema es que hacer eso a puro html y solo añadirle unos cuantos estilos para que salga asi vale pero... hacer eso responsivo? que sentido tiene? para que vea que se usar las @queries?

xfxstudios · #10 (**permalink**) 30/07/2015, 19:28

pues si lo puedes hacer responsivo con css y jquery para que quede tipo menu desplegable, que al dar clic en un capitulo te muestre los sub-capitulos de estos o algo asi

alexkurban · #11 (**permalink**) 31/07/2015, 09:34

pues como me acaban de informar es tal cual, osea hacer lo de la imagen y que el diseño sea responsivo... no le veo ningun sentido pero bueno...

alexkurban · #12 (**permalink**) 01/08/2015, 17:03

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?

alexkurban · #13 (**permalink**) 03/08/2015, 04:48

solucionado de nuevo:

para que los puntos suspensivos vayan delante habia que cambiar el before por el after:

Código HTML:

ul li:[U]after[/U]{
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . . "
}

y agregar estas dos lineas:

Código HTML:

ul span + span {
    float: right;
    padding-left: 0.33em;
    background: white;
    [U]position: relative;
    z-index: 1;[/U]
}