Página de documentación técnica - Construye una página de documentación técnica

Español HTML-CSS
1

Tell us what’s happening: Hola a todos, tengo un problema con la ubicación de la navbar, no me la valida y sin embargo visualmente está ubicada en el lado izquierdo… Gracias de antemano por sus valiosas ayudas al respecto. :wink:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Technical documentation Python 3.11.8</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="main-doc">

    <nav id="navbar">
            <header>
                <ul>
                    <li><a class="nav-link" href="#Documentaci&oacute;n_de_Python_3.11.8">Documentación de Python 3.11.8</a></li>
                    <li><a class="nav-link" href="#Que_hay_de_nuevo_en_Python_3.11">Que hay de nuevo en Python 3.11</a></li>
                    <li><a class="nav-link" href="#Tutorial">Tutorial</a></li>
                    <li><a class="nav-link" href="#Referencia_de_la_biblioteca">Referencia de la biblioteca</a></li>
                    <li><a class="nav-link" href="#Referencia_del_Lenguaje">Referencia del Lenguaje</a></li>
                    <li><a class="nav-link" href="#Configuraci&oacute;n_y_uso_de_Python">Configuración y uso de Python</a></li>
                    <li><a class="nav-link" href="#Comos_(HOWTOs)_de_Python">Comos (HOWTOs) de Python</a></li>
                    <li><a class="nav-link" href="#Instalaci&oacute;n_de_m&oacute;dulos_de_Python">Instalación de módulos de Python</a></li>
                    <li><a class="nav-link" href="#Distribuir_m&oacute;dulos_de_Python">Distribuir módulos de Python</a></li>
                    <li><a class="nav-link" href="#Extender_e_incrustar">Extender e incrustar</a></li>
                    <li><a class="nav-link" href="#Python/C_API">Python/C API</a></li>
                    <li><a class="nav-link" href="#Preguntas_frecuentes">Preguntas frecuentes</a></li>
                </ul>
            </header>
        </nav>

    <section class="main-section" id="Documentaci&oacute;n_de_Python_3.11.8">
        <header>
        <h1>Documentación de Python 3.11.8</h1>
        </header>

    </section>


    <section class="main-section" id="Que_hay_de_nuevo_en_Python_3.11">
        <header>
            <h2>Que hay de nuevo en Python 3.11</h2>
        </header>

        <h3>Resumen – Aspectos destacados de la versión</h3>

        <p>Python 3.11 es entre un 10 y un 60 % más rápido que Python 3.10. En promedio, medimos un aumento de velocidad de 1.25x en el conjunto de pruebas de referencia estándar. Ver <a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-faster-cpython">CPython más rápido</a> para más detalles.</p>
        <ul>
            <p>Nuevas funciones de sintaxis:</p>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep654">PEP 654: Grupos de excepción y except*</a></li><br>
            <p>Nuevas funciones integradas:</p>

            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep678">PEP 678: Las excepciones se pueden enriquecer con notas</a></li><br>
            <p>Nuevos módulos de biblioteca estándar:</p>

            <li><a href="https://peps.python.org/pep-0680/">PEP 680</a>: <a href="https://docs.python.org/es/3.11/library/tomllib.html#module-tomllib">tomllib</a>: soporte para analizar <a href="https://toml.io/en/">TOML</a> en la biblioteca estándar</li><br>
            <p>Mejoras en el intérprete:</p>

            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep657">PEP 657: Ubicaciones de errores detallados en rastreos</a></li>
            <li>Nueva opción de línea de comando <a href="https://docs.python.org/es/3.11/using/cmdline.html#cmdoption-P">-P</a> y variable de entorno <a href="https://docs.python.org/es/3.11/using/cmdline.html#envvar-PYTHONSAFEPATH">PYTHONSAFEPATH</a> a <a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pythonsafepath">disable automatically prepending potentially unsafe paths</a> a sys.path</li><br>

            <p>Nuevas funciones de escritura:</p>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep646">PEP 646: Genéricos Variádicos</a></li>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep655">PEP 655: Marcado de elementos TypedDict individuales como requeridos o no requeridos</a></li>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep673">PEP 673: tipo Self</a></li>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep675">PEP 675: tipo de cadena literal arbitraria</a></li>
            <li><a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep681">PEP 681: Transformaciones de clases de datos</a></li><br>

            <p>Importantes depreciaciones, eliminaciones y restricciones:</p>
            <li><a href="https://peps.python.org/pep-0594/">PEP 594</a>:<a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep594"> Many legacy standard library modules have been deprecated y se eliminará en Python 3.13</li>
            <li><a href="https://peps.python.org/pep-0624/">PEP 624</a>:<a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep624"> Py_UNICODE encoder APIs have been removed</li>
            <li><a href="https://peps.python.org/pep-0670/">PEP 670</a>:<a href="https://docs.python.org/es/3.11/whatsnew/3.11.html#whatsnew311-pep670"> Macros converted to static inline functions</a></li>
        </ul>
    </section>

    <section class="main-section" id="Tutorial">
        <header>
            <h2>Tutorial</h2>
        </header>



<p>Python es un lenguaje de programación potente y fácil de aprender. Tiene estructuras de datos de alto nivel eficientes y un simple pero efectivo sistema de programación orientado a objetos. La elegante sintaxis de Python y su tipado dinámico, junto a su naturaleza interpretada lo convierten en un lenguaje ideal para scripting y desarrollo rápido de aplicaciones en muchas áreas, para la mayoría de plataformas.

