1

inserir a descrição da imagem aquiQuero posicionar a div "bookright" do lado direito da pagina HTML creio que tenho o código CSS correcto mas no entanto não está funcionado. pf vejam a foto, neste momento aparece por baixo da imagem, quero que apareça ao lado, do lado direito. Alguem que saiba como fazer?livros

Tenho o seguinte código em HTML:

<table cellpadding="2" cellspacing="2" border="0">
<?php
    if(!$r)
    {
        echo "Query '".$sql."' failed";
    }
    else{
        while($books =mysqli_fetch_object($r)){?>
        <tr>
        <td class="book"><?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="370" width="220">'; ?> </td>
        <div class="bookright">
        <td><label for="ISBN">ISBN:</label> <?php echo $books->ISBN;?> </td>
        <td> <label for="title">Title:</label><?php echo $books->Title;  ?></td> 
        <td> <label for="author's name">Author's name:</label><?php echo $books->Authorsname; ?></td> 
        <td> <label for="edition">Edition:</label><?php echo $books->edition;?></td> 
        <td> <label for="year">Year:</label><?php echo $books->year;   ?></td> 
        <td> <label for="category">Category:</label><?php echo $books->category;   ?></td> 
        <td> <label for="publisher">Publisher:</label><?php echo $books->publisher;  ?></td> 
        <td> <label for="quantity">Quantity-in-stock:</label><?php echo $books->quantityinstock; ?></td> 
        <td> <label for="price">Price:</label><?php echo $books->price; ?></td> 
        <td> <a href="shoppingcart.php?ISBN=<?php echo $books->ISBN; ?>">Order Now</a></td>
        </div>
        </tr>
        <?php }} 
    ?>
</table>

CSS:

.book{
                  display: block;
                  width:230px;
                  height:390px;
                  box-shadow: 0 0 20px #aaa;
                  margin: 25px;
                  padding: 10px 10px 0 10px;
                  vertical-align: top;
                  transition: height 1s;
            }
            .bookright {
                right:0;
                position:absolute;
            }
            td{
                display:block;

            }

1 Resposta 1

1

Primeiro, não faz muito sentido você definir em elemento div dentro de um elemento tr. O navegador entende e exibe o elemento, mas semanticamente isso faz o menor sentido. Segundo, não existe a necessidade de você posicionar o elemento com CSS, você pode usufruir das propriedades da própria tabela do HTML. Por exemplo, se você definir o atributo rowspan="10" em um elemento td, a coluna ocupará um espaço equivalente a 10 linhas. Se este for o primeiro td da tabela, ele ocupará todo o espaço vertical da mesma (considerando que esta possui as exatas 10 linhas), fazendo com que todos os novos elementos td sejam posicionados à direita do mesmo. Veja o exemplo:

table {
  border: 1px solid black;
}

table td {
  padding-left: 20px;
}

.book{
  width:230px;
  height:390px;
  box-shadow: 0 0 20px #aaa;
  margin: 25px;
  padding: 10px 10px 0 10px;
  vertical-align: top;
  transition: height 1s;
}
<table>
  <tr>
    <td class="book" rowspan="10"><img src="http://placehold.it/220x370" alt=""></td>
    <td>ISBN: 12345</td>
  </tr>
  <tr>
    <td>Title: Sed porttitor lectus nibh.</td>
  </tr>
  <tr>
    <td>Author's name: John Doe</td>
  </tr>
  <tr>
    <td>Edition: 1</td>
  </tr>
  <tr>
    <td>Year: 2017</td>
  </tr>
  <tr>
    <td>Category: Fiction</td>
  </tr>
  <tr>
    <td>Publisher: Pellentesque</td>
  </tr>
  <tr>
    <td>Quantity in stock: 1000</td>
  </tr>
  <tr>
    <td>Price: 50.00</td>
  </tr>
  <tr>
    <td><a href="#">Order Now</a></td>
  </tr>
</table>

O código CSS foi ligeiramente alterado para adaptar-se ao exemplo. Você pode alterá-lo conforme sua necessidade, mas um ponto importante para que funcione é retirar display: block do elemento .book.

Vale lembrar que é um pouco complicado trabalhar com responsividade em uma tabela do HTML, caso queira, por exemplo, exibir os detalhes do livro abaixo da imagem quando acessado de um dispositivo móvel. Para tal, seria mais fácil estruturar utilizando div no lugar de table.

9
  • parece ser uma boa resolução, no entanto eu necessito de disponilizar a informação em in-line block, não é possivel é isso? 6/05/2017 às 15:45
  • Como seria isso? Todos os dados na mesma linha? Se sim, basta colocar todos os elementos td na mesma tr, semelhante ao que você fez, mas sem o elemento div e sem o display: block em .block. Se você me confirmar que é isso eu posso alterar a resposta.
    – Woss
    6/05/2017 às 15:46
  • neste momento ja tenho como voce sugeriu a imagem do livro do lado esquerdo e o conteudo do lado direito, no entanto eu nao tenho so um livro, tenho varios. com o seu codigo eles aparecem um a um na pagina HTML mas um por baixo de cada um mas eu quero que apareça ao lado. n sei se fui clara 6/05/2017 às 17:21
  • Não muito. Tem como fazer uma imagem de como pretende que fique ou algum site que seja desta forma?
    – Woss
    6/05/2017 às 17:27
  • eu adicionei uma nova foto para mostrar como aparece agora, com o codigo que voce fez. um livro aparece em cima e o outro em baixo como voce podever na foto, mas eu quero que os livros apareçam um ao lado do outro 6/05/2017 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .