Position Absolute is not working

Asked

Viewed 422 times

1

I’m trying to create a version of the old record site. What I need is to get the div read under the div last, but they are followed and this is not what is intended.

Where does it say good, on the last topic of the list, it should appear behind the div, I mean, I should be hiding back there instead of at the bottom of the list

I leave my code here and I apologize for the disorganization : 

body {} #main {
  margin: auto;
  width: 980px;
  background-color: white;
}
#cabeçalho {
  width: 980px;
  height: 113px;
  background-image: url("imagens/topo.png");
  text-align: center;
  margin: auto;
}
#barra {
  background-image: url("imagens/fundoMenu.jpg");
  height: 35px;
}
#barraclubes {
  background-image: url("imagens/barra_cinzenta.png");
  height: 45px;
}
.separadores {
  float: left;
  padding-left: 108px;
  margin-top: 5px;
  display: block;
}
.ulclubes {
  float: left;
  margin: 0;
  padding-left: 5px;
  padding-top: 10px;
}
.liclubes {
  display: inline;
}
.noticiaimagem {} .horacategoria {} .descrição {
  color: red;
  width: 278px;
  float: left;
  margin-bottom: -5px;
}
.descriçãopequena {
  color: gray;
  width: 278px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}
.hora {
  background-color: black;
  color: white;
}
.categoria {
  background-color: gray;
}
.noticia {
  padding: 5px;
  float: left;
  width: 278px;
}
.social {
  margin-top: 8px;
  width: 278px;
  height: 20px;
  background-color: #e0e3e5;
  text-transform: uppercase;
  color: gray;
  font-size: 80%;
}
.margem {
  margin-top: 5px;
}
.comentarios {
  font-size: 80%;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 10px;
  color: white;
  background-image: url("imagens/comentarios.png");
}
.descriçaopp {
  font-size: 60%;
}
#header {
  background-image: url('imagens/fundo.png');
  width: 307px;
  height: 32px;
  color: white;
  margin-top: -4.5px;
  text-transform: uppercase;
  margin-left: -3px;
}
.headersimbolo {
  margin-top: 5px;
  margin-left: 205px;
  color: white;
}
.noticiacoluna {
  background-color: #F2F2F2;
  width: 290px;
  padding: 5px;
  margin-top: 5px;
}
.ulcoluna {
  float: left;
  margin-top: 2px;
  padding-left: 5px;
}
.liclicada {
  color: gray;
  margin-left: -5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  background-color: white;
  display: inline;
}
.licoluna {
  display: inline;
  color: white;
  text-align: center;
}
#noticiacolunamenu {
  background-color: black;
  width: 307px;
  height: 25px;
  margin-left: -3px;
}
.barra {
  color: red;
  font-weight: bold;
}
.horacoluna {
  color: darkgrey;
}
#coluna {
  margin-top: 5px;
  background-color: #D4D4D4;
  width: 300px;
  float: right;
  padding: 5px;
}
#ultimas {
  position: absolute;
}
#lidas {
  position: absolute;
}
}
#comentadas {
  position: absolute;
}
#votadas {
  position: absolute;
}
.categoriacoluna {
  color: darkgrey;
}
.titulo {
  display: block;
}
.ulseparadores {
  float: left;
  margin: 0;
  padding: 0;
  display: block;
}
.liseparadores {
  display: inline;
  color: white;
  background-image: url("imagens/separador.png");
  background-repeat: no-repeat;
  padding-left: 2px;
}
.premium {
  background-image: url("imagens/premium.jpg");
  height: 35px;
  background-repeat: no-repeat;
}
<html lang="en">

<head>
  <link rel="stylesheet" href="recordcss.css" type="text/css">
  <title>:.: Jornal Record :.:</title>


</head>

