Jump to content
Artes Ussler

Barra estilo sublinhado

Recommended Posts

Olá

 

Depois de muita pesquisa e testes, consegui fazer o CSS do assunto em questão aqui:

 

<style type="text/css">
h1 {
	position:relative; font-family:"Open Sans"; display:block; color:#000; font-size:1.4em; font-weight:700; text-transform:uppercase; text-align:center
}
h1:after {
	position:absolute; bottom:-5px; left:0; right:0; margin:auto; width:60px; content:'.'; color:transparent; background:#f26522; height:3px
}
p {
	font-family:"Open Sans"; color:#999; font-size:0.9em;
}
</style>
<h1>TÍTULO</h1>
<p>Meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui.</p>

Se está correto? Não sei, mas funcionou, fez o que eu precisava.

Estou postando aqui para que outras pessoas, assim como eu, iniciante, estejam buscando ajuda neste sentido.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By phpcoder
      OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta.
      input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value="">
      input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value=""
        
      input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value="">
        input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value=""
        input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value=""
        
      input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value=""
       
       input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>"

      GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA. 
    • By douglas79
      Bom dia,
       
      Estou seguindo uma vídeo aula no Youtube e o instrutor lá colocou uma sequência de div's (seja id ou class), o seletor background não funciona.

      Vou postar o código até o momento:
       
      @charset "utf-8";
       
      body, ul{padding:0;margin:0;background: #e2e2e2;list-style: none;}
      #geral{overflow: hidden;}
      #geral #topo{width:1018px;margin:0 auto;overflow: hidden;}
      #geral #topo #logo, #menuTopo{float:left;width:400px;}
      #geral #topo #logo{background:#ccc;}
      #geral #topo #menuTopo{}
      #geral #topo #menuTopo li{float:left;padding:5px;}

      Alguém pode me tirar essa dúvida???
      Desde já, agradeço!
    • By a52
      Boa tarde. Estou tentando imprimir rodapé de forma fixa em todas as páginas. Com o código abaixo eu consigo fazer, porém, acaba sobrescrevendo algumas linhas da tabela. Tentei utilizar @pages mas lendo sobre o assunto descobri que nas versões mais recentes do chrome já não funciona mais.
       
      <style type="text/css" media="print">     table { page-break-inside:auto; margin-bottom: 10px; }     tr    { page-break-inside:avoid; page-break-after:auto; }     thead { display:table-header-group }     tfoot { display:table-footer-group }     /* .fixedhh td { height: 50px; } */     div.footer {         display: block;         position: fixed;         bottom: 0;         /* height: 45px; */     }          /* @media print {         div#pages {             display: table-footer-group;             counter-increment: page;         }         div#pages:after {             content:"Página " counter(page);          }     } */ </style> <div class='footer'> <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: ________________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label> <div id='pages' class='pages'></div> </div>   É um código legado que armazena todo o conteúdo numa tag $html em php e depois imprime na tela. Existe alguma outra alternativa para esse caso? Obrigado pela atenção.    
    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
    • By gustavo marcos
      Pessoal,
      estou tentando fazer um menu dropdown, porém quando clico nas seta para abrir o itens do submenu, não funciona. Poderia em auxiliar:
      Modelo:

       
      Segue o código html:
      <html> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="style.css" rel="stylesheet" type="text/css"/> <title></title> </head> <body> <div class="wrapper d-flex align-items-stretch"> <nav id="sidebar"> <div class="p-4 pt-5"> <a href="#" class="img logo rounded-circle mb-5" style="background-image: url(images/logo.jpg);"></a> <ul class="list-unstyled components mb-5"> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">Home 1</a> </li> <li> <a href="#">Home 2</a> </li> <li> <a href="#">Home 3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">Page 1</a> </li> <li> <a href="#">Page 2</a> </li> <li> <a href="#">Page 3</a> </li> </ul> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> <div class="footer"> <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib.com</a> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p> </div> </div> </nav> <!-- Page Content --> <div id="content" class="p-4 p-md-5"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-primary"> <i class="fa fa-bars"></i> <span class="sr-only">Toggle Menu</span> </button> <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <h2 class="mb-4">Sidebar #01</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <script src="bootstrap.min.js" type="text/javascript"></script> <script src="jquery.min.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> <script src="popper.js" type="text/javascript"></script> </body> </html>  
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.