-1
/* Portal Aluno */
#header-menu{
position: relative;
margin: 0 auto;
border:0px;
bottom: 800px;
left: 10%;
}
#C-icon{
position:relative;
border:0px;
margin: 0px;
padding: 0;
right: 71%;
top: 7%;
}
#fb-icon{
position: relative;
border:0px;
margin-left: 50px;
padding: 0;
right: 80%;
top: 9%;
}
#ambiente-icon{
position: relative;
border:0px;
margin-right:100px;
margin-left: 0;
padding: 0;
left: -15%;
bottom: 41%;
}
#youtube-icon{
position: relative;
border:0px;
margin-right: 0;
padding: 0;
bottom: 41%;
right: 20%;
}
#sair-icon{
position: relative;
border:0px;
margin-left:0;
padding: 0;
bottom: 41%;
left: 55%;
}
#header-icons li {
border:0px;
list-style-type: none;
display: inline-block;
position: relative;
bottom: 137px;
left: 130px;
}
/*#header-icons li{
display: inline-block;
}*/
@keyframes space01 {
/* line 163, ../scss/main.scss */
0% {
bottom: 720px;
}
/* line 166, ../scss/main.scss */
50% {
bottom: 751px;
}
/* line 169, ../scss/main.scss */
100% {
bottom: 720px;
}
}
#space{
position: relative;
bottom: 170px;
border:0px;
}
#space-ship{
position: relative;
border:0px;
margin: 0;
padding: 0;
bottom: 750px;
left: 150px;
animation-name:space01;
animation-duration: 2.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 20%;
height: 20%;
}
.menu-a{
padding: 0;
border:0px;
margin-right: 0;
position: relative;
right:0
}
#fred-portal{
position: relative;
margin: 0;
border:0px;
padding: 0;
bottom: 780px;
left: 500px;
width: 10%;
height: 10%;
}
#owl-portal{
position: relative;
margin: 0;
border:0px;
padding: 0;
bottom: 850px;
left: 950px;
width: 10%;
height: 10%;
}
#portal-sun{
position: relative;
border:0px;
width: 20%;
height: 20%;
bottom: 950px;
left: 550px;
}For content organization I used Ivs, but when repositioning elements via css, when using Chrome and mozzila Inspect I realized that Divs are totally confusing, did not follow their content occupying spaces nonexistent while the content is in a totally different place. Has anyone ever had a similar problem?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Portal do Aluno</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/icon_conecturma.png" >
</head>
<body>
<div id="portal_bg" >
<img src="img/tela_ambiente-do-aluno.png" class="img-fluid" alt="Responsive image">
<div id="header-menu">
<div>
<header>
<img src="img/header-menu-1.png" class="img-fluid" alt="Responsive image">
<ul id="header-icons">
<li>
<a class="menu-a" href="#">
<img src="img/C-icon.png" id="C-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/ambiente-icon.png" id="ambiente-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/facebook-icon.png" id="fb-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/youtube-icon.png" id="youtube-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/sair-icon.png" id="sair-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
</ul>
</header>
</div>
</div>
<div id="owl-image">
<img src="img/owl-portal.png" id="owl-portal">
</div>
<div id="space" >
<img src="img/portal-sun.png" id="portal-sun">
<img id="fred-portal" src="img/fred-portal.png">
<img src="img/space-ship.png" id="space-ship" class="img-fluid" alt="Responsive image">
</div>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</div>
</body>
</html>
Usually these problems occur if you forget to close the
div. Your question is too broad to figure out what it is, but try to start with what I said.– Wallace Maxters
Please attach your code to your question so we can help you
– eliangela
And as @eliangela said, don’t forget to click edit and add more code and more details to your question, otherwise it will be closed.
– Wallace Maxters
ok, I’m not in the habit of using the stack, it’s the second time. Forgive the lack of code previously highlighted by vcs
– igor silva
All right @igorsilva. I analyzed your code by VS CODE and apparently it’s no problem with tag closure
– Wallace Maxters
It is likely that the problem is in CSS image positioning mode. All images have
position: relative? If yes, they will occupy their original space and move with the information in the attributesright, left, top, bottom.– mutlei
Yes, they’re all with relative
– igor silva
So the problem is there. In relative, the element still occupies its space by code, the CSS only moves it to X or Y coordinates. At least that’s what the mine experience tells me. The "base" of the element is still within the DIV, but its display may vary.
– mutlei
To fix should I change the position of the div in html? I started working with front now, I’m still studying, so pardon a certain ignorance in html and css
– igor silva
Friend since you said you are starting with front now I will tell you something, value as for example bottom: 850px; or left: 950px; probably unnecessary! Study a little CSS, read about how to build a grid for a site, about floats and display, ai vc will start to better understand the structure of HTML. The way you set up your layout will be almost impossible to leave responsive and will only serve on your computer screen...
– hugocsl