<body>
  <div id="main">
    <div id="cabeçalho">

    </div>

    <div id="barra">
      <div class="separadores">
        <ul class="ulseparadores">
          <li class="liseparadores">
            Futebol
          </li>
          <li class="liseparadores">
            Mercado
          </li>
          <li class="liseparadores">
            Resultados e Classificações
          </li>
          <li class="liseparadores">
            Internacional
          </li>
          <li class="liseparadores">
            Modalidades
          </li>
          <li class="liseparadores">
            Opinião
          </li>
          <li class="liseparadores">
            Multimédia
          </li>
          <li class="liseparadores">
            Jogos
          </li>
          <li class="liseparadores">
            Auto
          </li>
          <li class="liseparadores">
            Jogo da vida
          </li>
          <li class="liseparadores">
            Fora de campo
          </li>

        </ul>
      </div>
      <div class="premium">



      </div>







    </div>
    <div id="barraclubes">

      <ul class="ulclubes">
        <li class="liclubes">
          <img src="imagens/2.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/porto.png"></img>
        </LI>
        <li class="liclubes">
          <img src="imagens/5.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/3.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/13.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/14.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/7.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/10.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/36.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/15.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/369.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/4.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/9.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/19.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/34.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/66.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/8.png"></img>
        </li>
        <li class="liclubes">
          <img src="imagens/593.png"></img>
        </li>

      </ul>








    </div>
    <div class="noticia">
      <div class="noticiaImagem">
        <img src="imagens/noticia1.jpg"></img>
      </div>

      <div class="horacategoria">
        <span class="hora">
15:30
</span>
        <span class="categoria ">
Selecções
</span>

      </div>

      <div class="descrição">
        <h1>Nelson Oliveira:«Benfica? Se calhar cometi alguns erros»   </h1>

      </div>
      <div class="descriçãopequena">avançado comenta maior aposta nos jovens</div>
      <div class="social">
        <span class="comentarios">89</span> comentários
      </div>
      <div class="descriçaopp">
        "Não sei mas neste momento tambem não estou preocupado"
      </div>
    </div>


    <div class="noticia">
      <div class="noticiaImagem">
        <img src="imagens/noticia2.jpg"></img>
      </div>

      <div class="horacategoria">
        <span class="hora">
04:35
</span>
        <span class="categoria ">
Sporting
</span>

      </div>

      <div class="descrição">
        <h1>Naldo chamado à pedra por Jesus</h1>

      </div>
      <div class="descriçãopequena">.</div>
      <div class="social">
        <span class="comentarios">8</span> comentários
      </div>
      <div class="descriçaopp">
        <ul style="background-color:gray;">
          <li>Naldo falha Benfica e tem belenences em risco
          </li>
          <li>Primeira expulsão de Naldo a jogar na Europa
          </li>
        </ul>
      </div>
    </div>

    <div id="coluna">
      <div id="header">Notícias<span class="headersimbolo">[+]</span>
      </div>
      <div id="noticiacolunamenu">
        <ul class="ulcoluna">

          <li class="liclicada">Últimas</li>

          <li class="licoluna">+ Lidas |</li>
          <li class="licoluna">+ Comentadas |</li>
          <li class="licoluna">+ Votadas</li>



        </ul>
      </div>

      <div id="ultimas margem">
        <div class="conteudo">
          <div class="noticiacoluna">
            <span class="horacoluna">11:23</span>

            <span class="barra"> | </span>
            <span class="categoriacoluna">Fc Porto </span>
            <span class="titulo"> Ausência de oi Martins Indi no regresso do Sérgio Oliveira</span>
          </div>

          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Selecções</span>
            <span class="titulo">Todos disponíveis antes da viagem para a Rússia</span>

          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:11</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">RealMadrid</span>
            <span class="titulo">Carlo Ancelotti «O meu despedimento do Real Madrid não foi correcto»</span>

          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Internacional</span>
            <span class="titulo">FIFA: Platini critica lentidão do comité de recurso</span>


          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Vídeos-NBA</span>
            <span class="titulo">Conheces estes gestos de algum lado ...?</span>

          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Fotos-Motociclismo</span>
            <span class="titulo">Miguel Oliveira já testa Moto2</span>

          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Inglaterra</span>
            <span class="titulo">Carlo Ancelotti «Mourinho deu-me os parabéns quando o RealMadrid ganhou a Décima»</span>

          </div>
          <div class="noticiacoluna margem">
            <span class="horacoluna"> 11:39</span>
            <span class="barra"> | </span>
            <span class="categoriacoluna">Selecções</span>
            <span class="titulo">Nélson oliveira:«Benfica? Se calhar cometi alguns erros e não justifiquei a aposta»</span>

          </div>
        </div>

        <div id="lidas margem">

          <div class="noticiacoluna">
            <span class="horacoluna">11:23</span>

            <span class="barra"> | </span>
            <span class="categoriacoluna">Fc Porto </span>
            <span class="titulo"> Boassd </span>
          </div>


        </div>



      </div>
</body>

</html>

html css

  • For Absolute to work in relation to an outside div, this outside div has to be :relative (I don’t know if it applies to your code, as you posted everything, I haven’t been able to analyze it yet)

  • era of this what you needed @Tiagocoelho ?

