Jump to content
marcelocardoso

limitar itens paginação...

Recommended Posts

olá pessoal.

Estou disponibilizando um script para paginação de noticias, ele funciona, porém, ao adaptar codigo usado da internet, não encontrei maneiras de LIMITAR os REGISTROS.
Se alguém quiser contribuir, na parte da paginação, agradeço.

preciso limitar os registros em 10 em 10 a paginação
primeiro < 1 2 3 4 5 6 7 8 9 10 > ultimo

 

            <section class="container-fluid">
                <div class="row mb-5">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5">
                        <h1 class="text-center">
                            Informações e noticias
                        </h1>
                        <h3 class="text-center">
                            Atualizações diárias de conteúdos advocatícios e judiciais
                        </h3>
                    </div>
                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-12 mt-2 p-5" style="height: auto;">
                        <%
                         IF IsEmpty(Request.QueryString("idnot")) OR IsNull(Request.QueryString("idnot")) THEN
                               SQL1 = "SELECT * FROM dbluz_noticias ORDER BY id DESC LIMIT 1"
                            ELSE
                               SQL1 = "SELECT * FROM dbluz_noticias WHERE id = "& Request.QueryString("idnot") &" ORDER BY id DESC LIMIT 1"
                         END IF

                           SET strNoticias = Server.CreateObject("ADODB.Recordset") 
                               strNoticias.Open SQL1, conexao, 3, 3
                            IF strNoticias.EOF THEN
                        %>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                            <h1>AVISO!</h1>
                            <h4 style="color: green;">
                                Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.
                            </h4>
                        </div>
                        <%
                        ELSE
                        DO WHILE NOT strNoticias.EOF
                        %>
                        <div class="box-noticias-data">
                            <%=strNoticias("dbluz_data")%>
                        </div>
                        <div class="box-noticias-subtitulo">
                            <%=strNoticias("dbluz_subtitulo")%>
                        </div>
                        <div class="box-noticias-titulo mt-4">
                            <%=strNoticias("dbluz_titulo")%>
                        </div>
                        <div class="box-noticias-descricao mt-5 text-justify">
                            <%=strNoticias("dbluz_descricao")%>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right box-noticias-fonte line-dotted-top mt-3 mb-5 p-2">
                            <span class="mb-5 mt-2 p-2 bg-success">
                                <a href="index.asp?idnot=<%=strNoticias("id")%>" role="button" class="btn btn-clean">
                                    <span class="fa fa-print fa-1x font-color-var1"></span>
                                </a>
                            </span>
                        </div>
                        <%
                            strNoticias.MoveNext
                                   Loop
                        SET strNoticias = Nothing
                        %>
                    </div>


                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-5 p-0">
                        <%
                    SQL2 = "SELECT * FROM dbluz_noticias "
                       SET strNoticiasBlocos = Server.CreateObject("ADODB.Recordset") 
                           strNoticiasBlocos.Open SQL2, conexao, 3, 3
                        IF strNoticiasBlocos.EOF THEN
                    %>
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                                <h1>AVISO!</h1>
                                <h4 style="color: green;">Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.</h4>
                            </div>
                        </div>
                        <%
                        ELSE

                                ItensExibidos = 1 'Qtde de Itens'          
                               NumeroDaPagina = Request.QueryString("pg")
                            IF NumeroDaPagina = "" THEN NumeroDaPagina = 1 

                                TotalDeRegistros = UBound(strNoticiasBlocos.GetRows,2)+1  
                                    InicioDaPagina = ((ItensExibidos*NumeroDaPagina)-ItensExibidos)  
                                    FinalDaPagina = ItensExibidos

                                    IF TotalDeRegistros <= ItensExibidos THEN
                                            PaginaTotal = 1  
                                        ELSEIF (TotalDeRegistros MOD ItensExibidos = 0) THEN  
                                            PaginaTotal = (TotalDeRegistros/ItensExibidos)  
                                        ELSE  
                                            PaginaTotal = (TotalDeRegistros/ItensExibidos) + 1  
                                            PaginaTotal = Cint(PaginaTotal)  
                                    END IF

                             strNoticiasBlocos.close

                        SQL3 = SQL2 & "WHERE id != (SELECT max(id) FROM dbluz_noticias) ORDER BY id DESC LIMIT "& InicioDaPagina &" , "& FinalDaPagina &""
                               strNoticiasBlocos.Open SQL3, conexao, 3, 3
                        %>
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                                <%  
                                DO WHILE NOT strNoticiasBlocos.EOF
                                %>
                                <div class="box-noticias-data-min"><%= strNoticiasBlocos("dbluz_data")%></div>
                                <div class="box-noticias-titulo-min mt-1 mb-1">
                                    <a href="index.asp?idnot=<%=strNoticiasBlocos("id")%>" class="">
                                        <%= strNoticiasBlocos("dbluz_titulo")%>
                                    </a>
                                </div>
                                <div class="box-noticias-descricao-min hidden-sm hidden-xs mb-4 line-dotted-top">
                                    <%= LEFT(strNoticiasBlocos("dbluz_descricao"),200)%>
                                </div>
                                <%   
                                 strNoticiasBlocos.MoveNext
                                              Loop
                                %>
                            </div>
                            <%   
                                END IF
                            END IF
                            %>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12">

                            <ul class="pagination pagination-sm">
                                <% 
                                IF Cint(NumeroDaPagina) = 1 THEN 
                                %>
                                <li class="page-item disabled">
                                    <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a>
                                </li>
                                <li class="page-item disabled">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a>
                                </li>


                                <% 
                                ELSE 
                                %>
                                <li class="page-item">
                                    <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a>
                                </li>
                                <% 
                                END IF
                                %>



                                <%
                                FOR intID = 1 TO PaginaTotal
                                    IF intID = Cint(NumeroDaPagina) THEN  
                                %>
                                <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li>
                                <%
                                ELSE
                                %>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=intID%>">
                                        <%=intID%>
                                    </a>
                                </li>
                                <%
                                END IF
                                    NEXT
                                %>


                                <%
                                IF Cint(NumeroDaPagina) = PaginaTotal THEN 
                                %>
                                <li class="page-item disabled">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a>
                                </li>
                                <li class="page-item disabled">
                                    <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a>
                                </li>
                                <%
                                ELSE
                                %>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a>
                                </li>
                                <%
                                END IF
                                %>


                            </ul>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12">
                            <div class="text-right p-1" style="font-size: 10px;">
                                Navegando na página <b id="barra_numero"><%= NumeroDaPagina %></b> de <b id="barra_total"><%= PaginaTotal %></b>
                            </div>
                            <div class="text-right p-1" style="font-size: 10px; color: dimgray;">
                                TOTAL DE <b id="barra_registro"><%= TotalDeRegistros %></b> REGISTROS
                            </div>
                        </div>

                    </div>
                </div>
            </section>

