Exemplo Bruno

by Tiago Boeing

HTML

<div class="conteudo">

  <!-- faixa preta com botão fechar e nome da janela !-->
  <div class="faixa-preta">
    <div class="nome-janela">
      Escolha uma das opções abaixo
    </div>
    
      <div class="botao-fechar">
        <a href="#">Fechar</a>
      </div>
  </div>
  <!-- termina botão fechar !-->
  
  
  <div class="lista-opcoes">
  
    <!-- aqui tu vai fazer o php dar um while, vindo do banco de dados !-->
    <div class="opcao">
      
      <div class="titulo-opcao">
      Poste: PT16 - CE02
      </div>
         
      <div class="botoes-acoes">
        <a href="#">Editar</a>
        <a href="#">Excluir</a>
      </div>

    </div>
    <!-- acaba opcao 1 !-->
    
    <!-- aqui tu vai fazer o php dar um while, vindo do banco de dados !-->
    <div class="opcao">
      
      <div class="titulo-opcao">
      Poste: PT16 - CE02
      </div>
         
      <div class="botoes-acoes">
      <!-- coloca as imagens de acoes dentro dos a href !-->
        <a href="#">Editar</a>
        <a href="#">Excluir</a>
      </div>

    </div>
    <!-- acaba opcao 2 !-->
  
  </div>
  
</div>

CSS

body{
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.conteudo{
  width: 70%;
  min-height: 500px;
  background: #a9a9a9;
  color: #fff; /* cor do texto */
  margin-left: auto;
  margin-right: auto;
  margin: 50px auto;
  border-radius: 10px;
}
.faixa-preta{
  background: #000;
  color: #fff;
  border-radius: 10px 10px 0 0;
  height: 30px;
}
.nome-janela{
  float: left;
  font-family: Arial, Tahoma;
  font-size: 14px;
  margin: 7px 0 0 10px;
}
.botao-fechar{
  float: right;
  color: #fff;
  font-family: Arial, Tahoma;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 7px 10px 0 0;
} 
.botao-fechar a{
  text-decoration: none;
  color: #fff;
}
.lista-opcoes{
  margin: 10px;
}
.opcao{
  margin: 10px 0 10px 0;
  color: #000;
}
.titulo-opcao{
  float: left;
  width: 70%;
  border-right: 1px solid #000;
}
.botoes-acoes{
  float: right
  text-align: right;
}
.botoes-acoes a{
  font-family: Arial, Tahoma;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  margin-left: 15px;
}
.clear{
  clear: both;
}