Position absolute is not working

Question

Position absolute is not working

Navigation

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

1

I'm trying to create a version of the old site from the record. What I need is to get div read under div last , but they are followed and that is not what you want.

Where it says good , in the last topic of the list, it should appear behind the div , ie it should be hidden back there instead of being at the bottom of the list

I leave here my code and 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

asked by anonymous 06.12.2015 / 13:58

2 answers

Animations and effects of Javascript scrolling BibTeX gives error in abbreviation [closed]

score 0 · Answer 1

I was a bit confused by the issue, because I understood two different possibilities:

1) DIVs with position: absolute do not have coordinates, ie you have not indicated the position in which they should stay, which causes them to clump together. In CSS, use for example {position: absolute; top: 50px; left: 10%;} to change the location of the DIV.

2) If one DIV should be behind another, hidden, then you need to use the z-index property, which changes the 'layer' in which the elements stay. For example, one element with z-index: 10 is behind another with z-index: 11, and so on.

score 0 · Answer 2

I do not know if I understood correctly, but from what I realized, you want to do 3 lists, whose navigation buttons - Latest , + Read | , , , + Voted ' of the 3rd widget at the bottom of the page from left to right, when clicked, hide or show their assigned lists for each button, below these navigation buttons.

If that's what you're trying to do, what you're looking for is not from the absolute position of the CSS, but from a JavaScript function to show or hide div 's via display:none; e 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:

I came across some syntax errors (I did not check all) that you should arrange, such as:


Put 2% with% 's in one element when should be only 1 - id .

The closing of the <div id="ultimas margem"> tag that looks like this: <img> when it should be like this - <img src="imagens/2.png"></img> .