CODIGO DA PAGINACAO EXTRAIDO DA PARTE DE CIMA, a parte que preciso ajustar....

 

<ul class="pagination pagination-sm">
                                <% 
                                IF Cint(NumeroDaPagina) = 1 THEN 
                                %>
                                <li class="page-item disabled">
                                    <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a>
                                </li>
                                <li class="page-item disabled">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a>
                                </li>


                                <% 
                                ELSE 
                                %>
                                <li class="page-item">
                                    <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a>
                                </li>
                                <% 
                                END IF
                                %>



                                <%
                                FOR intID = 1 TO PaginaTotal
                                    IF intID = Cint(NumeroDaPagina) THEN  
                                %>
                                <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li>
                                <%
                                ELSE
                                %>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=intID%>">
                                        <%=intID%>
                                    </a>
                                </li>
                                <%
                                END IF
                                    NEXT
                                %>


                                <%
                                IF Cint(NumeroDaPagina) = PaginaTotal THEN 
                                %>
                                <li class="page-item disabled">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a>
                                </li>
                                <li class="page-item disabled">
                                    <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a>
                                </li>
                                <%
                                ELSE
                                %>
                                <li class="page-item">
                                    <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a>
                                </li>
                                <%
                                END IF
                                %>

Desde já obrigado...
 

Share this post


Link to post
Share on other sites

acabei penando para fazer um paginação, depois de tanto estudar... 
não consegui e nem peguei mais esta acima, ainda ficando para ajustar os itens...
mas adaptei uma de PHP, transpus para ASP e fiz os ajustes necessários...

também utilizei o bootpag como solução para o caso que precisava...
vou postar também, para ajuda a quem precisar de algo legal em ASP.

até mais, e obrigado pelo lembrete.
até... MICHAEL

Share this post


Link to post
Share on other sites

Olá colegas e MICHAEL...
como mencionado, para ajuda, para ninguém penar...
segue exemplo de paginação adaptada de PHP para ASP, com limitação de registros....

