0

Doy un poco de contexto: Tengo una página html (no responsive, pero no nos centremos en eso) que pertenece a un curso que hice el año pasado. En ella, un elemento cuyo tamaño es FIJO (width:940px; height:70px;). Dentro de él, sus elementos

  • tienen también tamaño fijo (width: 187px; height: 70px;). Se produce un error: Si en el código los items de la lista están separados por LF + CR (Enter), el navegador ubica al último elemento debajo de los demás, como si no entrara.

    @charset "utf-8";
    /*Google Font: font-family: 'PT Sans', sans-serif;*/
    @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
    /* CSS Document */
    
    body {
        font-family:'PT Sans', sans-serif;
        background-image:linear-gradient( #ffcfa2fb,#4c3d2efb);
        margin: 0px;
        background-attachment: fixed;
        }
    
    #contenedor {
        width:960px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    
        
        }
    
    header {
        height:290px;
        }
    
    h1 {
        margin:0 0 0 40px;
        color:#020103;
        font-family: 'PT Sans', sans-serif;
        font-weight: 700;
        font-size:3rem;
        text-shadow: 3px 3px 8px #e66e0b8d;
        }
    
    a {
        color:#4b9be1;
        text-decoration:none;
        }
    #botonera_principal {
        width:940px;
        height:70px;
        border-left: 20px solid black;
        background-color:#050505;
        }
    
        #botonera_principal:hover{
        border-left: 20px solid #fe8d0c;
        }
    
    #botonera_principal ul {
        width:940px;
        height:70px;
        margin:0;
        padding:0;
        list-style-type:none;}
    
    #botonera_principal ul li {
        display: inline;
        width: 187px;
        height: 70px;
    }
    
    #botonera_principal ul li a {
        display: inline-block;
        color:#f8f8f8;
        text-decoration:none;
        text-align: center;
        border-right:1px dotted #ffffff;
        width: 187px;
        height: 70px;
        line-height: 70px;
        
        }
        
    #botonera_principal ul li a:hover {
        background-color:#e8be64;
        }
        
    #marca {
        background-image:url(imagenes/fondo_marca.jpg);
        height:200px;
        padding-top:27px;
        border-left:solid 20px black;
    
        }
        #marca:hover{
        border-left:solid 20px #d23e0d;
    
        }
    #contenido {
        padding:20px;
        background-color:#ffffff70;
        border-left: 20px solid black;
        }
    #contenido:hover{
    border-left: 20px solid #b5fcfb;    
    }
    
    #ejer_1, #ejer_2, #ejer_3, #ejer_4 {
        margin: 10px;
        padding: 2%;
    }
    #ejer_1 {
        background-color: #ffffcc;
    }
    #ejer_2 {
        background-color: #e6ffcc;
    }
    #ejer_3 {
        background-color: #ccf2ff;
    }
    #ejer_4 {
        background-color: #ffccff;
    }
    
    .ajustar {
        width: 100%;
    }
    
    h2 {
        color:#0a0707;}
    
    footer {
        background-color:#ffffff;
        padding:20px;
        border-left: 20px solid black;
        }
    footer:hover{
        border-left: 20px solid #fcf94bfb;
    }
    
    footer a {
        color:#FFF;
        font-weight:bold;}
    <!DOCTYPE html >
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Diseño y Programación WEB</title>
    <link href="styles.css" rel="stylesheet"/>
    </head>
    
    <body>
    <section id="contenedor">
        <header>
            <nav id="botonera_principal">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="catalogo.php">Catálogo</a></li>
                    <li><a href="noticias.php">Noticias</a></li>
                    <li><a href="clientes.php">Clientes</a></li>
                    <li><a href="contacto.php">Contáctenos</a></li>
                </ul>
            </nav>
            <div id="marca">
                <h1>Diseño y Programación WEB II<br/>IFEE</h1>
            </div>
        </header>
        <section id="contenido">
        <h2>Introducción a PHP</h2>
        <div id="ejer_1">
            <h4>
                <?php
                echo "Qué es y para qué sirve PHP?"."<br/>";
                ?>
            </h4>
    
            <p>
                <?php
                echo "PHP es un lenguaje de programación de código abierto del lado del servidor que se utiliza principalmente para crear páginas web dinámicas."."<br/>";
                ?>
            </p>
            <p>
                <?php
                 echo "La abreviatura nació originariamente de “Personal Home Page Tools”, aunque hoy en día se ha convertido en el acrónimo recursivo para “PHP: Hypertext Preprocessor”."."<br/>";
                ?>
            </p>
        </div>
        <div id="ejer_2">
            <?php
            echo "TRABAJO FINAL"."<br/>";
            echo "INTEGRADOR"."<br/>";
            echo "PHP Y MySQL"."<br/>";
            ?>
    
        </div>
        <div id="ejer_3">
            <?php
             $varint=76; $varstr="Esto es un dato tipo \"String\" "; $varbool=TRUE;
    
             echo 'Los siguientes son los valores de las variables de nombre $varint, $varstr y $varbool:'."<br/><br/>";
    
             print $varint."<br/>".$varstr."<br/>".$varbool;
            ?>
        </div>
        <div id="ejer_4">
            <?php
            $primint=45;
            $segint=7;
            $terint=3;
            //operación matemática:
            $oper=$primint*$segint/$terint;
    
            print $primint."<br/>";
            print $segint."<br/>";
            print $terint."<br/>";
    
            echo "$primint * $segint / $terint=$oper";
            ?>
        </div>
        </section>
    
    <footer>
    <p>Profesora: CH</p></footer>
    </footer>
    </section>
    </body>
    </html>

    Pero si en el código todos los items están escritos uno junto al otro, el navegador muestra la barra de navegación como fue pensada(todos los items entran en ella)

    @charset "utf-8";
    /*Google Font: font-family: 'PT Sans', sans-serif;*/
    @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
    /* CSS Document */
    
    body {
        font-family:'PT Sans', sans-serif;
        background-image:linear-gradient( #ffcfa2fb,#4c3d2efb);
        margin: 0px;
        background-attachment: fixed;
        }
    
    #contenedor {
        width:960px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    
        
        }
    
    header {
        height:290px;
        }
    
    h1 {
        margin:0 0 0 40px;
        color:#020103;
        font-family: 'PT Sans', sans-serif;
        font-weight: 700;
        font-size:3rem;
        text-shadow: 3px 3px 8px #e66e0b8d;
        }
    
    a {
        color:#4b9be1;
        text-decoration:none;
        }
    #botonera_principal {
        width:940px;
        height:70px;
        border-left: 20px solid black;
        background-color:#050505;
        }
    
        #botonera_principal:hover{
        border-left: 20px solid #fe8d0c;
        }
    
    #botonera_principal ul {
        width:940px;
        height:70px;
        margin:0;
        padding:0;
        list-style-type:none;}
    
    #botonera_principal ul li {
        display: inline;
        width: 187px;
        height: 70px;
    }
    
    #botonera_principal ul li a {
        display: inline-block;
        color:#f8f8f8;
        text-decoration:none;
        text-align: center;
        border-right:1px dotted #ffffff;
        width: 187px;
        height: 70px;
        line-height: 70px;
        
        }
        
    #botonera_principal ul li a:hover {
        background-color:#e8be64;
        }
        
    #marca {
        background-image:url(imagenes/fondo_marca.jpg);
        height:200px;
        padding-top:27px;
        border-left:solid 20px black;
    
        }
        #marca:hover{
        border-left:solid 20px #d23e0d;
    
        }
    #contenido {
        padding:20px;
        background-color:#ffffff70;
        border-left: 20px solid black;
        }
    #contenido:hover{
    border-left: 20px solid #b5fcfb;    
    }
    
    #ejer_1, #ejer_2, #ejer_3, #ejer_4 {
        margin: 10px;
        padding: 2%;
    }
    #ejer_1 {
        background-color: #ffffcc;
    }
    #ejer_2 {
        background-color: #e6ffcc;
    }
    #ejer_3 {
        background-color: #ccf2ff;
    }
    #ejer_4 {
        background-color: #ffccff;
    }
    
    .ajustar {
        width: 100%;
    }
    
    h2 {
        color:#0a0707;}
    
    footer {
        background-color:#ffffff;
        padding:20px;
        border-left: 20px solid black;
        }
    footer:hover{
        border-left: 20px solid #fcf94bfb;
    }
    
    footer a {
        color:#FFF;
        font-weight:bold;}
    <!DOCTYPE html >
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Diseño y Programación WEB</title>
    <link href="styles.css" rel="stylesheet"/>
    </head>
    
    <body>
    <section id="contenedor">
        <header>
            <nav id="botonera_principal">
                <ul>
                    <li><a href="index.php">Home</a></li><li><a href="catalogo.php">Catálogo</a></li><li><a href="noticias.php">Noticias</a></li><li><a href="clientes.php">Clientes</a></li><li><a href="contacto.php">Contáctenos</a></li>
                </ul>
            </nav>
            <div id="marca">
                <h1>Diseño y Programación WEB II<br/>IFEE</h1>
            </div>
        </header>
        <section id="contenido">
        <h2>Introducción a PHP</h2>
        <div id="ejer_1">
            <h4>
                <?php
                echo "Qué es y para qué sirve PHP?"."<br/>";
                ?>
            </h4>
    
            <p>
                <?php
                echo "PHP es un lenguaje de programación de código abierto del lado del servidor que se utiliza principalmente para crear páginas web dinámicas."."<br/>";
                ?>
            </p>
            <p>
                <?php
                 echo "La abreviatura nació originariamente de “Personal Home Page Tools”, aunque hoy en día se ha convertido en el acrónimo recursivo para “PHP: Hypertext Preprocessor”."."<br/>";
                ?>
            </p>
        </div>
        <div id="ejer_2">
            <?php
            echo "TRABAJO FINAL"."<br/>";
            echo "INTEGRADOR"."<br/>";
            echo "PHP Y MySQL"."<br/>";
            ?>
    
        </div>
        <div id="ejer_3">
            <?php
             $varint=76; $varstr="Esto es un dato tipo \"String\" "; $varbool=TRUE;
    
             echo 'Los siguientes son los valores de las variables de nombre $varint, $varstr y $varbool:'."<br/><br/>";
    
             print $varint."<br/>".$varstr."<br/>".$varbool;
            ?>
        </div>
        <div id="ejer_4">
            <?php
            $primint=45;
            $segint=7;
            $terint=3;
            //operación matemática:
            $oper=$primint*$segint/$terint;
    
            print $primint."<br/>";
            print $segint."<br/>";
            print $terint."<br/>";
    
            echo "$primint * $segint / $terint=$oper";
            ?>
        </div>
        </section>
    
    <footer>
    <p>Profesora: CH</p></footer>
    </footer>
    </section>
    </body>
    </html>

    Hay muchas cosas que no entiendo todavía, pero sería correcto decir que los caracteres CR+FL (Enter) tienen un tamaño en pixeles? Hay otra razón por la que se produce esto? Gracias por tomarse el tiempo de leer.

    1 respuesta 1

    1

    después del contactenos , prueba con el tag

    <br/>
    

    , este funciona como el enter

    sino en el siguiente tag dentro del class, agrega "sm-3", también te puede ayudar

    ambos te sirven para hacer separación de párrafos

    saludos

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.