Foros del Web » Creando para Internet » CSS »

Menu despegable centrado

Estas en el tema de Menu despegable centrado en el foro de CSS en Foros del Web. Hola descubri esta pagina y me gustaba ese menu: http://www.cssplay.co.uk/menus/drop_definition.html El codigo seria este Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ...
  #1 (permalink)  
Antiguo 28/02/2007, 06:35
 
Fecha de Ingreso: noviembre-2004
Mensajes: 133
Antigüedad: 13 años, 1 mes
Puntos: 0
Menu despegable centrado

Hola descubri esta pagina y me gustaba ese menu: http://www.cssplay.co.uk/menus/drop_definition.html
El codigo seria este
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> TG</title>


<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:50px 0 100px 15px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65 url(bottom.gif) no-repeat bottom left; text-align:center; cursor:pointer;}
#menu dt {margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;}
#menu .one {background: #b2ab9b url(top.gif) no-repeat top left;}
#menu .two {background: #949e7c url(top.gif) no-repeat top left;}
#menu .three {background: #d4d8bd url(top.gif) no-repeat top left;}
#menu .four {background: #e2dfa8 url(top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
#menu dd.last {border-bottom:1px solid #444;}
.gallery dt a, .gallery dt a:visited {display:block; color:#444;}
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}


</style>
<style type="text/css">
body {
text-align:center;
font:12px Arial,Helvetica,sans-serif;
}

#wrap {
width:390px;
margin:0 auto;
padding:5px;
text-align:left;
border:0px;
}
</style>
</head>

<body>

			
		  <ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt class="one"><a href="../menu/index.html">DEMOS</a></dt>
	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>

	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt class="two"><a href="index.html">MENUS</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>

	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
	<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="gallery">
	<dt class="three"><a href="../layouts/index.html">LAYOUTS</a></dt>
	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt class="four"><a href="../mozilla/index.html">MOZILLA</a></dt>
	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>

	<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
	<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
	<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
	<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<br  class="clear" />

</body>
</html>
Querria que quedase centrado en la pagina a cualquier resolucción, a una altura que le dare yo son a unos 111px y tenga una altura de unos 24px y el submnenu se superponga a los demas elementos de la pagina.

Gracias a todos, espero haberme explicado bien
  #2 (permalink)  
Antiguo 28/02/2007, 10:23
 
Fecha de Ingreso: noviembre-2004
Mensajes: 133
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: Menu despegable centrado

Ya ya estuve leyendo probe distintas cosas como por ejemplo meter todo el body en una capa con id=contenido y el style:
#contenido{width:800px;;margin:auto auto; text-align:center}
Por ejemplo eso me centra el menu pero no se como regularlo en altura, es que no entiendo bien el codigo tengo que ponerme a estudiar css pero ahora necesito esto y...si me pueden echar una mano se lo agradecere
  #3 (permalink)  
Antiguo 28/02/2007, 10:28
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Menu despegable centrado

Código:
#contenido {
width: 800px;
margin: 0px auto;
}
ul#menu {
position: relative;
top: XXXpx;
left: XXXpx;
}
con el top y left le indicas la posicion al menu.
  #4 (permalink)  
Antiguo 28/02/2007, 11:10
 
Fecha de Ingreso: noviembre-2004
Mensajes: 133
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: Menu despegable centrado

No me funciona, pero creo que este menu es bastante lioso sabrian endicarme alguna pagina donde descargar o copiar el codigo de alguno para ir haciendo pruebas, gracias!
  #5 (permalink)  
Antiguo 28/02/2007, 12:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Menu despegable centrado

Cambia este selector

#menu {list-style-type:none; margin:50px 0 100px 15px; padding:0;}

por este otro:

#menu { margin: 111px auto 0px;
padding: 0pt;
list-style-type: none;
display: block;
position: relative;
width: 604px;
}

Es un menú bonito.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:39.