CODE
Index.asp
 

<!--#include file="conn.asp"-->

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootpag@1.0.7/lib/jquery.bootpag.min.js"></script>

    <style type="text/css">
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        .flex-container {
            height: 100%;
            padding: 0;
            margin: 0;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .flex-item {
            padding: 0px;
            height: auto;
            margin: 0px;
            line-height: 20px;
            text-align: center;
        }
    </style>
    </head>

    <body>

    <div class="flex-container">
        <div class="row">
            <div class="flex-item">
                <div class="bootpag-content">
                    Conteúdo dinâmico gerado pelo BANCO DE DADOS - MySQL + ASP + AJAX
                </div>
                <div class="bootpag-pagination"></div>
            </div>
        </div>
        <div class="bootpag-loading"></div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
    			$(".bootpag-content").load("data.asp");

    			$(".bootpag-pagination").bootpag({
    				total: <%= total_pages %>,
    				page: 1,
    				maxVisible: 5

    			}).on("page", function (e, num) {
    				e.preventDefault();
    					$.ajax({
                          url: "data.asp?page=" + num
                        }).done(function(data) {
                          $(".bootpag-content").html(data);
                        });
    		    });
             });
    </script>

    </body>
</html>

data.asp
 

<!--#include file="conn.asp"-->

<%
          id_page = Trim(Request.QueryString("page"))
   IF NOT id_page = "" AND NOT id_page = "0" THEN
        IF IsNumeric(id_page) THEN
           page_no = id_page
        ELSE
           page_no = 1
        END IF
   ELSE
      page_no = 1
   END IF

   limit_start = ((page_no-1) * limit_row)

   SET strRS = Server.CreateObject("ADODB.RECORDSET")
   SET strRS = conexao.execute("SELECT * FROM dbnoticias ORDER BY id DESC LIMIT "& limit_start &", "& limit_row &"")

        IF strRS.EOF OR total_count = "0" THEN
            Response.Write "<b>Não existem registros a serem exibidos!</b>"
        ELSE
            DO WHILE NOT strRS.EOF
                Response.Write "<ul><li style=""font-size: 11px;""><b style=""color: black;"">["& strRS("id") &"]</b> ["& strRS("dbdata") &"] | "& strRS("dbtitulo") &"</li></ul>"
            strRS.MoveNext
                  Loop

        END IF

   SET strRS = nothing
   SET strCT = nothing

       conexao.close
   SET conexao = nothing
%>

conexao.asp
 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
    SET conexao = Server.CreateObject("ADODB.CONNECTION")
        conexao.open "DRIVER={MySQL ODBC 8.0 ANSI DRIVER}; SERVER=localhost; DATABASE=banco; UID=root; PWD=; PORT=3306; OPTION=3;"

    SET strCT = Server.CreateObject("ADODB.RECORDSET")
    SET strCT = conexao.execute("SELECT count(*) AS id FROM dbnoticias")

        limit_row   = 1
        total_count = CInt(strCT(0))
        total_pages = CInt((total_count/limit_row))
%>

 

uma ótima paginação, podendo adaptar, simples, rapida e com uso de bootpag e outras do genero, fácil de adaptar....
meu esforço, ta aí... só adaptarem para que não sabe como eu também... 1 semana até conseguir fazer bem...
até...

Share this post


Link to post
Share on other sites

Segue agora outro exemplo, agora com busca, bem mais compacto e também mais reduzido, comprimido, resumido...
apenas dois arquivos.

