Publicidade

Rapadura

[Resolvido] Problema no Menu do Site ( ul , li )

Patrocínio:

Olá pessoal do fórum Imasters

 

estou com uma duvida nesse código que quero fazer um menu  utilizando as tags li e ul segue os códigos

 

OBS: no ul o home, news, contact, about funcionam menos o formulário  ele fica invisivel;-;

como mostra nesta print

-->  http://prntscr.com/emda2d

 

OBS: peguei esse codigo do W3schools :)

 

Index.html

Citar

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Web Site</title>
    <meta charset="utf-8">
    <meta name="author" content="Rapadura"> 
    <meta http-equiv="refresh" content="15">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>  
    <h1 >
        Web Site
    </h1>

<ul>
  <li><a href="menu/home.txt">Home</a></li>
  <li><a href="menu/news.txt">News</a></li>
  <li><a href="menu/contact.txt">Contact</a></li>
  <li><a href="menu/about.txt">About</a></li>
  <li><a href="menu/formulario.txt"Formulario></a></li>
</ul><br>

<img src="imagens/rapadura.jpg" alt="rapadura" usemap="#planetmap" style="width:200px;height:100%;">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="rapadura" href="imagens/rapadura.jpg">
  <area shape="circle" coords="90,58,3" alt="rapadura" href="imagens/rapadura.jpg">
  <area shape="circle" coords="124,58,8" alt="rapadura" href="imagens/rapadura.jpg">
</map>

</body>
</html>

 

Styles.css

Citar

