Ir para conteúdo
GGerminiani

CSS: DIV fixa ao topo com imagem + menu (com dropdown)

Recommended Posts

Boa tarde.

Nas minhas páginas, quero manter uma página php padrão, para chamar o menu do site, porém, alguns pequenos detalhes estão dando erro.

 

Tenho a página menu.php:

 

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=1">
    <meta charset="utf-8">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        
        body{background: black}
        
        div.capa {
            position: relative;
            left: 50px;
        }

        div.logo {
            position: absolute;
            top: 20px;
        }

        div.login {
            position: absolute;
            left: 10px;
            float: right;
            color: yellow;
            font-size: 12px;
        }
    </style>

</head>

<body>

    <div class="fixed-top">

        <div class="capa">

            <img src="https://img.freepik.com/fotos-gratis/widescreen-3d-rendem-de-uma-paisagem-surreal-com-a-lua-a-noite_1048-5350.jpg?size=626&ext=jpg">
            <div class="logo">
                <a href="index.php">
                    <img src="https://image.flaticon.com/icons/png/128/87/87390.png">
                </a>
            </div>
        </div>

            <nav class="navbar navbar-expand-lg navbar-light bg-danger">

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Alterna navegação">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="./index.php">Home<span class="sr-only">(Página atual)</span></a>
                        </li>


                        <li class="nav-item">
                            <a class="nav-link" href="#home">Página 1</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                DropDown
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Sub 1</a>
                                <a class="dropdown-item" href="#">sub 2</a>

                            </div>
                        </li>

                    </ul>
                   
                </div>
            </nav>
        </div>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>

</body>

</html>

 

Na página index.php, por exemplo, tenho o seguinte código:

 

<!DOCTYPE html>
<html lang="pt-BR">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=1">
    <meta charset="utf-8">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <title>Page Title</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    
    <style>
        body{color:white}
    </style>
    
</head>

<body>

    <?php include_once("menu.php") ?>

    <p>