index.asp
 



                    <!--#include file="inc/count.asp"-->
                    <form method="post" action="?menu=item">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 text-left m-0 mt-2 p-0">
                                                <button class="btn btn-success fa fa-pencil fa-1x mb-2 pull-left" type="button" onclick="window.location='?menu=inserir';"></button>
                                                <p class="text-left mr-3 mt-1">Inserir um novo registro!</p>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 input-group text-right m-0 mt-2 p-0">

                                                <input id="busca" name="busca" type="text" class="form-control" placeholder="Digite o que deseja buscar ..." value="<%=busca%>">

                                                <span class="input-group-btn m-0 p-0">
                                                    <input class="btn btn-warning" type="submit" value="BUSCAR" />
                                                </span>

                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <%
                            IF bootPAG.EOF OR tCount = "0" THEN
                            %>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td class="text-center">
                                            Nao existem registros para a busca: <b style="color: green;"><%= busca %></b>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <%
                            ELSE
                            %>
                            <table class="table table-bordered table-borderless table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th class="text-center hidden-xs">ID</th>
                                        <th class="text-center hidden-xs">DATA</th>
                                        <th class="text-center hidden-xs">HORA</th>
                                        <th class="text-left">TITULO</th>
                                        <th class="text-left hidden-xs">SUBTITULO</th>
                                        <th class="text-center">OPCOES</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <div id="bootpag-conteudo"></div>
                                </tbody>
                            </table>
                            <%
							END IF
							%>
                            <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12 text-right" style="padding-top: 25px; font-size: 10px; color: darkgrey;">
                                <%
                            IF tPages < 1 THEN
							%>
                                Você está navegando na p&aacute;gina | <b><%=page%></b> |
                                <%
							ELSE
							%>
                                Você está navegando na p&aacute;gina | <b><%=page%></b> de <b><%=tPages%></b> |
                                <%
                            END IF
							%>
                            </div>
                            <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12 text-right" style="padding-top: 10px; font-size: 10px; color: darkgrey;">
                                TOTAL DE | <b><%=tCount%></b> | REGISTROS ENCONTRADOS
                            </div>
                        </div>
                    </form>

                    <div id="bootpag-paginacao"></div>

                    <script type="text/javascript">

                    $(document).ready(function() {
                            var numBusca = $("input[name=busca]").val();
                            $("#bootpag-conteudo").load("inc/ajax.asp?busca="+ numBusca +"");
                            $("#bootpag-paginacao").bootpag({
                                total: <%=tPages %>,
                                page: 1,
                                maxVisible: 4,
                                leaps: false,
                                firstLastUse: true,
                                nextClass: 'next',
                                next: '<span class=" fa fa-chevron-right"></span>',
                                prevClass: 'prev',
                                prev: '<span class=" fa fa-chevron-left"></span>',
                                firstClass: 'first',
                                first: '<span class=" fa fa-home"></span>',
                                lastClass: 'last',
                                last: '<span class=" fa fa-arrow-right"></span>',
                                activeClass: 'active',
                                disabledClass: 'disabled'
                            }).on("page", function(e, numPag){
                                e.preventDefault();
                                $("#bootpag-conteudo").load("inc/ajax.asp?page="+ numPag +"&busca="+ numBusca +"");
                            });
                        });
                    </script>
                </div>

count.asp
 

<%
'limpa a variavel
 busca = ""

'resgato as variaveis
 busca = Request("busca")
   pag = Trim(Request.QueryString("page"))

'verifico que pagina estou
 IF NOT pag = "" AND NOT pag = "0" THEN
	IF IsNumeric(pag) THEN
		  page = pag
	ELSE
		  page = 1
	END IF
 ELSE
	  page = 1
 END IF

'faz a contagem de registros total do banco de dados
 SET bootCOUNT = conexao.execute("SELECT COUNT(*) AS id FROM table WHERE titulo LIKE '%"& busca &"%'" &_
                                 "OR subtitulo LIKE '%"& busca &"%'" &_ 
								 "OR descricao LIKE '%"& busca &"%'")

'defino a contagem de registros encontrados pelo count
 tCount = CInt(bootCOUNT(0))

'defino o limite de linhas (qtde) ou (registros exibido na tela)
 tRow = 1

'defino o total de registros e divido pelo limite de linhas
 tPages = CInt((tCount/tRow))

'defino a posicao final do limit da query MYSQL
 tPosition = ((page-1) * tRow)

 SET bootPAG = conexao.execute("SELECT * FROM table WHERE titulo LIKE '%"& busca &"%'" &_
	                           "OR subtitulo LIKE '%"& busca &"%' OR descricao LIKE '%"& busca &"%' " &_
							   "ORDER BY id DESC LIMIT "& tPosition &", "& tRow &"")
%>

noticias.asp
 

<!--#include file="conn.asp"-->
<!--#include file="count.asp"-->

