Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RoniSBB

Centralizar MenuVertical Direito e Esquerdo HTML5 CSS3

Por , em Desenvolvimento frontend

Recommended Posts

RoniSBB    0

RoniSBB
Postado
Boa noite pessoal,
Estou tentando criar uma estrutura com dois menus verticais, mas não consigo, pois ao aplicar css3 um dos menus desce ou sobe,
nunca ficam na mesma linha. A estrutura exemplo está abaixo e código na sequencia: Desde já agradeço.

============================================
---------------- CABEÇALHO --------------------
=============================================
**--Link.1 - Link.2 - Link.3 -Link.4 -Link.5 -Link.6 -Link.7 --** 
=============================================
|-Menu1.D-|                                                |-Menu1.E-|
|-Menu2.D-|                                                |-Menu2.E-|
|-Menu3.D-|                                                |-Menu3.E-|
|-Menu4.D-|           -------------------                  |-Menu4.E-|
|-Menu5.D-|     |**CORPO CENTRAL**|   |-Menu5.E-|
|-Menu6.D-|            | **DO SITE** |           |-Menu6.E-|
|-Menu7.D-|           -------------------                  |-Menu7.E-|
|-Menu8.D-|                                                |-Menu8.E-|
|-Menu9.D-|                                                |-Menu9.E-|
|-Menu0.D-|                                                |-Menu0.E-|
========================================
---------------- RODAPE --------------------
========================================

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>RSBB</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div id="paginaHome">
<header>
<img src="imagens/cabeca1.png">
<h1>Nome Site</h1>
<nav>
<ol>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
<li>Home6</li>
</ol>
</nav>
</header>
<section id="secao">
<div id="menuesquerdo">
<nav>
<ol>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ol>
</nav>
</div>
<div id="menudireito">
<nav>
<ol>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ol>
</nav>
</div>
</section>
</div>


</body>
</html>

======css3====
#paginaHome {
background-color:#778899;
width: 1200px;
margin: auto;
border: solid black 2px;

}


#paginaHome header {
width: 100%;
background-color: #778899;
height: 170px;
}

#paginaHome header img {
float: left;
margin-left: 10px;
margin-top: 10px;
}

#paginaHome header h1 {
text-align: center;
padding-top: 25px;
color: #F5FFFA;
height: 100px;
font-size: 35px;
font-weight: bold;
font-family: tahoma, arial;
}
#paginaHome header nav ol {
list-style-type: none;
text-align: center;
width:100%;

}

#paginaHome header nav ol li {
width: 150px;
display: inline-grid;
}
#secao {
background-color: #778899;
}

#menuesquerdo nav ol li {
list-style-type: none;
text-align: left;
width: 100%;
float: left;


}
#menudireito nav ol li {
list-style-type: none;
text-align: right;
width: 100%;
float: right;

}
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

washalbano    54

washalbano
Postado

Olá!
Segue sugestão para a estrutura:
  

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>RSBB</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <!-- elmento html que vai 'segurar' todo o conteúdo -->
    <header> <!-- elemento html para topo -->
        CABEÇALHO
    </header>
    <nav>
        MENU TOP
    </nav>
    <div class="app-body"> <!-- elemento html que vai 'segurar' o menu esquerdo, o stage e o menu direito  -->

        <aside class="menu-left"> <!-- elemento que vai 'segurar' o menu esquerdo  -->
            MENU LEFT
        </aside>

        <div class="stage"> <!-- o palco(onde o conteúdo vai ser alterado)   -->
            STAGE
        </div>

        <aside class="menu-right"> <!-- elemento que vai 'segurar' o menu direito  -->
            MENU RIGHT
        </aside>

    </div>

    <footer> <!-- rodapé -->
        FOOTER
    </footer>
</main>
</body>
</html>
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: -apple-system, Roboto, Arial, sans-serif;
}

main * {
    border: thin solid #ccc;
    justify-content: center;
}

main {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main > *,
.app-body > * {
    display: flex;
}

header {
    flex: 0 0 96px;
}

.app-body,
.app-body > * {
    flex-grow: 1;
}

.menu-left,
.menu-right {
    max-width: 200px;
}

footer {
    flex: 0 0 70px;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoniSBB    0

RoniSBB
Postado
4 horas atrás, Keron disse:

Eu fiz assim e deu certo: 


#paginaHome {
    background-color:#778899;
    width: 1200px;
    margin: auto;
    border: solid black 2px;
    
    }
    
    
    #paginaHome header {
    width: 100%;
    background-color: #778899;
    height: 170px;
    }
    
    #paginaHome header img {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    }
    
    #paginaHome header h1 {
    text-align: center;
    padding-top: 25px;
    color: #F5FFFA;
    height: 100px;
    font-size: 35px;
    font-weight: bold;
    font-family: tahoma, arial;
    }
    #paginaHome header nav ol {
    list-style-type: none;
    text-align: center;
    width:100%;
    
    }
    
    #paginaHome header nav ol li {
    width: 150px;
    display: inline-grid;
    }
    #secao {
    background-color: #778899;
    }
    #menuesquerdo ol{
        position: absolute;
    }
    #menuesquerdo nav ol li {
    list-style-type: none;
    text-align: left;
    width: 100%;
    float: left;
    
    
    }
    #menudireito ol{
        position: absolute;
        left: 900px;
    }
    #menudireito nav ol li {
    list-style-type: none;
    text-align: right;
    width: 100%;
    float: right;
    
    }

é só colocar os ol em absolute assim eles não interferem um no outro e dizer que o que flutua á direita tem que ficar tantos pxs de left: 


    #menudireito ol{
        position: absolute;
        left: 900px;
    }
    #menuesquerdo ol{
        position: absolute;
    }

 

 

 

 

 

 

 

Obrigado. Funcionou, porém a cor de fundo ainda não está sendo aplicado na section. Você saberia o motivo?? 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito