botones en barra de navegacion inferior

[dw14]

Hola,

Soy nuevo por estos lares, estoy haciendo unos botones para una web y me están dando problemas. Espero que me podais ayudar.

El caso es que tengo una pagina con el contenido centrado en un contenedor de 940px. Al final del contenedor, encima del pie de página va a ir un menú horizontal, que debe estar pegado en el fondo de ese div.
Los botones son 6 y su funcionamiento es muy simple. Tiene un ancho de 110 px y un alto de 80 px y el texto del botón dentro, pero sin estar centrado. Es decir, justificado a la izquierda.

Pues bien, lo problemas que tengo y que me están rompiendo la cabeza son.

No soy capaz de que los seis botones estén pegado al fondo del div.
Cuando se hace clic en el botón éste "crece" hacia abajo, en vez de hacia arriba que es como quiero que haga
Quiero que el texto tenga un pequeño margen para que no esté pegado al borde del botón, pero sin alinearlo al centro

Alguna ayuda?

[dw14]

La idea es hacer algo como esto

http://sdrv.ms/11mlZ10

[pzin]

Sin ver algo de código poco podemos hacer.

[dw14]

ok! perdón

ahi va el html

Código HTML:

<div class="navbar-bottom">
			<div class="row">
					<div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
                                        <div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
                                        <div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
                                        <div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
                                        <div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
                                        <div class="span-navbar-bottom">
						<a href="l" class="boton"></a>
					</div>
			</div>
		</div> 

y el css

Código:

.boton{
	width:140px;
    display:inline-block;
    line-height:60px;
    text-align:center;
    height:150px;
    background:#708eb2;
}

.span-navbar-bottom{
	width:140px;
	padding-bottom: 0;
	margin-bottom: 0;
}

.navbar-bottom{
	width: 940px;
}

[pzin]

Iniciado por dw14

Hola,
No soy capaz de que los seis botones estén pegado al fondo del div.

El problema es que por mucho inline-block o inline que le pongas a los enlaces, estos tienen una capa —div— que por defecto se mostrarán como elementos de bloque. Entonces cada capa con su enlace estarán en vertical.

Iniciado por dw14

Cuando se hace clic en el botón éste "crece" hacia abajo, en vez de hacia arriba que es como quiero que haga

¿Cuando se hace click en el botón? Cuando se hace click en un enlace normalmente se carga otra página. Especifica un poco más.

Iniciado por dw14

Quiero que el texto tenga un pequeño margen para que no esté pegado al borde del botón, pero sin alinearlo al centro

Usa padding.

[dw14]

Iniciado por pzin

El problema es que por mucho inline-block o inline que le pongas a los enlaces, estos tienen una capa —div— que por defecto se mostrarán como elementos de bloque. Entonces cada capa con su enlace estarán en vertical.

No se si lo entendí bien. He dejado un solo div y dentro todos los enlaces y ahora los botones están todo literalmente en vertical en la página.

¿Cuando se hace click en el botón? Cuando se hace click en un enlace normalmente se carga otra página. Especifica un poco más.

Lo que quiero decir es que cuando le doy al enlace y se abre la página correspondiente quiero que el botón de esa página tenga una estado activado en el que cambie su tamaño y su color. Es decir, que quede más alto que los demás. Tal y como yo lo hice lo que consigo es que el botón sea un rectángulo más grande pero hacia abajo. Es decir, el borde superior de todos los botones está alineado. No se porqué pasa esto

Usa padding.

De acuerdo, no sabía que para el texto también se puede usar padding


Estoy usando bootstrap para hacer la página, adaptando el css a mis necesidades. No se si me convendría hacer yo directamente todo, porque la web se parece poco a las típicas que se ven con este framework.
Todo el contenido, incluyendo la barra de navegación, está dentro de un div para que aparezca centrado en la pantalla, con el fondo de un color diferente al del body.
Qué me recomiendas?

[pzin]

Yo nunca he tocado Bootstrap, así que no sabría decirte para ese framework en concreto.

Un enlace suele ponerse uno al lado del otro porque son elementos en linea. Así que mira a ver si son o no elementos en linea. En linea o inline-block, vaya.

Para lo otro, tienes que crear una clase específica y añadirla al enlace que se está visitanto y poner algo así:

Código CSS:

a.enlace_activo {
  position: relative;
  top: -20px;
  height: 170px;
}
 

Obviamente, la cantidad de pixeles que indiques en top, tendrás que añadírselos a la altura del enlace que indicaste antes, que en tu caso era 150.

[dw14]

Ok, gracias.

Lo intentaré hacer así

[dw14]

Debo ser medio zopenco....

Al final volví a empezar desde el principio para hacer el menú

El código css es este

Código CSS:

.wrapper {width: 940px; margin: 0 auto; background-color: white; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;}
/* Menu inferior */
.navbar-bottom {margin:0 auto;}
.navbar-bottom ul li {list-style: none}
.navbar-bottom ul li a {display:inline-block; float: left;}
.btn {width: 125px; height: 80px; background-color: #708EB2; margin-right: 8px}
 

y el html

Código HTML:

<body>
	<div class="wrapper">
		<h1>Lorem ipsum Sunt exercitation et reprehenderit consectetur est Duis pariatur laboris aute dolore sunt enim.</h1>
		<div class="navbar-bottom">
			<ul>
				<li><a class="btn" href="index.html"></a></li>
				<li><a class="btn" href="index.html"></a></li>
				<li><a class="btn" href="index.html"></a></li>
				<li><a class="btn" href="index.html"></a></li>
				<li><a class="btn" href="index.html"></a></li>
				<li><a class="btn" href="index.html"></a></li>
			</ul>
		</div>
	</div>
</body>
</html> 

Ahora mismo el menú está como quiero salvo por dos fallos. No se porqué razón no aparece dentro del div wrapper y no soy capaz de centrarlo horizontalmente.

Y aprovecho para preguntar otra cosa. El div wrapper, cuando no tiene ningún contenido está pegado arriba de todo en el navegador. Pegado justo debajo de la barra de marcadores. Pero cuando le meto cualquier tipo de contenido crea un margen como de unos 10 px, más o menos. He probado poniendo position relative en el css pero no funciona.