<%
DO WHILE NOT bootPAG.EOF

      Response.Write "<td class=""text-center hidden-xs"">"& bootPAG("id") &"</td>"
      Response.Write "<td class=""text-center text-muted hidden-xs"">"& FormataDataBrasileiro(bootPAG("data")) &"</td>"
      Response.Write "<td class=""text-center text-muted hidden-xs"">"& FormataHora(bootPAG("hora")) &"</td>"
      Response.Write "<td class=""text-left hidden-xs""><b>"& bootPAG("titulo") &"</b></td>"
      Response.Write "<td class=""text-left text-muted"">"& bootPAG("subtitulo") &"</td>"
      Response.Write "<td class=""text-center"" style=""vertical-align: middle;"">"
      Response.Write "<button class=""btn fa fa-wrench"" type=""button"" onclick=""window.location='?menu=atualizar&id="& bootPAG("id") &"'""></button>"
      Response.Write "<button class=""btn btn-delete fa fa-trash-o"" type="" button"" data-id="""& bootPAG("id") &"""""></button>"
      Response.Write "</td>"

      bootPAG.MoveNext
      LOOP
%>

uma ótima paginação para estudo, implementação utilizando bootpag...
dá para personalizar a vontade...
segue exemplo que FUNCIONA,
bons estudos...
até...

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 danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

    • By pheureunanda
      Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 
      Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 
       
      E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 
       
      Se alguém puder me ajudar... Estou recorrendo a esse fórum. 
    • By julianaparra
      Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.
      Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 
       
      Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/
       
      HTML
      <!DOCTYPE html> <html lang="pt-BR">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="./css/main.css">     <title>Juliana Parra</title> </head>   <body>     <header class="menu-principal">         <main>             <div class="header-1">                 <div class="logo">                     <a href="index.html">                         <img src="./img/logo.png" />                     </a>                 </div>                 <div class="links">                     <div class="menu">                         <nav>                             <ul>                                 <li><a href="index.html">Início</a></li>                                 <li><a href="sobre.html">Sobre</a></li>                                 <li><a href="portifolio.html">Portifolio</a></li>                                 <li><a href="contato.html">contato</a></li>                             </ul>                         </nav>                     </div>                     <ul class="redes-sociais">                         <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"                                     alt="Meu github"></a></li>                         <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img                                     src="./img/linkedin.png" alt="Meu linkedIn"></a></li>                     </ul>                 </div>             </div>         </main>     </header>     <div class="header-2">         <div class="imagem-fundo"></div>         <div class="container"></div>           <div class="imagem-miolo">             <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">         </div>     </div>     <div>         <div class="texto">             <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>                 Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,                 excepturi tempore nemo porro vel sequi ea quisquam velit sunt?                 Recusandae quidem aperiam tenetur.</p>             <div class="botao">                 <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>             </div>         </div>     </div>     <footer>         <div class="rodape">             <main>                 <div class="direitos-reservados">                     2019 Todos os Direitos Reservados                 </div>             </main>         </div>     </footer> </body>   </html>     //CSS   body {     font-family: 'Open Sans', sans-serif;        width: 100%;     height: 100%;     margin: 0 auto;        } .menu-principal {     background-color: #252323;     height: 68px;     width: 100%;             } main {     margin: 0 auto;     width: 980px;         position: relative; } .logo {     float: left;     padding: 10px;     width: 30%; } .links ul li {     margin-left: 20px;     display: inline-block;     float: left;     list-style: none; } .links{     padding: 10px;     width: 65%;     float: left; } .menu ul li a {     padding: 10px;     color: #8b8b8b;     text-decoration: none;     font-size: 16px;     text-transform: uppercase; } .menu ul li a:hover{     color: #00bac6; } .slick-initialized {     overflow: hidden; } .imagem-fundo {     background-image: url(/img/imagem_home.png);     width: 100%;       height: 400px;      background-repeat: no-repeat;        } .container {        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */ background: #00aa9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00aa9b 8%, #2989d8 45%, #207cca 52%, #00ba3a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */     display: block;     width: 100%;       height: 30px; }   .imagem-bolinhas{     width: 1080px;     position: relative;       left: 250px;         top: 20px;              height: 300px;           background-repeat: no-repeat;       size: cover;   } .texto {     text-align: center;         width: 600px;     height: 300px;      font-size: 25px;       padding: 20px;        position:relative;     top:20%;     left:30%;      }   .bt {          text-decoration:none;            font-size: 15px;         color:white;         padding: 10px 20px;         background: -moz-linear-gradient(             top,             #0083ab 0%,             #00ba3b);         background: -webkit-gradient(             linear, left top, left bottom,             from(#0083ab),             to(#00ba3b));                 border-radius: 10px;         border: 1px solid;         -moz-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         -webkit-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);     }   .rodape {     color: #c1c1c1;     background-color: #252323;     height: 60px;     width: 100%;       } .direitos-reservados {     padding: 20px;     width: 60%;     float: right;     }
×

Important Information

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