El intérprete de Python y la extensa librería estándar se encuentran disponibles libremente en código fuente y de forma binaria para la mayoría de las plataformas desde la Web de Python, <a href="https://www.python.org/">https://www.python.org/</a>, y se pueden distribuir libremente. El mismo sitio también contiene distribuciones y referencias a muchos módulos libres de Python de terceros, programas, herramientas y documentación adicional.</p>
<p>El intérprete de Python es fácilmente extensible con funciones y tipos de datos implementados en C o C++ (u otros lenguajes que permitan ser llamados desde C). Python también es apropiado como un lenguaje para extender aplicaciones modificables.

Este tutorial introduce al lector informalmente a los conceptos básicos y las funcionalidades del lenguaje de programación Python y a su sistema. Ayuda a tener un interprete de Python accesible para una experiencia práctica, todos los ejemplos son auto-contenidos, permitiendo utilizar el tutorial sin conexión.</p>
<p>El siguiente código muestra cómo imprimir "Hola Mundo" en python</p>
    <code>
        print("Hola Mundo")
    </code>
    </section>


    <section class="main-section" id="Referencia_de_la_biblioteca">
        <header>
            <h2>Referencia de la biblioteca</h2>
        </header>

        <code>
            print("Hola Mundo")
        </code>
        </header>
        </nav>
    </section>


    <section class="main-section" id="Referencia_del_Lenguaje">
        <header>
            <h2>Referencia del Lenguaje</h2>
        </header>

        <code>
            print("Hola Mundo")
        </code>
        </header>
        </nav>
        </section>


    <section class="main-section" id="Configuraci&oacute;n_y_uso_de_Python">
        <header>
            <h2>Configuración y uso de Python</h2>
        </header>

        <code>
            print("Hola Mundo")
        </code>
        </header>
        </nav>
        </section>


        <section class="main-section" id="Comos_(HOWTOs)_de_Python">
        <header>
            <h2>Comos (HOWTOs) de Python</h2>
        </header>
        <code>
            print("Hola Mundo")
        </code>
        </header>
        </nav>
        </section>


        <section class="main-section" id="Instalaci&oacute;n_de_m&oacute;dulos_de_Python">
        <header>
            <h2>Instalación de módulos de Python</h2>
        </header>
        </section>


        <section class="main-section" id="Distribuir_m&oacute;dulos_de_Python">
        <header>
            <h2>Distribuir módulos de Python</h2>
        </header>
        </section>


        <section class="main-section" id="Extender_e_incrustar">
        <header>
            <h2>Extender e incrustar</h2>
        </header>
        </section>


        <section class="main-section" id="Python/C_API">
        <header>
            <h2>Python/C API</h2>
        </header>
        </section>


        <section class="main-section" id="Preguntas_frecuentes">
        <header>
            <h2>Preguntas frecuentes</h2>
        </header>
        </section>
    </main>
</body>
</html>

ADVERTENCIA

El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.

Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.

Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.

Reemplaza estas dos oraciones con tu código copiado.
Por favor, deja la línea ``` arriba y la línea ``` abajo,
porque permiten que tu código formatee correctamente en el post.

Your browser information:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 GLS/100.10.9745.98

Challenge Information:

Página de documentación técnica - Construye una página de documentación técnica

2 
/* Estilos para la barra de navegación */
#navbar {
    position: fixed; /* Fija la barra de navegación en su lugar */
    left: 0;
    top: 0;
    height: 100%; /* O ajusta la altura según necesites */
    width: 200px; /* O ajusta el ancho según necesites */
    background-color: #317fa8;
    padding-top: 20px;
    z-index: 1000; /* Asegura que la barra de navegación esté por encima del contenido */
}

#navbar ul {
    list-style-type: none;
    padding: 0;
}

#navbar ul li {
    margin-bottom: 10px;
}

#navbar ul li a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
}

/* Estilos para el contenido */
#main-doc {
    margin-left: 220px; /* Ajusta según el ancho de la barra de navegación */
    padding: 20px;
}

/* Media query para hacer el diseño más adaptable */
@media screen and (max-width: 768px) {
    #navbar {
        width: 100%; /* Hace que la barra de navegación ocupe todo el ancho */
        height: auto; /* Altura automática para ajustarse al contenido */
        position: static; /* Quita la posición fija para que la barra de navegación fluya con el contenido */
    }

    #main-doc {
        margin-left: 0; /* Quita el margen izquierdo para ocupar todo el ancho */
    }
}
3

la prueba que no pasa tu código es esta

Tu #navbar siempre debe estar en el borde izquierdo de la ventana.

tu barra debe estar fija del lado izquierdo, aunque bajemos al final de la página la barra debe ser visible, siemre
y como dices, si se ve del lado izquierdo,

image
image725×247 15.3 KB

pero solo cuando la ventana está grande, si hacemos la ventana más chica, la barra ya no está fija del lado izquierdo (se queda arriba)
image
image758×214 10.2 KB

tu codigo css hace que tu nav bar cambie cuando la ventana cambia de tamaño y esto afecta en esa prueba

1 Like
4

Muchas gracias nuevamente Francisco, seguiré intentándolo con la sugerencia que mencionas… :+1:

1 Like
5

Listo!!! Muchísimas gracias, he cambiado el valor de position en @media y se solucionó!!! :+1: :pray:

1 Like