2 answers

0

I was a little confused by the question, because I understood two different possibilities:

  1. as div with position:absolute do not have coordinates, that is, you did not inform the position they should be in, which causes them to be agglutinated. In CSS, use for example {position:absolute;top:50px;left:10%;} to change the location of div.

  2. if a div should be behind another, hidden, so you need to use the property z-index, that changes the "layer" the elements are in. For example, an element with z-index:10 stands behind another with z-index:11, and so on.

0

I don’t know if I got it right, but from what I understand, you want to make three lists, whose navigation buttons - Latest, + Read |, + Commented |, + Voted` of the 3rd widget at the bottom of the page from left to right, when clicked, hidden or displayed the respective designated lists for each button, below these navigation buttons.

If that’s what you’re trying to do, what you’re looking for is not the position absolute CSS, but a Javascript function to show or hide div's through display:none; and display:block; when a button is clicked.

Here is an example of how this can be done:

// Este código JavaScript abaixo deve ser implementado antes do encerramento da tag </head>
var selecionado="news1";
var disp="feedResume1";
function show(a,b)
{
  document.getElementById(selecionado).setAttribute(
    "style", "background-color:#000; color:#fff;");
  document.getElementById(disp).style.display = "none";

  document.getElementById(a).setAttribute(
    "style", "background-color:#fff; color:#808080;");

  document.getElementById(b).style.display = "block";
  selecionado=a;
  disp=b;
}
#feedResume2 {display: none;}
#feedResume3 {display: none;}
.resultadosFeed{
  position:relative;
  bottom:1px;
  width:100%;
  min-height:30px;
  background-color:rgb(200,200,200);
}
.ulcoluna {
  background-color: #000;
  margin: 0;
  padding: 3px;
}
ul.ulcoluna li {
  display: inline-block;
  color: #fff;
  padding: 3px 5px;
  cursor:pointer;
}
ul.ulcoluna li:first-child {
  background-color:#fff;
  color: #808080;
}
<div id="noticiacolunamenu">
  <ul class="ulcoluna">
    <li id='news1' onclick="show('news1','feedResume1');">Últimas</li>
    <li id='news2' onclick="show('news2','feedResume2');">Lidas</li>
    <li id='news3' onclick="show('news3','feedResume3');">Comentadas </li>
  </ul>
</div>

<section id="feedResume1" class="resultadosFeed">
  <div class="conteudo">
    
    <div class="noticiacoluna">
      <span class="horacoluna">11:23</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Fc Porto </span>
      <span class="titulo"> Ausência de oi Martins Indi no regresso do Sérgio Oliveira</span>
    </div>

    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Selecções</span>
      <span class="titulo">Todos disponíveis antes da viagem para a Rússia</span>
    </div>
    
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:11</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">RealMadrid</span>
      <span class="titulo">Carlo Ancelotti «O meu despedimento do Real Madrid não foi correcto»</span>
    </div>
    
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Internacional</span>
      <span class="titulo">FIFA: Platini critica lentidão do comité de recurso</span>
    </div>
    
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Vídeos-NBA</span>
      <span class="titulo">Conheces estes gestos de algum lado ...?</span>
    </div>
    
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Fotos-Motociclismo</span>
      <span class="titulo">Miguel Oliveira já testa Moto2</span>

    </div>
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Inglaterra</span>
      <span class="titulo">Carlo Ancelotti «Mourinho deu-me os parabéns quando o RealMadrid ganhou a Décima»</span>
    </div>

    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Selecções</span>
      <span class="titulo">Nélson oliveira:«Benfica? Se calhar cometi alguns erros e não justifiquei a aposta»</span>
    </div>
    
  </div>
</section>

<section id="feedResume2" class="resultadosFeed">
  <div class="noticiacoluna">
    <span class="horacoluna">11:23</span>
    <span class="barra"> | </span>
    <span class="categoriacoluna">Fc Porto </span>
    <span class="titulo"> Boassd </span>
  </div>
</section>

<section id="feedResume3" class="resultadosFeed">
</section>

Some syntax errors you should keep in mind:

In I came across some syntax errors (I didn’t check all) that you should fix, for example:

  • Place 2 id's in a single element when should only be 1 - <div id="ultimas margem">.
  • The closing of the tag <img> that is like: <img src="imagens/2.png"></img> when you should be like this - <img src="imagens/2.png"/>.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.