Ir ao conteúdo
  • Cadastre-se

Natanael Marrafon Rocha

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    25

  • Cadastrado em

  • Última visita

 Tipo de conteúdo 

Tudo que Natanael Marrafon Rocha postou

  1. 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 ?
  2. 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.
  3. 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 ?
  4. 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; }
  5. 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...
  6. 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á!
  7. Natanael Marrafon Rocha
    Obrigado DIF kkk erro de iniciante
  8. 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); }
  9. 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>
  10. 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?
  11. 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>
  12. 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>
  13. 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!
  14. 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:
  15. Natanael Marrafon Rocha
    Não deu certo colocando height:auto diminui a tela
  16. Natanael Marrafon Rocha
    Ja tentei esses comandos apenas continua o rodapé para baixo infinitamente
  17. Natanael Marrafon Rocha
    De que forma posso fazer com que o iframe se adaptse a postagens do meu site para aumentar a area de postagem automaticamente ? tipo eu coloquei que meu iframe tem width:950px; e height:690px; existe uma forma que eu não precise colocar o tamanho do iframe e conforme vou postando coisas no site ele aumente o site automaticamente sem aparecer o scroll do mouse do iframe e sim do body "Pai"?
  18. Natanael Marrafon Rocha
    Nossa que da hora, eu vou iniciar meu curso php aqui na minha cidade após terminar o meu de html e css, tomara que o curso envolva isso também
  19. Natanael Marrafon Rocha
    Nossa Dif muito obrigado pelas suas respostas, está me salvando muito a unica coisa eu coloquei o align center na div mas o meu menu é position:fixed quando eu diminiu o zom apenas ele vai para a esquerda o resto fica centralizado como faço ? codigo do menu é esse CSS: HTML:
  20. Natanael Marrafon Rocha
    Então tecnicamente falando esse site com dinamismo é com iframe ? como eu citei ? cria-se o index coloca-se o iframe e cria cada uma das paginas sozinhas ?
  21. Natanael Marrafon Rocha
    Eu vejo em muitos videos os webdesigners fazem o index.html e apenas fazem 4 ou 5 cópias dependendo do tanto de links que o site tem e apenas o renomeiam com seus devidos nomes, estou fazendo um site institucional e eu fiz desta maneira, esta correta ? por que no caso se eu for fazer um site E-Comerce eu crio no index a parte de postagem e apenas coloca um iframe e crio as paginas uma por uma existe alguma maneira de fazer certo ? Meu site institucional: Código: Site: (o banner peguei da internet como teste)
  22. Natanael Marrafon Rocha
    Como eu faço para o meu site quando eu der um zoom nele rolando o scroll do mouse ele não ir diminuindo para a esquerda como está na imagem ? Igual quando diminui o zoom no google e ele fica centralizado ao meio ? eu coloquei "display:inline-block" no meu site mas apenas funciona com o menu, depois eu coloquei o meu menu com a "position:fixed" e parou de ficar centralizado e voltou a esquerda do mesmo jeito. Ficar assim:
  23. Natanael Marrafon Rocha
    Estou em desenvolvimento de um site e estou com um pequeno problema, estou fazendo o rodapé do site, estou tentando fazer via CSS e lá embaixo na tela de rolagem sempre fica um espaço entre o site e o rodapé só que infelizmente ele fica colocado na tela de postagem, tentei colocar "position:absolute" e mandar o rodapé para baixo e até mesmo fiz com o "position:relative" com o comando "top:10px" da o espaço que eu queria entre a tela de postagem e o rodapé só que ao fazer isso ele fica colado no final da tela como está na imagem qual é o melhor jeito de fazer para deixar o espaço entre a tela de postagem e o rodapé e tambem entre o rodapé e o final do site ? tentei dar padding também, só que como não é uma imagem que estou colocando como rodapé ele apenas continua o rodapé para baixo não estou conseguindo deixar o espaço como é a melhor maneira ? o meu site tem o menu com "position:fixed" e um "padding:top" para empurrar o "pai" para baixo porisso o menu esta flutuando ai. 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="menu"> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="localizacao.html">Localização</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="sobre.html">Sobre</a></li> </ul> </div> <div class="banner1"> <img src="imagens/clinica1.jpg" width="995px" height="200px"> </div> <div class="tela"> <div class="meio"></div> </div> <div class="rodape"> </div> </body> </html> CSS body { padding-top:100px; } .menu { position:fixed; top:0; left:200px; z-index:1; } .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 { width:995px; height:720px; background-color:#02ECFD; border-radius:20px 0 20px 0; position:relative; } .tela .meio { border-radius:20px 0 20px 0; width:950px; height:690px; background-color:#FFFFFF; position:relative; left:25px; top:20px; } .banner1 img { border-radius:20px 0 20px 0; } .rodape { width:995px; height:125px; background-color:#02ECFD; border-radius:20px 0 20px 0; }
  24. Natanael Marrafon Rocha
    Eu entendi o que você fez voce colocou a imagem inteira usando background e apenas citou no meio na imagem o tamanho do iframe, então eu estava tentando fazer as partes das bordas se juntarem com a tabela apenas usando HTML e eu pesquesei na internet e consegui achar uma solução eu apenas pintei as bordas das tabelas de preto, mas nossa obrigado eu nem tinha noção de como fazer da forma mais simples usando CSS , olha a imagem e o código apenas acrescentei a tag bgcolor e coloquei da mesma cor da imagem, mas é claro que isso não daria certo de fosse por exemplo com textura a caixa <table align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td colspan="3"><img src="status/status.jpg"/></td> </tr> <tr> <td><img src="status/barra-direita.jpg"/></td> <td><iframe src="teste.html" width="250" height="152"></iframe></td> <td><img src="status/barra-direita.jpg"/></td> </tr> <tr> <td colspan="3"><img src="status/barra-baixo.png"/></td> </tr> <tr>
  25. Natanael Marrafon Rocha
    Estou precisando de ajuda entrei no curso de HTML + CSS e estou praticando em casa HTML eu criei um site teste apenas para testar comando e esses tipos de coisas tenho amigos que tem curso em programação também e eu estou tentando criar um quebra-cabeça com o uso de inserção de imagem em tabelas o meu problema é esse eu criei uma div com as tabelas e estou tentando fazer ela se encaixar ja tentei todo tipo de comando html mas não consegui estou tetando as barrinhas se encaixarem acima na barra escrito "Status" e do outro lado da tabela outra barrinha preta e abaixo também para ficar só um quadrado branco no meio para mim inserir um "iframe" para mostrar o status de algo só que não estão se encaixando o meu código ficou assim <div> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><img src="status/status.jpg"/></td> </tr> <tr> <td><img src="status/barra-direita.jpg"/></td> <td><img src="status/meio-branco.jpg"/></td> <td><img src="status/barra-direita.jpg"/></td> </tr> <tr> <td colspan="3"><img src="status/barra-baixo.jpg"/></td> </tr> </table> </div>

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...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!