Ir ao conteúdo
  • Cadastre-se

HTML HTML/CSS estruturação de site


Ir à solução Resolvido por GusTec,

Posts recomendados

Ola a todos,

Estou introduzindo a curso de html/css, porém não consegui prosseguir com a atividade proposta pelo professor.

 

Seguindo o anexo, a estrutura do site deve ser feita dessa forma, porém a localização tanto do texto quanto dos videos não estão no seus devidos lugares

Como posso arrumar?

<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doacao_sangue</title>
    <link rel="stylesheet" href="_css/estilo.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<style>
    body {
        background-color: RGB(248, 197, 197);
    }
</style>
<section class="corpo">



    <header>
        <center>
            <img src="_imagens/banner_doacao.jpg" alt="Banner doação de sangue" height="180" />
        </center>
    </header>



    <br><br><br><br><br><br>

    <center> <h1> A importancia de doar sangue</h1></center>

</br></br></br></br></br>
<center><p> A necessidade de sangue é <i>constante.</i> Transfusões de sangue fazem a diferença entre a vida e a morte
    para
    centenas de pacientes todos os dias.

    Sua contribuição é muito importante para mantermos o estoque necessário às necessidades dos hospitais que
    atendemos.

    Não é preciso um motivo especial para doar sangue. Não importa a razão, após a doação você se sentirá bem
    sabendo que ajudou alguém.</p></center>






    <nav>
        <ul>
            <li><a href="https://www.colsan.org.br/site/doador/locais-para-doacao-de-sangue/" target="_blank">Locais de doação de
                    sangue</a></li>
            <li><a href="https://www.hemocentro.unicamp.br/perguntas-frequentes/duvidas-mais-frequentes-dos-pacientes/"target="_blank">Duvidas
                    Frequentes</a></li>
            <li><a href="https://www.hemocentro.unicamp.br/seja-um-doador/doacao-de-medula-ossea/"target="_blank">Medula Ossea</a>
            </li>

        </ul>


        </a>

    </nav>




   


    <table border="0">
        <tbody>
            <tr>
                <th> <video width="320" height="320" controls>
                        <source src="_media/Requisitos.mp4" type="video/mp4">
                    </video> </th>


                <th> <video width="320" height="320" controls>
                        <source src="_media/Desafio da doação de sangue LuzCameraDoacao Coluna 47_720P HD.mp4"
                            type="video/mp4">
                    </video> </th>

            </tr>

            <th> <video width="320" height="320" controls>
                    <source src="_media/Doação de sangue conheça o passo a passo_720P HD.mp4" type="video/mp4">
                </video></th>

            <th> <video width="320" height="320" controls>
                    <source src="_media/Doação de Sangue o caminho do sangue_720P HD.mp4" type="video/mp4">
                </video></th>

        </tbody>



    </table>



</section>







</body>

</html>

 

 

imagem_2021-07-19_224550.png

imagem_2021-07-19_224653.png

Link para o comentário
Compartilhar em outros sites

4 minutos atrás, GusTec disse:

@joshuayuuki Seria bom você postar o arquivo estilo.css para que possa ser analisado.

li{color: red;
}

ul {color: red;}

.corpo {
    width: 996px;
    height: 616px;
    margin: auto;
}

*{padding: 0%;
    margin:0%;}

    a{

        text-decoration: none;
        color: black;

    }

    body{

        font-family: arial;

       
    }

    ul{
        list-style: none;
            
    }


    nav
    {background-color: rgba(250, 82, 82, 0.5) ;
    width: 250px;
    height: 120%;
    
    
    }

    a{
background-color: red;
display: block;
padding: 20px 5px;
color: white;
    }

        a:hover{
background-color: RGB(176.224.230);
color: black;

        }

 

Link para o comentário
Compartilhar em outros sites

  • Solução

@joshuayuukiabra o arquivo estilo.css e faça estas alterações:

nav {

        background-color: rgba(250, 82, 82, 0.5);

        width: 250px;

        height: 120%;

        float: left;

    }



    table {

       float: right;

       border: 1px solid red;

    }

 

Perceba que o trecho referente ao nav você já tem, eu só inseri o float na última linha.

O trecho referente ao table você tem que inserir inteiro.

 

Isto aí é só pra permitir o posicionamento dos vídeos ao lado da barra de menu, porém muita coisa deve ser corrigida no código que você apresentou, você está utilizando tags obsoletas, além de fazer uso de recursos não recomendados, tais como: 

 

1 - sequência de <br> para posicionamento na tela

2 - utilização da tag <center>

 

O ideal é que você utilize o css para fazer toda a estilização.

 

Isto foi o que reparei olhando bem rapidamente.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...