CSS element loses effect after refreshing the page

Question

CSS element loses effect after refreshing the page

Navigation

#1 by (1 votes)

0

On one page I have the following structure:

Div that occupies 70% - another div that occupies 30%. I wanted to separate them by an image, thus eliminating the fixed line of separation. That image that separates the 2 div's loses its css position effects when I refresh the page, then if I go to the css and delete / re-paste its height, for example, it gets back to a good position.

body {
}

#divCampo {
    width: 70%;
    height: 100%;
}

#divCampo #campo{
	min-height:100%;

	background-size:cover;

    position: absolute;
    top:0%;
    left: 0%;
    width: 70%;
    height: 100%;
}

#divCesped {
    width: 30%;
    height: 100%;
    background-color: blue;
    position:absolute;
    top:0%;
    left: 70%;
}

#divCesped #cesped{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0%;
    
}

#separador {
    z-index: 500;
    position: absolute;
    top: 0%;
    left: 68%;
    width: 4%;
    height: 100%;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/siluetas.css" />

    <title>_</title>
</head>
<body>
    <form id="form1" runat="server">

        <div id="divCampo">
            <img id="campo" src="images/campo.png" />
        </div>

        <div id="divCesped">
            <img id="cesped" src="images/cesped2.png" />
        </div>

        <img id="separador" src="images/separador.png"/>

    </form>
</body>
</html>

html css asp.net

asked by Oren Diaz 13.10.2017 в 03:40

source

1 answer

How to add prefix in each file How can I get the data type of a "null" nil attribute in swift 3?

score 1 · Accepted Answer

I did not try it with the images, but the solution I propose is:

1) For the absolute to take effect, you need a div (wrapper) that encompasses the divs that have images with position absolute, and that have position relative. (Yes there are two, but I added one for the divisor).

2) The img is an inline type tag, it is as if you were typing text, to position it you have to put it inside a div or another block element also with position absolute. (But to the img you have to put it inline-block as a display)

Below I made the modifications to the code.

body {
}

#divCampo {
    width: 70%;
    height: 100%;
}

#divCampo #campo{
	min-height:100%;

	background-size:cover;

    position: absolute;
    top:0%;
    left: 0%;
    width: 70%;
    height: 100%;
}

#divCesped {
    width: 30%;
    height: 100%;
    background-color: blue;
    position:absolute;
    top:0%;
    left: 70%;
}

#divCesped #cesped{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0%;
    
}

#separador {
    
}

#wrapper{
    position: relative;
    top:0;
    left:0;
    width:100%;
}

#divSeparador{
    z-index: 500;
    position: absolute;
    top: 0%;
    left: 68%;
    width: 4%;
    height: 100%;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/siluetas.css" />

    <title>_</title>
</head>
<body>
    <form id="form1" runat="server">
      <div class="wrapper">    
        <div id="divCampo">
            <img id="campo" src="images/campo.png" />
        </div>

        <div id="divCesped">
            <img id="cesped" src="images/cesped2.png" />
        </div>
        <div id="divSeparador">
           <img id="separador" src="images/separador.png"/>
        </div>
      </div>
    </form>
</body>
</html>