1

Muy buenas a todos, no sé porqué pero no puedo cambiar el grosor del div "article" (color rojo).

Es la última capa, por lo tanto debería poder cambiar el tamaño, pero es como si fuera del div "article" hubiera otro div, y el div "article" no pudiera ser más grande que el div de fuera.

HTML adjunto:

<!DOCTYPE html>

    <header>
        <h1>Webs Solution Marianao</h1>
    </header>

    <footer>
        <h2>Dissenyat per: Institut Marianao - 2018 ©</h2>
    </footer>

    <nav>
            <ul>
                <li id="li1">L'Empresa</li>
                <li id="li2">Registre</li>
                <li id="li3">Video</li>
            </ul>
    </nav>

    <article id="borde">             
        <section id="video">
            <video src="./media/UF2_Exer17_vídeo.webm"></video>         
        </section>
        <section id="formulario">Formulario
        </section>            
    </article>
</body>

CSS adjunto:

    /* PREDEFINICIO */

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #00385d;

}

/* COS */

h1 {
    background-color: #000764;
    color: #9a66c7;
    font-size:50px;
    padding: 0.5%;

}

ul {
    background-color: #333795;
    border-bottom: 5px solid black;
    width: 100%;

}

li {
    display: inline-block;
    padding-right: 3%;
    font-size: 35px;
    color: white;
    border-right: 5px solid black;
    border-radius: 50px;
}
#li1 {
    margin-left: 20px ;
}

#li2 {
    margin-left: 2%;
}

#li3 {
    margin-left: 2%;
}

article {
    background-color: red;
    height: 70%;
    width: 20;
}

video {
    width: 25%;
    height: 30%;
}

footer {
    background-color: #333795;
    text-shadow: 1px 1px white;
    width: 100%;
    position: absolute;
    bottom: 0%;
    text-align: center;

}

Imagen adjunta:

introducir la descripción de la imagen aquí

De antemano, muchísimas gracias.

2 respuestas 2

0

Prueba a poner <div id="article">, ya que articlees otro elemento HTML y puede que no te deje por ese tema, pon el article que tienes como un div con un id y prueba de nuevo. Espero haberte ayudado.

4
  • Muchas gracias tío, no era exactamente lo que me dijiste, pero me ha hecho abrir los ojos. ¡Un saludo compañero! Commented el 24 feb. 2018 a las 10:48
  • ¡Me alegro de que te haya ayudado un poco! ¡Un saludo!
    – user75193
    Commented el 24 feb. 2018 a las 10:54
  • En realidad no debería de haber algún problema con el nombre de la etiqueta y de hecho la w3c recomienda más el uso de etiquetas semánticas en vez de usar Div para todo. @AlexIglesias sé que has aceptado esta respuesta como la correcta, pero no lo es del todo, de hecho pensaría más que la mejor respuesta es la de Francisco Romero, que sugiere que el problema es el porcentaje en la medida. Commented el 26 feb. 2018 a las 15:05
  • Tiene razón @EdgarGutiérrez , la respuesta más acertada es la de Francisco Romero, debes establecer la medida del div. Fallo tonto pero que hay que tener muy en cuenta, un saludo!
    – user75193
    Commented el 27 feb. 2018 a las 16:20
0

Tu problema es que te falta poner una unidad de medida o porcentaje a tu anchura, por lo que el navegador no sabe interpretar que significa el número 20 por si solo.

article {
    background-color: red;
    height: 70%;
    width: 20%; //Le tendrías que agregar la unidad de medida
}

Tu ejemplo modificado:

/* PREDEFINICIO */

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #00385d;

}

/* COS */

h1 {
    background-color: #000764;
    color: #9a66c7;
    font-size:50px;
    padding: 0.5%;

}

ul {
    background-color: #333795;
    border-bottom: 5px solid black;
    width: 100%;

}

li {
    display: inline-block;
    padding-right: 3%;
    font-size: 35px;
    color: white;
    border-right: 5px solid black;
    border-radius: 50px;
}
#li1 {
    margin-left: 20px ;
}

#li2 {
    margin-left: 2%;
}

#li3 {
    margin-left: 2%;
}

article {
    background-color: red;
    height: 70%;
    width: 20%;
}

video {
    width: 25%;
    height: 30%;
}

footer {
    background-color: #333795;
    text-shadow: 1px 1px white;
    width: 100%;
    position: absolute;
    bottom: 0%;
    text-align: center;

}
<header>
        <h1>Webs Solution Marianao</h1>
    </header>

    <footer>
        <h2>Dissenyat per: Institut Marianao - 2018 ©</h2>
    </footer>

    <nav>
            <ul>
                <li id="li1">L'Empresa</li>
                <li id="li2">Registre</li>
                <li id="li3">Video</li>
            </ul>
    </nav>

    <article id="borde">             
        <section id="video">
            <video src="./media/UF2_Exer17_vídeo.webm"></video>         
        </section>
        <section id="formulario">Formulario
        </section>            
    </article>

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.