Menu html+css

[wataru77]

Hola a todos,

Necesito un poco de ayuda y no se por donde empezar, ni como explicar mi problema para que me podais entender.

He creado un menu en html+css y en los 3 "apartados - secciones..." no los redirijo a otro subnivel si no que hago (quiero hacer) que se posiciones en diferentes alturas de la misma pagina.

He logrado hacer que vaya a la posicion requerida pero el menu no se posiciona exactamente donde me gustaría.

Css del menu:
Siempre esta fijo, si bajas con scroll el menu siempre esta a la vista en el top de la pagina.

Código:

.menu {
	background-color: black;
	margin-left: 0px;
	z-index: 100;
	position: fixed;
	margin-top: 0px;
	height: 30px;
	width: 700px;
	opacity: 0.80;
}
.menu ul {
	margin-top: 14px;
	float: left;
}
.menu li {
	margin-left: 20px;
	float: left;
}
.menu a {
	color: white;
	text-decoration: none;
	font-size: 12px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

Html del menu y una seccion

Código:

<!-- menu -->
<div class="menu">
<ul>
<li><a href="#main">inicio</a></li>
<li><a href="#trabajos">trabajos</a></li>
<li><a href="#contacto">contacto</a></li>
</ul>
</div>
<!-- end.menu -->


<!-- trabajos -->
<div id="trabajos">
<b>Trabajos realizados</b>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<!-- end.trabajos -->

Se que mediante css puedes hacer que la pagina se posicione a cierta altura que requieras. Por ejemplo que el bottom del menu se quede a 50px de <b>Trabajos realizados</b>
El problemas que tengo es que no se como hacer eso.

Agradecería que alguien me enseñe un poco la luz!! no hace falta 100% solo que me diga por el camino que he de seguir.

Muchas gracias por vuestro tiempo, espero resolver esto pronto.

^_^

Miquel.

[pablolombardo]

Hola Miquel,

Nose si entendí bien. Puede ser que lo único que necesite es un padding-top en las secciones?

Código:

#trabajos {
padding-top: 60px;
}

Saludoss.

[tommy_tony]

Creo entender a lo que te refieres , cuando mueves tu scroll tu menú baja con el;es porque en
.menu{} lleva la propiedad position:fixed esta propiedad , va ha hacer que el elemento que tenga esto permanezca fijo , que si bajas el scroll va a seguirte a donde sea,quitale eso.

[wataru77]

Iniciado por pablolombardo

Hola Miquel,

Nose si entendí bien. Puede ser que lo único que necesite es un padding-top en las secciones?

Código:

#trabajos {
padding-top: 60px;
}

Saludoss.

Hola Pablo,
Si, correcto, con el padding-top lo he arreglado :)
Muchas gracias.

La verdad es que la idea del menu, es parecido al que tu tienes en tu web!!
Me encanta la estructura!!
Lo unico que el efecto para que se deslice lenta la pagina estoy perdido!!
Quizas es con java?

Un saludo,

Miquel.

[wataru77]

Iniciado por tommy_tony

Creo entender a lo que te refieres , cuando mueves tu scroll tu menú baja con el;es porque en
.menu{} lleva la propiedad position:fixed esta propiedad , va ha hacer que el elemento que tenga esto permanezca fijo , que si bajas el scroll va a seguirte a donde sea,quitale eso.

Hola tommy_tony

Es precisamente lo que quiero que haga el menu. Lo he puesto asi precisamente, para que siempre que hagas scroll el menu se vea.

Gracias por todo.

Un saludo,

Miquel.

[pablolombardo]

Iniciado por wataru77

Hola Pablo,
Si, correcto, con el padding-top lo he arreglado :)
Muchas gracias.

La verdad es que la idea del menu, es parecido al que tu tienes en tu web!!
Me encanta la estructura!!
Lo unico que el efecto para que se deslice lenta la pagina estoy perdido!!
Quizas es con java?

Un saludo,

Miquel.

Genial, me alegro que te halla servido.

Y gracias por lo de mi web!, en unos días la actualizo por completo con portfolio y todo.

El scroll suave se consigue muy facilmente con jQuery. Te dejo un enlace como guía:

http://blogandweb.com/javascript/scroll-suave-jquery/

Saludoss.