Ir ao conteúdo
  • Cadastre-se

Natanael Marrafon Rocha

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    25

  • Cadastrado em

  • Última visita

Reputação

1
  1. Natanael Marrafon Rocha
    Natanael Marrafon Rocha alterou sua foto pessoal
  2. Natanael Marrafon Rocha
    Então a forma que eu estou atacando a seleção é assim: Você esta me surgerindo que eu adicione uma class nos comandos html ? adicionado 2 minutos depois Eu não sabia sobre esse !important, quando eu coloco ele é como se eu dissesse a propriedade que é de prioridade fazer a alteração só naquela propriedade ?
  3. Natanael Marrafon Rocha
    Eu estou fazendo um projeto e diz um menu drop dawn usando as propriedades do display só que as listas que coloquei dentro da div que coloquei para aparecer ficam com herança de propriedade, como faço para tirar essa herança de propriedade ? tipo fazer resetar tudo que esta dentro da div para mim ter o controle do que faço com o que esta dentro da div ? Olha como fica, fica igual as listas de cima eu queria resetar ela para aparecer como se não tivesse nenhuma propriedade css adicionada.
  4. Natanael Marrafon Rocha
    O div que esta em amarelo quando eu do margin nele ele não desce só apenas quando do a margin na div que esta em vermelho que é a segunda div que desce, quando tento dar margin na div amarela desce o conteudo inteiro, e mais uma pergunta a semantica do css minha esta certa ?
  5. Natanael Marrafon Rocha
    Estou fazendo um trabalho do meu curso e estou com uma problema no código, eu criei uma section, e dei a ela uma largura e uma altura, dentro dela criei as div, e dei a div uma largura e um tamanho também, só que a primeira div que fica na section quando eu dou margin para ela vir para baixo move a section inteira apenas a partir da segunda div que movela ela sem mover a section, coloquei background nas div para ver elas, e na primeira div coloquei um titulo h1 e não funciona o line-heigth, só que se eu colocar o container para flutuar a esquerda movem as divs... o que eu faço é algum erro de semântica ? olhem meu codigo o que fiz de errado ? <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>RAFTING</title> <link href="css/estilo.css" rel="stylesheet" type="text/css"/> </head> <body> <header id="header"> <figure id="logo"> <img src="imagens/logo.png"/> </figure> <nav id="nav"> <a href="#">HOME</a> <a href="#">ATIVIDADES</a> <a href="#">TREINAMENTO</a> <a href="#">PACOTES</a> <a href="#">CONTATO</a> </nav> </header> <section id="container"> <div id="titulo"> <h1>PRINCIPAIS ATIVIDADES</h1> </div> <div id="rafting"> </div> </section> </body> </html> CSS *{ padding:0; margin:0; text-decoration:none; list-style:none; } body{ background:url(../imagens/foto1.jpg) no-repeat center top fixed; } #header{ width:100%; height:90px; background:white; margin:40px auto; } #logo{ float:left; position:relative; bottom:30px; left:100px; } #nav{ width:800px; height:90px; float:right; line-height:90px; } #nav a{ margin-left:30px; font:normal 18px arial; color:#333333; } #container{ width:1000px; height:880px; margin:auto; background:white; } #titulo{ width:1000px; height:50px; text-align:center; background:yellow; } #titulo h1{ font:normal 18px arial; color:#333333; } #rafting{ width:1000px; height:200px; background:red; margin:20px 0 0 0; }
  6. Natanael Marrafon Rocha
    Então Dif, eu estou tentando fazer com que a tabela, imagem, escrita fiquem uma do lado da outra, e quando for trocar de conteúdo colocar a tag <hr/> para concluir e colocar outro conteúdo o primeiro conteúdo eu consegui colocar mas o segundo ta difícil e sempre que consigo o <hr/> fica junto com o outro acima ele flutua, tem um modo certo de eu fazer esse post ? os elementos nunca ficam do lado certo...
  7. Natanael Marrafon Rocha
    Dif, estou fazendo um trabalho do curso e consigui fazer a primeira parte que é essa colocar os elementos do lado do outro: só que estou tentando fazer a segunda parte que é colocar os elementos do lado do outro abaixo dessa parte com o separador <hr/> e não estou conseguindo, no final eu tenho que coloca outro <hr/> para fazer a parte mais abaixo e o hr vai parar junto com esse nessa foto acima, tem maneira melhor de fazer isso ? olha como fica : O meu código é esse : <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>DC COMICS MARVEL</title> </head> <body> <header id="cabecalho"> <figure> <img id="banner" src="imagens/banner.jpg" /> </figure> </header> <div id="container"> <div class="descricao-conteiner"> <div class="titulo"> <p>SERIADOS MARVEL<P> </div> <div class="imagem-marvel"> <figure> <img src="imagens/agent-carter.jpg" alt="Agent Carter Marvel"/> <figcaption class="descricao-imagem">Agent Carter</figcaption> </figure> </div> <div id="comentario"> <form method="post" action=""> <input type="text" name="Buscar" /><input type="image" src="imagens/lupa.jpg" /> </form> <p class="descricao-seriado"> As Séries de Televisão do Universo Cinematográfico Marvel São shows americanos de televisão de super-herói, com base em personagens que aparecem nas publicações da Marvel Comics.</p><br/> <p class="descricao-seriado"> As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries, com mais oito em vários estágios de Desenvolvimento.</p><br/> <p class="descricao-seriado"> As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries, com mais oito em vários estágios de Desenvolvimento.</p><br/> <p class="descricao-seriado"> As séries estão em produção desde 2013, e nesse tempo Marvel Television e ABC Studios já estreou quatro séries, com mais oito em vários estágios de Desenvolvimento.</p><br/> </div> <div class="imagem-marvel"> <figure> <img src="imagens/agents-of-shield.jpg" alt="Agents Of Shield Marvel"/> <figcaption class="descricao-imagem">Agents Of Shield</figcaption> </figure> </div> <div class="imagem-marvel"> <figure> <img src="imagens/demolidor.jpg" alt="Demolidor Marvel"/> <figcaption class="descricao-imagem">Agents Of Shield</figcaption> </figure> </div> <hr/> <div class="titulo"> <p>SERIADOS DC COMICS</p><br/> </div> <div class="descricao-dc"> <p class="descricao-seriado">A relação entre os quadrinhos e a televisão nunca esteve tão bem quanto agora, o que torna realmente fácil estar perdido em meio a tantos programas de qualidade sobre heróis, zumbis e possessões deminíacas.<p><br/> <p class="descricao-seriado">A relação entre os quadrinhos e a televisão nunca esteve tão bem quanto agora, o que torna realmente fácil estar perdido em meio a tantos programas de qualidade sobre heróis, zumbis e possessões deminíacas.<p><br/> </div> <div> <figure id="figure-arrow"> <img src="imagens/arrow.jpg" alt="Arrow Marvel"/> <figcaption id="descricao-imagem-arrow">Arrow</figcaption> </figure> </div> <div id="tabela1"> <p id="titulo-series">SÉRIES DE TELEVISÃO<p> <table id="imagem-dc"> <tr> <td>TÍTULO</td> <td>DURAÇÃO</td> <td>TEMPORADA</td> </tr> <tr> <td>Batman</td> <td>1966-1968</td> <td>3</td> <tr> <tr> <td>Shazam</td> <td>1974-1976</td> <td>3</td> </tr> <tr> <td>Smailville</td> <td>2001-2011</td> <td>10</td> </tr> </table> </div> <div> <figure id="figure-Gotham"> <img src="imagens/gotham.jpg" alt="Gotham Marvel"/> <figcaption id="descricao-imagem-gotham">Gotham</figcaption> </figure> </div> </div> </div> </body> </html> * {margin:0; padding:0;} body { background-color:gray; text-align:center; } #banner { width:1600px; height:400px; } #container { width:1000px; height:2000px; margin:auto; background:white; } /*------- SERIADOS MARVEL -------*/ .titulo { text-align:left; margin-left:25px; font:bold 15px arial; } .imagem-marvel { width:500px; height:auto; float:left; margin:0; } .descricao-imagem { text-align:left; margin-left:25px; font:bold 13px arial; } #comentario { width:450px; height:269px; margin:0 10px 0 530px; } #comentario form { text-align:left; } .descricao-seriado { font:bold 12px arial; text-align:left; } /*--------- SERIADOS DC COMICS --------*/ .descricao-dc { width:450px; margin-left:25px; float:left; } #figure-arrow { width:450px; text-align:left; margin-left:25px; } #descricao-imagem-arrow { text-align:left; font:bold 12px arial; width:450px; } #imagem-dc { float:left; margin:10px 0 0 100px; } #imagem-dc tr td { padding-right:30px; font:bold 17px arial; } #titulo-series { margin:15px 0 0 25px; font:bold 15px arial; text-align:left; } #figure-Gotham { margin:15px 0 0 25px; float:left; } #descricao-imagem-gotham { text-align:left; font:bold 13px arial; } Sei que pode estar meio bagunçado o código estou tentando aprender na prática... Obrigado desde já!
  8. Natanael Marrafon Rocha
    Obrigado DIF kkk erro de iniciante
  9. Natanael Marrafon Rocha
    Estou fazendo um trabalho do curso e estou tentando inserir uma imagem via CSS só que não esta carregando a imagem o que estou fazendo de errado ? o código é esse : HTML <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>DC COMICS MARVEL</title> </head> <body> <header id="cabecalho"> <figure> <img id="banner" /> </figure> </header> </body> </html> CSS * {margin:0; padding:0;} body { background-color:black; text-align:center; margin:0; } #banner { background-image:url(imagens/banner.jpg); }
  10. Natanael Marrafon Rocha
    Estou tentando aprender a semântica direito do HTML e CSS está certo dessa forma ? <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Loja de Jóias</title> </head> <body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;"> <header style="width:1000px; height:180px; float:left; background-color:white;"> <figure> <img style="float:left;" src="imagens/logo.png"/> </figure> <nav style="float:right; margin-top:50px;"> <p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p> <a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/ alt="Inicio" title="Clique para abrir"></a> <a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a> <a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a> <a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a> </nav> </header> <div style="width:1000px;"> <section> <figure style="float:left; margin:0;"> <img style="margin-top:5px;" src="imagens/banner2.jpg"/> </figure> </section> </div> <div style="width:1000px; height:200px; background-color:white; float:left;"> <div> <section> <figure style="margin:10px;"> <img style="float:left;" src="imagens/joia-logo.jpg"/> <figcaption style="font:normal 18px verdana; margin:5px 0px 0px 0px; float:left; color:#DDA0DD;">ALIANÇAS DE CASAMENTO</figcaption> </figure> </section> </div> <div style="width:1000px; height:80px; float:left;"> <section> <form style="float:left; margin-left:13px;" method="post" action=""> <input style="width:230px; height:30px; border-color:#DDA0DD;" type="text" placeholder="Digite Aqui" name="Texto"> <input style="width:80px; height:35px; color:black; background-color:red; border-style:none;" type="submit" value="Buscar" Name="Buscar"> </form> </section> </div> <div style="width:1000px; height:67px; float:left; text-align:right;"> <section style="margin:15px 0px 0px 370px;"> <a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MAIOR PREÇO</a> <a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MENOR PREÇO</a> <a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">MAIS VENDIDOS</a> <a style="color:#DDA0DD; margin-left:10px; float:left; display:table; border-spacing:10px; border-width:thin; border-color:#DDA0DD; border-style:solid; text-decoration:none;" href="#">LANÇAMENTOS</a> </section> </div> </div> <div style="width:1000px; height:400px; float:left; background-color:white; margin-top:5px;"> <section> <article> <table align="center" style="margin-top:10px;"> <tr> <td><img src="imagens/alianca1.jpg" alt="Aliança de Ouro Lines"/></td> <td><img src="imagens/alianca2.jpg" alt="Aliança de Noivado"/></td> <td><img src="imagens/alianca3.jpg" alt="Aliança de Formatura 5Z"/></td> <td><img src="imagens/alianca4.jpg" alt="Aliança de Ouro M17"/></td> </tr> <tr> <td><kbd style="font:normal 15px verdana;">Aliança de Ouro Lines</kbd><br/><kbd style="font:normal 12px verdana;">De R$2.500,00<br/>Por R$1.600.00 Á VISTA<br/> Em até 12x de R$133.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Noivado 3T5</kbd><br/><kbd style="font:normal 12px verdana;">De R$1.800,00<br/>Por R$900.00 Á VISTA<br/> Em até 12x de R$75.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Formatura 5Z</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Ouro M17</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td> </tr> </table> </article> </section> </div> <div style="width:1000px; height:150px; float:left; background-color:black;"> <footer> <div style="float:left;"> <p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 20px;">INFORMAÇÕES</p><br/> <p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 20px;">Como comprar alianças<br/>Garantia<br/>Troca e Devoluções<br/>Regulamento<br/>Numeração das Alianças</p> </div> <div style="float:left;"> <p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 50px;">CENTRAL DE VENDAS</p><br/> <p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 50px;">(51) 3594-0001<br/>Nosso horário de atendimento é de:<br/>Segunda a Sexta das 8:30 às 17:30h,<br/>Sábado das 08:30h às 12:45h<br/>Exceto Domingo e Feriados</p> </div> <div style="float:left;"> <figure style="margin:50px 0px 0px 100px;"> <img style="padding-left:30px;" src="imagens/face.png" alt="Facebook"/> <img style="padding-left:30px;" src="imagens/insta.png" alt="Instagram"/> <img style="padding-left:30px;" src="imagens/twitter.png" alt="Twitter"/> <img style="padding-left:30px;" src="imagens/googlemais.png" alt="Google Mais"/> </figure> </div> </footer> </div> </body> </html>
  11. Natanael Marrafon Rocha
    <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Loja de Jóias</title> </head> <body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;"> <header style="width:1000px; height:180px; float:left; background-color:white;"> <figure> <img style="float:left;" src="imagens/logo.png"/> </figure> <nav style="float:right; margin-top:50px;"> <p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p> <a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/ alt="Inicio" title="Clique para abrir"></a> <a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a> <a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a> <a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a> </nav> </header> <div style="width:1000px;"> <section> <figure style="float:left; margin:0;"> <img style="margin-top:5px;" src="imagens/banner1.jpg"/> </figure> </section> </div> <div style="width:1000px; height:200px; background-color:white; float:left;"> <section> <article> <p style="font:normal 18px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p> <div style="float:left; width:235px; height:100px; margin-left:50px;"> <figure> <img align="left" src="imagens/frete.jpg"/> <figcaption style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</figcaption> </figure> </div> <div style="float:left; width:300px; height:100px; margin-left:50px;"> <figure> <img align="left" src="imagens/troca.jpg"/> <figcaption style="font:normal 10px verdana; text-align:center;"><kbd style="font:normal 13px verdana;">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</figcaption> </figure> </div> <div style="float:left; width:255px; height:100px; margin-left:50px;"> <figure> <img align="left" src="imagens/porcento.jpg"/> <figcaption style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br></br>Para pagamento à vista.</figcaption> </figure> </div> </article> <div style="width:1000px; height:60px; float:left; background-color:white; color:#DDA0DD;"> <figure> <img align="left" src="imagens/joia-logo.jpg"/> <figcaption style="font:normal 18px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</figcaption> </figure> </div> </section> <div style="width:1000px; height:400px; float:left; background-color:white; margin-top:5px;"> <section> <article> <table align="center" style="margin-top:10px;"> <tr> <td><img src="imagens/alianca1.jpg"/></td> <td><img src="imagens/alianca2.jpg"/></td> <td><img src="imagens/alianca3.jpg"/></td> <td><img src="imagens/alianca4.jpg"/></td> </tr> <tr> <td><kbd style="font:normal 15px verdana;">Aliança de Ouro Lines</kbd><br/><kbd style="font:normal 12px verdana;">De R$2.500,00<br/>Por R$1.600.00 Á VISTA<br/> Em até 12x de R$133.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Noivado 3T5</kbd><br/><kbd style="font:normal 12px verdana;">De R$1.800,00<br/>Por R$900.00 Á VISTA<br/> Em até 12x de R$75.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Formatura 5Z</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td> <td><kbd style="font:normal 15px verdana;">Aliança de Ouro M17</kbd><br/><kbd style="font:normal 12px verdana;">De R$3.500,00<br/>Por R$2.100.00 Á VISTA<br/> Em até 12x de R$175.00</kbd></td> </tr> </table> </article> </section> </div> <div style="width:1000px; height:150px; float:left; background-color:black;"> <footer> <div style="float:left;"> <p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 20px;">INFORMAÇÕES</p><br/> <p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 20px;">Como comprar alianças<br/>Garantia<br/>Troca e Devoluções<br/>Regulamento<br/>Numeração das Alianças</p> </div> <div style="float:left;"> <p align="left" style="font:normal 20px verdana; color:yellow; margin:10px 0px 0px 50px;">CENTRAL DE VENDAS</p><br/> <p align="left" style="color:white; font:normal 12px verdana; margin:10px 0px 0px 50px;">(51) 3594-0001<br/>Nosso horário de atendimento é de:<br/>Segunda a Sexta das 8:30 às 17:30h,<br/>Sábado das 08:30h às 12:45h<br/>Exceto Domingo e Feriados</p> </div> <div style="float:left;"> <figure style="margin:50px 0px 0px 100px;"> <img style="padding-left:30px;" src="imagens/face.png"/> <img style="padding-left:30px;" src="imagens/insta.png"/> <img style="padding-left:30px;" src="imagens/twitter.png"/> <img style="padding-left:30px;" src="imagens/googlemais.png"/> </figure> </div> </footer> </div> </body> </html> E agora Dif ficou melhor? eu não sei eu vejo a apostila do curso e parece que tem algo errado sabe? como se quisessem explicar de qualquer forma, olha o que eu fiz Dif agora se alinhou os textos e as imagens, eu apenas acrescentei a float:left; neles e mudei o código, e a semântica ta certa agora ? do html 5? eu tenho mais umas dúvidas, quanto a quebra de linha qual é o certo usar? </br> <br/> ou <br> ? ta certo a utilização minha para a tag kbd?
  12. Natanael Marrafon Rocha
    Dif obrigado é que eu to fazendo os exercicios do meu curso e eu to procurando formas de diagramar o site eu fiz o que você falou de colocar tudo em divs, consegui alinhar a imagem á esquerda do texto mas eu to com um problema ficou desproporcional o tamanho do anuncio como faço para arrumar? eu coloquei até em cor vermelha para vizualizar ja tentei colocar o height todos do mesmo tamanho mas sempre fica assim eu estou fazendo dessa forma o css porque o curso está pedindo para treinar, <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Loja de Jóias</title> </head> <body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;"> <header style="width:1000px; height:180px; float:left; background-color:white;"> <figure> <img style="float:left;" src="imagens/logo.png"/> </figure> <figure style="float:right; margin-top:50px;"> <nav> <p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p> <a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/ alt="Inicio" title="Clique para abrir"></a> <a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a> <a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a> <a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a> </nav> </figure> </header> <section> <div style="width:1000px;"> <figure style="float:left; margin:0;"> <img style="margin-top:5px;" src="imagens/banner1.jpg"/> </figure> </div> <div style="width:1000px; height:200px; background-color:white; float:left; "> <p style="font:normal 18px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p> <div> <div style="display:inline-block; width:240px; height:200px; background-color:red;"> <figure> <img align="left" src="imagens/frete.jpg"/> <p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</p> </figure> </div> <div style="display:inline-block; width:290px; height:200px; background-color:red;"> <figure> <img align="left" src="imagens/troca.jpg"/> <p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</p> </figure> </div> <div style="display:inline-block; width:260px; height:200px; background-color:red; margin:0;"> <figure> <img align="left" src="imagens/porcento.jpg"/> <p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br>Para pagamento à vista.</p> </figure> </div> </div> </div> <div style="width:1000px; height:80px; float:left; background-color:white; color:#DDA0DD;"> <figure> <img style="float:left;" src="imagens/joia-logo.jpg"/> <p style="font:normal 18px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</p> </figure> </div> <div style="float:left; width:1000px; height:500px; background-color:white; margin-top:5px;"> </div> </body> </html>
  13. Natanael Marrafon Rocha
    Eu estou fazendo uma tarefa do meu curso de html/css eu queria saber se está certo o código que eu coloquei e como eu posso melhorar , tive um pouco de dificuldade para fazer as tabelas pois precisava colocar a imagem e na frente dela a mensagem eu fiz dessa forma e usei os quebra galhos do comando css position:relative e ajustei para ficar no meio da tela tinha forma melhor de fazer queria saber outra forma sem usar tabela ? <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Loja de Jóias</title> </head> <body style="width:1000px; background-color:#DDA0DD; text-align:center; margin:auto;"> <header style="width:1000px; height:180px; float:left; background-color:white;"> <figure> <img style="float:left;" src="imagens/logo.png"/> </figure> <figure style="float:right; margin-top:50px;"> <nav> <p style="font:normal 14px verdana; float:right; margin-top:30px; padding-left:30px;">Seja um </br> Franqueado</p> <a href="index.html"><img style="padding:10px; margin-bottom:10px;" src="imagens/home.jpg"/ alt="Inicio" title="Clique para abrir"></a> <a href="aliancas.html"><img style="padding:10px;" src="imagens/aliancas.jpg" alt="Alianças" title="Clique para abrir"/></a> <a href="noivado.html"><img style="padding:10px;" src="imagens/noivado.jpg" alt="Noivado" title="Clique para abrir"/></a> <a href="formatura.html"><img style="padding:10px;" src="imagens/formatura.jpg" alt="Formatura" title="Clique para abrir"/></a> </nav> </figure> </header> <section> <div style="width:1000px;"> <figure style="float:left; margin:0;"> <img style="margin-top:5px;" src="imagens/banner1.jpg"/> </figure> </div> <div style="width:1000px; height:150px; background-color:white; float:left;"> <p style="font:normal 22px verdana; margin:10; color:#DDA0DD;">ALIANÇAS DE COMPROMISSO, ALIANÇAS DE NOIVADO E ALIANÇAS DE CASAMENTO</p> <table style="float:left; position:relative; left:125px;"> <tr> <td><img src="imagens/frete.jpg"/></td> <td><p style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">FRETE GRATIS</kbd></br>Nas compras acima</br>de R$150.00</p></td> </tr> </table> <table style="float:left; position:relative; left:225px;"> <tr> <td><img src="imagens/troca.jpg"/></td> <td><p align="left" style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">30 DIAS PARA TROCA</kbd></br>Garantimos a troca</br>do seu pedido em até</br>30 dias após sua compra.</p></td> </tr> </table> <table style="float:left; position:relative; left:325px; top:10px;"> <tr> <td><img src="imagens/porcento.jpg"/></td> <td><p align="left" style="font:normal 10px verdana;"><kbd style="font:normal 13px verdana">10% DE DESCONTO</kbd></br>Para pagamento à vista.</p></td> </tr> </table> </div> <div style="width:1000px; height:80px; float:left; background-color:white; color:#DDA0DD;"> <figure> <img style="float:left;" src="imagens/joia-logo.jpg"/> <p style="font:normal 22px verdana; float:left; margin-left:10px; margin-top:5px;">DESTAQUES</p> </figure> </div> <div style="float:left; width:1000px; height:500px; background-color:white; margin-top:5px;"> </div> </body> </html>
  14. Natanael Marrafon Rocha
    DiF eu salvei o código que você colocou a cima para mim dar uma estudada, pelo que eu entendi você criou os botões "radio" com as tags, "label" e "nav" ai você criou varias as divs, colocou o conteudo, mas o que ligou cada conteudo a seus devidos menus esse é o código da ancora ? Infelizmente vou precisar ver explicações de como usar o atributo "~" porque nem no curso que estou fazendo consta isso e também não consta a medida "vh" e "vw" pelo que eu li vh = é 1/100 da largura da janela e vw = 1/100 da altura da janela, muito obrigado dif pela sua paciencia e explicações!
  15. Natanael Marrafon Rocha
    Eu carreguei uma imagem e um monte de titulo para testar mas não ta dando certo olha o meu código: HTML: <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Site</title> <link rel="stylesheet" type="text/css" href="css/estilo.css"/> </head> <body> <div class="tudo" align="center"> <div class="menu"> <ul align="center"> <li><a href="inicio.html" target="frame1">Inicio</a></li> <li><a href="localizacao.html" target="frame1">Localização</a></li> <li><a href="contato.html" target="frame1">Contato</a></li> <li><a href="sobre.html" target="frame1">Sobre</a></li> </ul> </div> <div class="banner1"> <img src="imagens/clinica1.jpg" width="995px" height="200px"> </div> <div class="tela"> <iframe class="meio" src="inicio.html" frameborder="0" scrolling="no" name="frame1"></iframe> </div> <div class="rodape"> <img src="imagens/rodape.png"> </div> </div> </body> </html> CSS: body { padding-top:100px; } .menu { position:fixed; top:0; z-index:1; width:100% } .menu ul li { display:inline-block; background-color:#02ECFD; padding:30px; border-radius:20px 0 20px 0; font-family:Arial Black; } .menu ul li a { text-decoration:none; color:white; } .menu ul li:hover { background-color:#038EF8; } .tela iframe { border-radius:20px 0 20px 0; width:985px; height:690px; border:#02ECFD; border-width:thick; border-style:solid; } .banner1 img { border-radius:20px 0 20px 0; } .rodape img { width:995px; height:125px; border-radius:20px 0 20px 0; padding-top:10px; } Olha só a imagem print se eu tirar o scrolling="no" ele aparece 2 barras de rolagem 1 do pai e a outra do iframe eu queria que aparecesse só a do pai:
  16. Natanael Marrafon Rocha
    Não deu certo colocando height:auto diminui a tela

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

Mais

×
×
  • Criar novo...