Ir para conteúdo
RoniSBB

Centralizar MenuVertical Direito e Esquerdo HTML5 CSS3

Recommended Posts

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

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;
    }

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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
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

Se o objetivo for usar apenas 1 background para as 2 colunas:

 

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

    #secao {
    background-color: #778899;
    position: absolute;
    width: 1050px;
    padding: 5px 150px 5px 30px;
    height: 200px;
    top: 300px;
    z-index: 9;
    }

Se o objetivo for cada coluna ter background diferentes deverá ser criada mais um section:

 

<section class="menuesquerdo">
<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>
</section>
<section class="menudireito">
<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>
#menudireito ol{
	position: absolute;
	right: 50px;
}
#menuesquerdo ol{
	position: absolute;
	left: 15px;
}
 .menuesquerdo {
    background-color: #778899;
    position: absolute;
    width: 150px;
    height: 200px;
    top: 300px;
}
.menudireito{
	background-color: #778899;
	position: absolute;
	width: 150px;
	left: 1000px;
	height: 200px;
	top: 300px;
	margin-left: 0px;
}

Eu sou muito iniciante então procure pelos forums por outras resoluções de seu problema, devem existir formas mais simples e rápidas de resolve-los, assim você aprenderá mais sobre css !! De qualquer forma minha resposta funciona corretamente em servidores externos e xampp/wampp, mas pode ser muito trabalhoso de fazer manutenção, então dá uma olhada se tem formas mais simples de resolver e tente usar % no lugar de px, assim seu site fica mais responsivo !!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire o z-index: 9,  estava usando em outro lugar e coloquei ele sem querer ...

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

×

Informação importante

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