How to center a menu

Question

How to center a menu

Navigation

#1 by (2 votes)

0

Hello everyone, I am trying to focus these div but I could not and I would appreciate your help.

* 
{
	margin:0px;
	padding: 0px;
}			
#header 
{
	margin:auto;
	width:600px;
	font-family:Arial, Helvetica, sans-serif;
	
}			
ul, ol 
{
	list-style:none;
	
}			
.nav 
{
	width:800px;
	margin:0 auto;
	
}
 
.nav > li
 {
	float:left;
	
}			
.nav li a 
{
	background-color:#ffe3a4;
	color:white;
	text-decoration:none;
	padding:10px 12px;
	display:block;
	width:100%;
	
}			
.nav li a:hover 
{
	background-color:#8a92a6;
}			
.nav li ul 
{
	display:none;
	position:absolute;
	min-width:140px;
	
}			
.nav li:hover > ul 
{
	display:block;
}			
.nav li ul li 
{
	position:relative;
}			
.nav li ul li ul 
{
	right:-140px;
	top:0px;
	
}
.contenedor{
	margin:auto;
	width:90%;
	padding-top: 5px;
	display: inline-block;
	/*padding-bottom: 10px;
	width: 90%;
	margin: 20 auto;
	padding-top: 5px;*/
}
*{
	box-sizing: border-box;
}

body{
	font: normal 18px/3 "Fira Sans", "Heveltica Neue", sans-serif;
	background: #3aafab;
	color: white;
	margin: 0;
}

h1{
	text-align: center;
}

.form-registro{
	width: 95%;
	max-width: 500px;
	margin: auto;
	background:white;
	border-radius: 7px;
	
}
h2.titulo{
	background: deepskyblue;
	text-align: center;
	padding: 15px;
	font-weight: 100;
	font-size: 30px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom: 5px solid crimson;
}
h2{
	background: deepskyblue;
	text-align: center;
	padding: 15px;
	font-weight: 100;
	font-size: 30px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom: 5px solid crimson;
}