Cain beetle hugo batman cobblepot shadow robin gearhead ra. Bruce, lynx drake oracle chimera hugo barrow. Oswald edward elongated lillian gordon cluemaster czonk bennett. Calendar scorn of deadshot aiko montoya wayne doom firefly, fox kobra? Wayne manor lex shrike hangman pit amanda. Zatanna todd wing cain killer al thorne wing luthor cluemaster nyssa blake spoiler? Ventriloquist spectre boomerang pit wing rose. Raatko atom selina grey kane. Aiko carmine czonk lucius! Zeus toymaker hush echo amanda drake fairchild. Scarecrow quinn freeze ghul, chimera arrow knight lillian tally hood solomon chill boomerang!
</p>
<p>
Swamp jester lucius metallo zatanna of robin outsider prey. Echo scorn dent lucius echo snake ra grundy prey thorne helena. Collector fox mad dent arrow? Gotham hammer batcave basil atomic. A basil blue flash canary aiko. Kane pit jester kyle doom fairchild atkins nocturna damian spoiler hood. Gargoyle bullock barbara aiko arkham? Ventriloquist knight nyssa bullock freeze cypher catwoman gargoyle hatter tumbler lynx killer nyssa. Barbara ragdoll dick bennett. Fright harvey america abdullah fox diamond alcor falcone; killer penguin martha. Carmine charlatan joe atom? Kane wayne martha league batcave prey alfred riddler? Kyle rose, ivy shrike america. Riddler knight diamond green gargoyle birds zatanna grayson grey katana sinestro. Toymaker rumor lex calendar. Young chill atom rumor! Grayson, atomic fairchild atkins lantern phantom gordon boomerang. Amanda jester barrow creeper tim carmine harley, wayne red creeper batmobile birds? Abattoir wing cypher, blink jester harlequin alcor. Moth atom spoiler lazarus.
</p>
<p>
Basil wayne atom blink atkins. Swamp ra ventriloquist luthor katana batgirl cain? Barrow nocturna ra lucius. Elongated harley harlequin atomic alcor. Ragman gordon cain abdullah. Nyssa mugsy rhino montoya bennett. Thomas dent arkham katana luthor america master outsider. Flash sinestro deadshot thorne zeus abattoir society knight. Ghul damian boomerang shadow creeper deadshot society owl firefly bat poison.
</p>
<p>
Mister fox flash jester vicki scorn. Basil bullock supergirl gargoyle czonk deadshot lazarus rhino superman thomas league superman. Fox phantom carmine toymaker lantern shiva, bennett quinn zatanna? Rhino the arkham jim two! Ghul temblor lazarus raatko, kane nigma bat tim killer sinestro mask alcor thomas? Ali nocturna, grayson night outsider gearhead. Arkham deadshot, damian selina birds shiva. Zatanna grundy ra bane ra deadshot. Wayne fox hatter!
</p>
<p>
Aquaman alfred toymaker cain bennett hammer master. Young alcor scorn rumor maxie anarky batmobile. Flash mad echo black sinestro gearhead mister cluemaster harley. A tumbler bennett barrow abbott al katana tumbler kobra shade lynx mask fox. Amanda zatanna elongated selina gordon oswald charlatan hatter shrike grey harvey shade. Falcone ventriloquist bennett spoiler robin clock green rose carmine. Kobra katana pennyworth atomic of checkmate caird justice. Bruce batman red selina society robin vale rupert penguin charlatan smoke charlatan! League al shrike basil riddler? Owl luthor metallo face blink dent deadshot. Carmine canary, toymaker pennyworth barbara tim.
</p>
<p>
Charlatan doom fright face league harvey oswald, night manor rhino creeper czonk? Oswald wing hugo black jester grey, toymaker gordon of phantom. Clock jim outsider of maxie. Atomic spoiler two hood edward zucco wayne arkham jason hood basil dick collector. Thomas grundy thomas abattoir! Cluemaster batmobile harlequin red robin alfred arrow lillian young two, doom knight ventriloquist. Lantern martha cobblepot wayne oswald gearhead rupert outsider penguin. Tim face lazarus penguin gargoyle deathstroke bennett gearhead harlequin? Harlequin poison oracle barrow boomerang tally chill, zatanna kobra arrow solomon. Lazarus joker creeper knight lynx zeus. Katana robin charlatan dick justice deathstroke bane shrike boomerang abdullah? Barbara poison chill blake.
</p>
<p>
Cain, lillian hush justice doom moth black bartok gleeson green barrow. Collector copperhead falcone the blue ragdoll maxie lantern. Bennett harvey oracle lantern collector hood elongated carmine harlequin manor riddler cluemaster lantern. Calendar phantom red basil nocturna falcone. Strange hood a sinestro red. Phantom batgirl pit rumor. Raatko rhino zatanna freeze ra. Huntress ivy scorn master jester snake firebug gotham azrael two azrael chimera hugo. Maroni red league harlequin pit tally, grundy batgirl knight hood chill knight chase!
</p>
<p>
Damian rose jester crane abbott zeus shadow face hugo nyssa carmine. Anarky nyssa damian barrow freeze basil. Rhino rumor bane batman knight mad lazarus diamond alcor tim tim scorn. Sinestro cain arrow charlatan maroni hammer caird. Huntress outsider abdullah calendar gargoyle batcave kyle. Atkins rhino shrike hugo ragman killer harvey harvey owl. Kane hatter night gordon cypher kane hammer prey atom helena caird. Harley bat metallo aiko anarky cypher hatter black. Hugo chase tim arrow hammer owl atkins metallo freeze basil. Lucius ali, kyle creeper clock. Clock toymaker chase bane a? Of penguin ghul the snake charlatan faith cobblepot montoya kyle clock.
</p>
<p>
Rose sinestro master oswald. Deadshot penguin sinestro grey, sinestro caird gargoyle rose charlatan atom? Grundy dent raatko swamp green smoke! Riddler shadow lillian arrow ra. Blue blue deathstroke cypher, temblor shadow. Catwoman aquaman sinestro kane master hatter edward. Toymaker strange huntress gleeson ragdoll solomon penguin temblor rose fright. Joe oracle solomon tally. Barrow damian wayne anarky a pit, wing helena collector quinn bane! Swamp blake maroni lynx maroni kyle al. Tally firefly ragman grundy, atomic maroni wayne nyssa lantern. Atom manor joker penguin lillian black crane wayne rupert. Calendar killer cypher copperhead tumbler ghul swamp cain deadshot carmine flash batcave. Nyssa black diamond tumbler sinestro. Scorn crane rumor shiva bat. Gearhead nigma phantom.
</p>
<p>
Fairchild maxie dick anarky pennyworth chill america. Face diamond edward edward doom batman. Crane ali nigma lillian croc nyssa outsider edward lantern maroni. Diamond selina rumor shadow mugsy shade hammer wayne checkmate nigma harlequin echo smoke. Creeper tally flash phantom nigma spoiler blink bat jester, kobra oswald ghul! Pennyworth joe shrike fox ghul catwoman face azrael damian nigma lantern chill. Fright nyssa metallo toymaker. Ghul bartok crane maroni temblor abdullah ivy clench elongated firebug gotham. Czonk, crane penguin gordon joker copperhead? Carmine harley charlatan bat jim martha.
</p>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>

</body>

</html>

 

 

A página index.php chama a pagina menu.php.

 

Preciso da seguinte ajuda:

 

  1. Se eu executo somente a página menu, consigo abrir meu dropdown, quando a página menu dentro da pagina index abre, os menus do drop não aparecem;
  2. Como faço para que o conteúdo da página index e qualquer outra página fique abaixo do menu?
  3. No menu, como centralizo a capa, mas mantenho o logo à esquerda, somente centralizado na vertical?

 

É isso.. quem conseguir ajudar, agradeço demais! []s

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

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por FabianoSouza
      Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.
       
      O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.
       
      Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.
       
      Como resolvo isso?
    • Por viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.