DIV Simply Fading?

Navigation
-1

I was setting up a website for a minecraft server. But I came across something very strange. I use Brackets to create HTML pages, and so I use the live preview tool. By putting a button in HTML and modifying it in CSS, everything was ok in the live preview. However, when you press F5 the button simply disappears from the page and from the site's own HTML. I'll send the HTML file and the CSS.

index.html 

<html lang="pt-br">

    <head>

        <!-- Definindo charset -->
        <meta charset="utf-8">

        <!-- Linkando CSS -->
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
        <link rel="stylesheet" type="text/css" href="CSS/index.css">

        <!-- Titulo da pagina -->
        <title>Bem Vindo - CraftDraw</title>

    </head>

    <body>

        <!-- Imagem -->
        <div id="imagem">

        <img src="img/minecraft.png" />

        </div>

        <!-- Menu -->
        <div id="menu">

            <iframe src="template/menu.html" width="100%" height="12%" frameborder="0" />

        </div>

        <!-- Botão VIP -->
        <div id="vip">

            <p>

                <a href="vip.html">
                    Compre Seu VIP
                </a>

            </p>

        </div>

</body>

index.css 

/* Imagem */
#imagem img {
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Menu */
#menu iframe {
    opacity: 0.5;
}

/* Botão VIP */
#vip p a {
    position: absolute;
    top: 80%;
    left: 5%;
    z-index: 3;
    list-style-type: none;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 15px;
    border-style: double;
    border-color: bisque;
    font-family: "Trebucher MS", Arial, Helvetica, sans-serif;
    font-size: 32px;
    text-decoration: none;
    color: white;
}
#vip p a:hover {
    background-color: #474646;
    border-style: dashed;
    border-color: aquamarine;
    color: aqua;
}

style.css 

/* Body padrão */
body {
    background-color: black;
    margin: 0;
}

/* Menu */
#menu iframe {
    position: absolute;
    top: 0;
    z-index: 100;
}

The result is this:

    
asked by anonymous 11.04.2016 / 02:45

1 answer

0

The problem is that you are not closing the iframe properly, the browser is ignoring the slash you placed at the end of the element, and you are considering the rest of the page as a continuation of your content. Placing the slash at the end of the element is only considered valid on tags that do not need to be closed.

Reference and more information: link and link

    
11.04.2016 / 03:20
input data freestanding javascript Html does not render radio button value