body {
    background-color: powderblue;

}
h1 {
    color: blue;
}
p {
    color: red;
    border: 1px solid powderblue;
    padding: 100px;

}
ul {
    list-style-type: none;
    margin: 10;
    padding: 10;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

 

Deis de já agradeço

Rapadura.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

E qual sua dúvida, amigo? Você postou que tinha uma duvida, mas postou o código e um print-screen apenas.

 

Se sua dúvida é a respeito do item que não aparece, veja que seu código está errado.

 

Troque:

<li><a href="menu/formulario.txt"Formulario></a></li>

Por:

<li><a href="menu/formulario.txt">Formulario</a></li>

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá.

 

A tag  <a> foi fechada no lugar errado. Abaixo segue a linha corrigida.

 

<li><a href="menu/formulario.txt">Formulario</a></li>

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nossa kk obrigado pessoal por responderem resolveu kk Obrigado:sweat_smile: 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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

  • Próximos Eventos

  • Conteúdo Similar

    • Por kernmatheus
      Caros colegas,
       
      Preciso fazer um input em um formulário igual a este das tags, usado aqui no fórum.
      Não faço nem ideia de como fazer isso, alguém pode m dar uma ajuda?
       

       
       
      Aplicação:
      Preciso de um input onde o usuário possa digitar vários números de notas, o que me veio em mente foi algo como o exempo acima, onde, quando ele tecle "," o código reconheça e separe os valores.
    • Por lucasmmb
      Ola estou editando uma template pronta e atualmente não estou conseguindo diminuir a altura do box inteiro do menu.
      Saberiam me informar onde devo alterar segue exemplo.
      SEGUE IMAGEM DE COMO ESTÁ O MEU MENU E QUERO ALTERAR A ALTURA DO BOX INTEIRO DELE, ONDE DEVO ALTERAR NO MEU CSS.
       
      GRATO PELA AJUDA
       
       
      -----------------------------------------------------------  HTML -------------------------------------------------------------------------------------------------------
      header section -->
          <header class="top-header">
              <div class="container">
                  <div class="row">
                      <div class="col-xs-5 header-logo">
                          <br>
                          <a href="index.html"><img src="img/logo.png" alt="" class="img-responsive logo"></a>
                      </div>
                      <div class="col-md-7">
                          <nav class="navbar navbar-default">
                            <div class="container-fluid nav-bar">
                              <!-- Brand and toggle get grouped for better mobile display -->
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                </button>
                              </div>
                              <!-- Collect the nav links, forms, and other content for toggling -->
                              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                
                                <ul class="nav navbar-nav navbar-right">
                                  <li><a class="menu active" href="#home" >Home</a></li>
                                  <li><a class="menu" href="#about">Sobre</a></li>
                                  <li><a class="menu" href="#service">Orçamentos</a></li>
                                  <li><a class="menu" href="#team">Serviços</a></li>
                                  <li><a class="menu" href="#contact">Contato</a></li>
                                </ul>
                              </div><!-- /navbar-collapse -->
                            </div><!-- / .container-fluid -->
                          </nav>
                      </div>
                  </div>
              </div>
       
      -----------------------------------------------------------------------------  CSS  ----------------------------------------------------------------------------------------------------------------
       
      /*header area*/
      .top-header{
          background: #fff !important;
          position: fixed;
          width: 100%;
          z-index: 99999;
      }
      .header-backup{
          width: 20px;
          height: 119px;
          background: transparent;
          margin:auto;
      }
      .top-header img.logo{
          margin-bottom: 15px;
          margin-top: 0;
          transition:all .5s ease 0s;
        -webkit-transition:all .5s ease 0s;
        -moz-transition:all .5s ease 0s;
        -o-transition:all .5s ease 0s;
        -ms-transition:all .5s ease 0s;
      }
      .navbar-default {
        background-color: transparent;
        border-color: transparent;
        margin-bottom: 0;
        margin-top: 8px;
        transition:all .5s ease 0s;
        -webkit-transition:all .5s ease 0s;
        -moz-transition:all .5s ease 0s;
        -o-transition:all .5s ease 0s;
        -ms-transition:all .5s ease 0s;
      }
      .nav-bar{
          margin-top: 27px;
      }
      .navbar-toggle span{
          color: #fff;
      }
      ul.nav{
          margin: 0;
          padding: 0;
      }
      .navbar-default .navbar-nav>li>a {
           font-size: 24px;
          color: #000;
          text-transform: uppercase;
          transition: all .7s ease 0s;
          -webkit-transition: all .7s ease 0s;
          -moz-transition: all .7s ease 0s;
          -o-transition: all .7s ease 0s;
          -ms-transition: all .7s ease 0s;
          padding: 14px 15px;
          font-weight: bold;
      }
      .navbar-default .navbar-nav>li>a:hover{
          color: #999;
      }
      .navbar-default .navbar-toggle .icon-bar {
        background-color: #000;
      }
      li a.active{
          color: #FF8C00 !important;
      }
      .navbar-default .navbar-toggle {
        border-color: #fff;
        margin-top: 4px;
      }

    • Por Nathan1408
      Bom dia, estou desenvolvendo um site para um e-mail marketing, ele esta pronto, mas andei olhando na internet e vi que da para deixar responsivo sem usar media query... e tentei fazerm alguns sites explica, mas não consegui entender direito mas consegui desenvolver, a diferença é que não esta funcionando... tenho um td com duas colunas e queria quebrar elas... deixar uma embaixo da outra quando for mobile... passar de 480px ele já quebra. Mas não esta funcionando...
      eu quero que essa parte que quebra em dois... fique um embaixo do outro.  (Segue a imagem)
       
       
      Código html: 
       
       
      <!DOCTYPE html> <html> <head></head> <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-ms-text-size-adjust: 100%; font-size: 14px; -webkit-text-size-adjust: 100%; background-color: #ffffff; font-family: Tahoma, Verdana, sans-serif; text-align: center; -webkit-font-smoothing: antialiased; width: 100% !important;"> <center style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #ffffff; font-family: Tahoma, Verdana, sans-serif; font-size: 14px; width: 100%;"> <div style="max-width: 600px; -webkit-text-size-adjust: none; text-align: left; width: 94%;" align="left"> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" style="max-width: 600px;"> <tr height="90"> <td bgcolor="#fff" width="0%" height="0%"></td> <td bgcolor="#fff" border="0" height="100%" valign="middle" align="left"> <a href="#" style="-webkit-text-size-adjust: none;"> <img src="https://i2.wp.com/veropublic.wpengine.com/wp-content/uploads/2015/11/apple-iphone6-email-marketing.jpg?resize=780%2C873" alt="Verollate" width="100%" height="auto" border="0" style="color: #000;"></a> </td> <td bgcolor="#fff" width="0%" height="0%"></td> </tr> </tr> <tr> <td bgcolor="#000" width="0%" height="0%"></td> <td bgcolor="#000"> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#000" width="100%" style="display: inline-block; vertical-align: top; max-width: 552px;"> <tr> <td id="carrinho" bgcolor="#000" style="border-color: #000; width: 34%; border-width: 25px 10px 25px; vertical-align: top; height: auto; border-style: solid; color: #000; font-size: 14px; text-align: left; -webkit-text-size-adjust: none;" align="left"> <img src="https://i2.wp.com/veropublic.wpengine.com/wp-content/uploads/2015/11/apple-iphone6-email-marketing.jpg?resize=780%2C873" alt="Carrinho verollate" width="100%" border="0"></a> </td> <td id="conteudo-1" bgcolor="#000" style="border-color: #000; width: 66%; border-width: 10px 10px 20px; border-style: solid; color: #fff; font-size: 14px; text-align: left; -webkit-text-size-adjust: none; vertical-align: center;" align="left"> Tenho o prazer de lhe apresentar a <b>Vero Latte</b>, uma nova experiência de gelato, elegante no tamanho e no modo de servir. Quando a criei, em 2014, foi pensando justamente em momentos únicos da vida. E a celebração de um casamento é um desses momentos. <br><br> Cada receita e desenvolvida por mim com paixão e exclusividade, por meio da utilizção de nobres ingredientes em uma produção legitimamente artesanal. Será muito especial ter a oportunidade de apresentar nossa marca a você. <br><br> Então, eu gostaria de convidá-la para conhecer o showroom da Vero Latte e participar de uma deliciosa tarde de degustação em nosso espaço. <br><br> Aguardo sua presença, <br> Mariana Galvão <br> (11)2506-9295 </td> </tr> </table> </td> <td bgcolor="#000" width="0%" height="0%"></td> <tr bgcolor="#ffffff"> <td colspan="3" align="center"> <img src="https://thumbs.dreamstime.com/t/fita-vermelha-33946534.jpg" width="100%" height="auto" /> </td> </tr> </table> </div> </center> </body> </html> Se alguém conseguir me ajudar, fico feliz, obrigado....