Un usuario preguntó 👇
Hola,
Quería centralizar la navegación y darle un ancho de 1200px, al igual que la Bandera de encabezado. (Quiero que esté justo encima de la línea verde y que sea tan ancha) Pero, haga lo que haga, todo lo que tengo que hacer es cortar la barra de navegación en dos filas, como si algún material estuviera oculto en el lado derecho bloqueando el espacio.
Así es como se ve en este momento:
http://www.bilderhoster.net/27843/7j8myvwr.jpg.html
Y aquí está mi código de navegación principal:
.main-navigation {
text-align: center;
float: right;
clear: right;
margin: 16px 0 0 0;
margin: 1rem 0 0 0;
}
.main-navigation h1 {
font-size: 32px;
font-size: 2rem;
line-height: 1.25;
}
.nav-menu {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 18px;
font-size: 1.125rem;
line-height: 0.3;
text-transform: uppercase;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
float: left;
position: relative;
margin: 0;
}
/* Padding around each top level menu option */
.nav-menu > li a {
padding: 12px;
padding: .75rem
}
.main-navigation ul ul li {
margin: 0;
}
.main-navigation ul ul a {
padding: 8px 12px; /* Padding around each dropdown menu option */
padding: .5rem .75rem;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #6ca83e; /* Nav bar link color */
}
.main-navigation a:visited {
color: #6ca83e; /* Nav bar link visted color */
}
.main-navigation a:hover {
color: #376216; /* Nav bar link hover color */
}
.main-navigation ul ul {
display: none;
position: absolute;
left: 0;
z-index: 99999;
line-height: 1.7;
background-color: #6ca83e; /* Nav bar dropdown background color */
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
color: #fff; /* Nav bar dropdown link color */
width: 14em; /* Nav bar dropdown width */
}
.main-navigation ul ul a:visited {
color: #fff; /* Nav bar dropdown link visited color */
}
.main-navigation ul ul li {
}
.main-navigation ul ul :hover > a {
color: #376216; /* Nav bar dropdown level 2 link color on level 3 hover */
background-color: #344860; /* Nav bar dropdown link background color on hover */
}
.main-navigation li:hover > a {
color: #376216; /* Nav bar link color on hover */
}
.main-navigation ul ul a:hover {
color: #fff; /* Nav bar dropdown link color on hover */
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current_page_parent > a {
color: #376216; /* Nav bar link color for current menu item or ancestor */
}
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-menu-ancestor > a {
color: #376216; /* Nav bar dropdown link color for current menu item */
}
.main-navigation ul .divider {
border-bottom: 1px solid #aaa;
height: 0;
line-height: 0.0625;
overflow: hidden;
}
.main-navigation ul li.dropdown-header a,
.main-navigation ul li.current-menu-item ul .dropdown-header a {
color: #aaa; /* Nav bar dropdown header color */
background-color: #3a3a3a; /* Nav bar dropdown header background color */
}Todo lo mejor, Alex
Autor del tema
(@ahortin)
Hace 2 años, 11 meses
¿Puede proporcionar un enlace al sitio para que pueda ver lo que está sucediendo? Es difícil saber qué está pasando directamente a partir de una imagen.
Gracias por eso.
Lanzador de hilos
(@worttaenzer)
Hace 2 años, 11 meses
Gracias por su respuesta rápida. Mi página todavía está oculta, debido al progreso del trabajo, pero me di cuenta de que el diseño de 2 cuadrículas en el encabezado estaba causando el problema. En ese momento, mi cliente cambió de opinión y decidió que la navegación se alinearía en el lado izquierdo, como ya se usa en la plantilla, así que desafortunadamente ya no tengo que averiguar cómo centralizarla.
Gracias por pedir ayuda.
Autor del tema
(@ahortin)
Hace 2 años, 11 meses
No hay problema. Me alegro de que finalmente se resolviera 🙂
Lanzador de hilos
(@worttaenzer)
Hace 2 años, 11 meses
Pero tengo una pregunta. Traté de arreglarlo yo mismo pero no funcionó. En la mayoría de las páginas, con textos largos, mi pie de página está en la parte inferior de la página a la que pertenece, pero tan pronto como solo tengo un texto muy corto (en las páginas «Gästebuch» y «Kontakt») salto al pie de página y me voy algún espacio en blanco en la parte inferior. Intenté cambiar la posición del footercontainer y footercreditscontainer, configurándolo en bottom: 0 y jugué con la configuración de los márgenes, pero nada realmente lo solucionó. ¿O necesito hacer cambios en el contenedor de material?
Aquí hay un enlace para eso:
http://testebene.garten-ist-krieg.de/neues-aus-meinem-garten/
Autor del tema
(@ahortin)
Hace 2 años, 11 meses
Aquí hay una publicación sobre cómo puede pegar su pie de página al final de la página.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Lanzador de hilos
(@worttaenzer)
Hace 2 años, 11 meses
Gracias, lo he intentado antes. Cambié un poco el código, ya que no le pasaría nada al original. #Container se convirtió en maincontentcontainer #header made #headercontainer #footer made #footercontainer Coloreé estos artículos para asegurarme de que estoy usando el nombre div correcto pero aún así… el pie de página no está en la parte inferior. Creo que la configuración de #body no hace nada.
http://www.bilderhoster.net/27843/vzttmgah.jpg.html
Autor del tema
(@ahortin)
Hace 2 años, 11 meses
Prueba esto …
#maincontentcontainer {
min-height: calc(100vh - 356px);
}Sin embargo, tenga en cuenta que si cambia la altura de sus encabezados o pies de página, también deberá ajustar ese tamaño de px en consecuencia.
Lanzador de hilos
(@worttaenzer)
Hace 2 años, 11 meses
Esto funciona perfectamente. Muchísimas gracias. Realmente me ayudaste con eso. ¡Gran apoyo!
Autor del tema
(@ahortin)
Hace 2 años, 11 meses
Mi placer 🙂
¿Solucionó tu problema??
0 / 0