I can not change the gros of the div "article"

Question

I can not change the gros of the div "article"

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Very good to all, I do not know why but I can not change the thickness of the div "article" (red color).

It is the last layer, therefore it should be able to change the size, but it is as if the div "article" had another div, and the div "article" could not be bigger than the div from outside.

HTML attachment:

<!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 attached:

    /* 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;

}

Image attached:

In advance, thank you very much.

html css

asked by Alex Iglesias 24.02.2018 в 11:20

source

2 answers

0

Your problem is that you need to put a unit of measure or percentage to your width, so the browser does not know how to interpret what the number 20 means by itself.

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

Your modified example:

/* 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>

answered by 25.02.2018 в 17:12

Send succes or error messages in c # mvc How to get TextBlock from an image using TextRecognizer vertically

score 0 · Accepted Answer

0

Try putting <div id="article"> , since article is another HTML element and it may not leave you for that topic, put the article you have as a div with an id and try again. I hope I have helped you.

answered by 24.02.2018 / 11:37

source