.contenedor-input{
	padding: 10px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

input{
	margin-bottom: 15px;
	padding: 15px;
	font-size: 16px;
	border-radius: 3px;
	border: 1px solid darkgrey;
}

.input-48{
	width: 48%;
}

.input-100{
	width: 100%;
}

select
{
    margin-bottom: 15px;
    padding: 15px;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid darkgrey;
}

.btn-enviar{
	background: crimson;
	color: white;
	margin: auto;
	padding: 10px 40px;
	cursor: pointer;
}

.btn-enviar:active{
	transform: scale(1.05);
}
.contenido{
	width: 90%;
	margin: 0 auto;
	display:grid;	
}

<!DOCTYPE html>
<html lang = "es">
<head>
	<meta charset = "UTF-8">
	<title id="titulo"></title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="../css/reg.css">
	<link rel="stylesheet" href="../css/menu.css">
	<script src = "../js/jquery-3.2.1.min.js"></script>
	<script src="../js/menu1.js"></script>
	<script src="../js/menu.js"></script>
</head>
<body>
	<div id="header">
	<div class="contenedor">
		<ul class="nav">
			<li><a href="#">Capitan</a>
				<ul>
					<li><a href="../html/registro.html" id = "addCap">Agregar</a></li>
					<li><a href="../html/modificar_capitan.html">Modificar</a></li>
					<li><a href="../html/eliminar_capitan.html">Eliminar</a></li>
				</ul>
			</li>
			<li><a href="">Congregación</a>
				<ul>
					<li><a href="../html/registro_congregacion.html">Agregar</a></li>
					<li><a href="#">Eliminar</a></li>
					<li><a href="#">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Centro de salida</a>
				<ul>
					<li><a href="../html/registro_centro_salida.html">Agregar</a></li>
					<li><a href="../html/eliminar_centro_salida.html">Eliminar</a></li>
					<li><a href="../html/modificar_centro.html">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Territorios de predicación</a>
				<ul>
					<li><a href="../html/registro_territorios.html">Agregar</a></li>
					<li><a href="../html/eliminar_territorio.html">Eliminar</a></li>
					<li><a href="../html/modificar_territorio.html">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Predicacion</a>
				<ul>
					<li><a href="../html/territorio_predicado.html">Registrar territorio predicado</a></li>
					<li><a href="#">Visualizar territorios predicados</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
	<div class="main">
		<div class="contenido" id="contenido">
		</div>
	</div>
</body>
</html>

I really appreciate your help

html5 html css3 css

asked by Familia Valencia Hdz 03.02.2018 в 18:28

source

1 answer

Detect page change or reload how can I use the same object already created in form1 in form2

score 2 · Accepted Answer

There are many ways to center, everything depends on the chosen box model. There is a lot and the way to call them is using the property display , I'll explain some forms of centering, depending on the type of display chosen.

The best known way is automatic margins, to center blocks. Example:

.center_block{
  display: block;
  margin: 0 auto;
}

This makes the lateral margins cover the space left between the block and its container sideways.

The second way known is using online blocks , these behave as if they were texts so apply a text alignment to the center affects them. However, the alignment should be applied to your container father, otherwise it will not work:

.ancestro_contenedor{
   text-align: center
}

.ancestro_contenedor .bloque_en_linea{
   display: inline-block; 
}

The newest way is to use the flexbox model, this has several alignment properties, the one that is to center horizontally is justify content , this also applies to the container of the element to be centered, like this:

.ancestro_contenedor{
   display: flex;
   justify-content: center;
}

There are others, such as the use of display: table, grid or combining them with the property transform and / or the "CSS function" calc are something more complex and unnecessary to know for your case, if you want to know more, check this link:

Css Blog in Spanish: center center (16 ways)

Having said the above, in your case is affecting much that you are giving a size of width to containers and nested elements, and that the ancestor container is applying a width of 600px and 800px child, causing overflow. There is also a mix of different cash models, inline-block , block , even grid (which is an experimental property, not yet standard) and you use the centering techniques contrary to their cash models such as margin: 0 auto; to center blocks in line, but not the text-align and mix them with floats , in short, an entanglement hehehe correcting the above would be like this:

* 
{
	margin:0px;
	padding: 0px;
}			
#header 
{
	margin:auto;
	/* no le des un tamaño más pequeño que el contenido width: 600px; */
	font-family:Arial, Helvetica, sans-serif;
	
}			
ul, ol 
{
	list-style:none;
}			
.nav 
{
	/*estas dos propiedades no hacen falta width:800px;*/
	margin:0 auto;
	display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
 
.nav > li
 {
}			
.nav li a 
{
	background-color:#ffe3a4;
	color:white;
	text-decoration:none;
	padding:10px 12px;
	display:block;
	width:100%;
	
}			
.nav li a:hover 
{
	background-color:#8a92a6;
}			
.nav li ul 
{
	display:none;
	position:absolute;
	min-width:140px;
	
}			
.nav li:hover > ul 
{
	display:block;
}			
.nav li ul li 
{
	position:relative;
}			
.nav li ul li ul 
{
	right:-140px;
	top:0px;
	
}
.contenedor{
	margin: auto;
	width:90%;
	padding-top: 5px;
	/*aqui no sería display: inline-block; sino:*/
  display: block;
}
*{
	box-sizing: border-box;
}

body{
	font: normal 18px/3 "Fira Sans", "Heveltica Neue", sans-serif;
	background: #3aafab;
	color: white;
	margin: 0;
}

h1{
	text-align: center;
}

.form-registro{
	width: 95%;
	max-width: 500px;
	margin: auto;
	background:white;
	border-radius: 7px;
	
}
h2.titulo{
	background: deepskyblue;
	text-align: center;
	padding: 15px;
	font-weight: 100;
	font-size: 30px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom: 5px solid crimson;
}
h2{
	background: deepskyblue;
	text-align: center;
	padding: 15px;
	font-weight: 100;
	font-size: 30px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom: 5px solid crimson;
}

.contenedor-input{
	padding: 10px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

input{
	margin-bottom: 15px;
	padding: 15px;
	font-size: 16px;
	border-radius: 3px;
	border: 1px solid darkgrey;
}

.input-48{
	width: 48%;
}

.input-100{
	width: 100%;
}

select
{
    margin-bottom: 15px;
    padding: 15px;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid darkgrey;
}

.btn-enviar{
	background: crimson;
	color: white;
	margin: auto;
	padding: 10px 40px;
	cursor: pointer;
}

.btn-enviar:active{
	transform: scale(1.05);
}
.contenido{
	width: 90%;
	margin: 0 auto;
	display: grid;	
}

<!DOCTYPE html>
<html lang = "es">
<head>
	<meta charset = "UTF-8">
	<title id="titulo"></title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="../css/reg.css">
	<link rel="stylesheet" href="../css/menu.css">
	<script src = "../js/jquery-3.2.1.min.js"></script>
	<script src="../js/menu1.js"></script>
	<script src="../js/menu.js"></script>
</head>
<body>
	<div id="header">
	<div class="contenedor">
		<ul class="nav">
			<li><a href="#">Capitan</a>
				<ul>
					<li><a href="../html/registro.html" id = "addCap">Agregar</a></li>
					<li><a href="../html/modificar_capitan.html">Modificar</a></li>
					<li><a href="../html/eliminar_capitan.html">Eliminar</a></li>
				</ul>
			</li>
			<li><a href="">Congregación</a>
				<ul>
					<li><a href="../html/registro_congregacion.html">Agregar</a></li>
					<li><a href="#">Eliminar</a></li>
					<li><a href="#">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Centro de salida</a>
				<ul>
					<li><a href="../html/registro_centro_salida.html">Agregar</a></li>
					<li><a href="../html/eliminar_centro_salida.html">Eliminar</a></li>
					<li><a href="../html/modificar_centro.html">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Territorios de predicación</a>
				<ul>
					<li><a href="../html/registro_territorios.html">Agregar</a></li>
					<li><a href="../html/eliminar_territorio.html">Eliminar</a></li>
					<li><a href="../html/modificar_territorio.html">Modificar</a></li>
				</ul>
			</li>
			<li><a href="">Predicacion</a>
				<ul>
					<li><a href="../html/territorio_predicado.html">Registrar territorio predicado</a></li>
					<li><a href="#">Visualizar territorios predicados</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
	<div class="main">
		<div class="contenido" id="contenido">
		</div>
	</div>
</body>
</html>

Just do not worry, there are so many models and forms, that sometimes you get entangled at the beginning and it is very difficult to keep up with the experienced, but little by little you will acquire the skills, the important thing is that you have clear how box models work and what properties and attributes apply or not, depending on the selected model.