Centralizar MenuVertical Direito e Esquerdo HTML5 CSS3

13/11/2018

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;

}

Roni Barbosa

Curtir t�pico + 0

Responder