Ir para conteúdo

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

Keron    0

Keron
Postado

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

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

Keron    0

Keron
Postado

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

Keron    0

Keron
Postado

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