Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida para o Exercício Final Aula 12

Estou criando uma página para colocar futuramente meu portfólio.

Minha dificuldade é para configurar o meu css onde a div com a "Class=menu" fique abaixo da "class=logo_virado" para criar uma espécie de menu. Como posso fazer este ajuste?

<body>
    <header>    
        <nav>
            <div class="logo_virado">
                    <div class="nome">Kléber H. Stumpf .´.</div>
            </div>
            <div class="menu"></div>
        </nav>
    </header>
.logo_virado{
    background-color:#0000ff;
    width:1500px;
    height:200px;
    font-family:"Gloria Hallelujah";
    transform: rotate(-15deg);
    position:relative;
        top:-75px;
        left:-100px;
}

.nome{
    font-family:"Gloria Hallelujah";
    font-size:70px;
    position:relative;
        top:70px;
        right:-85px;
}

.menu{
    width:100%;
    height:60px;
    background-color:#0000ff;
    position:relative;
        top:-70px;
}
3 respostas

Werner só para ver se eu entendi corretamente, você quer deixar uma imagem e abaixo da mesma ter um menu ?

Bom dia Werner!

Se você quiser posicioná-las usando position. Acho que seria mais fácil você declarar o elemento header com position: relative; e os elementos .menu e .logo_virado com position absolute, pois eles pegariam o header como referência e você posicionaria o menu e o logo_virado aonde quisesse dentro do header.

Você também poderia usar as propriedade float e clear para tentar fazer isto.

Espero ter ajudado, bons estudos!

solução!

Nenhum me ajudou...

Consegui resolver meu problema de uma forma muito simples... Basta adicionar o z-index aos objetos...

Colocando os itens com rotação em { z-index:1000; }

e o menu com o índice

{ z-index:999; }