Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}Carregando comentários...