Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Ajuda com CSS

por Rafael Rodrigo Menon
| 99.2k xp | 18 posts

Galera quero mandar o texto e o vídeo pro lado direito do menu em vermelho, mais não estou conseguindo no css. http://pt-br.tinypic.com/r/2qxb7eg/9 Códigos: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/fontes.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>   

<body>


    <div class="cabecalho">
        <h1>Semana do CorelDraw</h1>  
    </div>

    <div class="menu"><br>
        <a href="#">1-Conhecendo o Programa</a><br><br>
        <a href="#">2-O Primeiro Vetor</a><br><br>
        <a href="#">3-Outras Ferramentas</a><br><br>
        <a href="#">4-Vetor de Qualidade</a><br><br>
        <a href="#">5-Materiais Gráficos</a><br><br>

    </div>
    <div class="conteudo">
        <h1>Conhecendo o Programa.</h1> <br>
        <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
    </div>
    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ENdCAlSBT10" frameborder="0" allowfullscreen></iframe>
    </div>

</body>
</html>
.cabecalho {
    background-color: #CD3333;
    margin-left: 0%;
    margin-right: 0%;

}

.cabecalho h1 {
    font-family: 'buba_demooutline'; 
    color: white;
    padding: 15px;
    font-size: 27px;
    margin-left: 3%;

}

.menu {
    background-color: #CD3333;
    margin-left: 4%;
    margin-right: 75%;
    margin-top: 1%;
    border-style: solid;
    border-width: 5px;
    border-color: #8B1A1A;
    border-radius: 7px;
}

.menu a {
    text-decoration: none;
    font-family: 'MyWebFont';
    color: white;
    margin-left: 7%;
    font-size: 21px;
}

.video {
    border-style: solid;
    border-width: 5px;
    border-color: #8B1A1A;
    border-radius: 7px;
    width: 560px;
    height: 315px;
}

.conteudo h1 {
    font-family: 'buba_demooutline';
    color: #CD3333;
    font-size: 28px;
}

.conteudo p {
    font-family: 'MyWebFont';
    font-size: 20px;
}
4 respostas
por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

Dá uma olhada se é isso o que você queria:

https://jsfiddle.net/togy0g2y/1/

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

HTML:

<div class="cabecalho">
  <h1>Semana do CorelDraw</h1>
</div>

  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ENdCAlSBT10" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="menu">
    <br>
    <a href="#">1-Conhecendo o Programa</a>
    <br>
    <br>
    <a href="#">2-O Primeiro Vetor</a>
    <br>
    <br>
    <a href="#">3-Outras Ferramentas</a>
    <br>
    <br>
    <a href="#">4-Vetor de Qualidade</a>
    <br>
    <br>
    <a href="#">5-Materiais Gráficos</a>
    <br>
    <br>
  </div>

<div class="conteudo">
  <h1>Conhecendo o Programa.</h1>
  <br>
  <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
    Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais
    recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
</div>

CSS:

.cabecalho {
  background-color: #CD3333;
  margin-left: 0%;
  margin-right: 0%;
}

.cabecalho h1 {
  font-family: 'buba_demooutline';
  color: white;
  padding: 15px;
  font-size: 27px;
  margin-left: 3%;
}

.menu {
  background-color: #CD3333;
  margin-left: 4%;
  margin-right: 75%;
  margin-top: 1%;
  border-style: solid;
  border-width: 5px;
  border-color: #8B1A1A;
  border-radius: 7px;
}

.menu a {
  text-decoration: none;
  font-family: 'MyWebFont';
  color: white;
  margin-left: 7%;
  font-size: 21px;
}

.video {
  border-style: solid;
  border-width: 5px;
  border-color: #8B1A1A;
  border-radius: 7px;
  width: 560px;
  height: 315px;
  margin-top: 1%;
  float: right;
  position: relative;
}

.conteudo {
  clear: right;
}

.conteudo h1 {
  font-family: 'buba_demooutline';
  color: #CD3333;
  font-size: 28px;
}

.conteudo p {
  font-family: 'MyWebFont';
  font-size: 20px;
}
solução!
por Nikolai Cinotti
| 433.6k xp | 424 posts
Alura Scuba Team

Tópico solucionado.

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

A solução desse tópico foi a última mensagem?