Foros del Web » Creando para Internet » CSS »

Necesito una ayudita con mi menu

Estas en el tema de Necesito una ayudita con mi menu en el foro de CSS en Foros del Web. Hola amigos... lo habia posteado en HTML pero un amigo nuestro me recomendo hacerlo en CSS, por eso lo posteo en esta seccion porque no ...
  #1 (permalink)  
Antiguo 05/03/2011, 10:59
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Sonrisa Necesito una ayudita con mi menu

Hola amigos... lo habia posteado en HTML pero un amigo nuestro me recomendo hacerlo en CSS, por eso lo posteo en esta seccion porque no tengo experiencia alguna al respecto.

Necesito un menu horizontal pero que las subopciones aparezcan en forma vertical debajo de cada opcion principal.

Alguien me dio este codigo...

A estre codigo que nos dejos nuestro amigo...

<ul id="menu">
<li><a href="opcion1.html">Opción 1</a></li>
<li><a href="opcion2.html">Opción 2</a>
<ul>
<li><a href="subopcion1.html">Opción 2-1</a></li>
<li><a href="subopcion2.html">Opción 2-2</a></li>
</ul>
</li>
<li><a href="opcion3.html">Opción 3</a></li>
</ul>

Pero quiero que Opcion 2-1 y Opcion 2-2 aparezcan debajo de Opcion2

Ahi esta mi problema porque no se como hacerlo :(

Y si no es mucho pedir necesito algo sencillo porque no soy tan experta en esto :)

Muchas gracias por cualqueir ayuda que me puedan brindar... que tengna un maravillo dia.
__________________
[email protected]
  #2 (permalink)  
Antiguo 05/03/2011, 14:34
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Necesito una ayudita con mi menu

Esta suele ser una referencia habitual aquí.
http://www.forosdelweb.com/f53/menu-...00-css-595007/

Lo que preguntas podría hacerse usando las propiedades display:none para ocultar el submenu y display:block para mostrarlo. Te pongo un ejemplo simple, pero no te lo recomiendo. No queda muy bien salvo que se despliegue haciendo click y para eso usaría javascript.
#menu li ul{ display:none;}
#menu li:hover ul {display:block}
La apariencia la dejo de tu parte.
  #3 (permalink)  
Antiguo 07/03/2011, 13:41
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

La verdad no entendi... donde coloco esa sentencia.. luego de la opcion princuipal y antes de que comiencen las subopciones???
__________________
[email protected]
  #4 (permalink)  
Antiguo 07/03/2011, 15:12
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

Estoy super perdida... Paso el codigo que tengo y si alguien bvondadoso lo puede ver y decirme como hago subcategoria vertical.. porque en este momento lo muestra en form horizontal, pero erroneamente. Desde ya un millon de gracias

El codigo del home page es.....

<div class="tail-top">
<div class="tail-top1">
<div class="tail-bottom">
<div class="main">
<div id="header">
<div class="menu">
<ul>
<li class="current"><a href="index.html"><em><b>Home</b></em></a></li>
<li><a href="index-1.html"><em><b>About us</b></em></a></li>
<li><a href="index-2.html"><em><b>Services</b></em></a></li>
<ul>
<li><a href="index-2.html"><em><b>Dog Boarding</b></em></a></li>
<li><a href="index-2.html"><em><b>Cat Boarding</b></em></a></li>
</ul>


<li><a href="index-3.html"><em><b>Customers</b></em></a></li>
<li><a href="index-4.html"><em><b>Events</b></em></a></li>
<li><a href="index-5.html"><em><b>Gallery</b></em></a></li>
<li><a href="index-5.html"><em><b>Media Coverage</b></em></a></li>
<li><a href="index-5.html"><em><b>Contact Us</b></em></a></li>
</ul>


<br />
</div>

y el codigo del CSS es...
/* CSS Document */
* { margin:0; padding:0;}
html, body { height:100%; }
body {
font-size:100%;
line-height:1em;
min-width:960px;
background:#1e0c00
}
html, input, textarea { font-family: Arial, Helvetica, sans-serif;
color:#e6d9c6; }

.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
object { vertical-align:top; outline:none}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container {
overflow:hidden;
width: 100%;
text-align: justify;
}
a img{ border:0}
img{ vertical-align:top; }

a{color:#ffe491; text-decoration:underline; outline:none}
a:hover{
text-decoration:blink
}

.link{color:#ede6c4;}




#content ul{margin:0; padding:0; list-style:none;}
#content ul li{background:url(images/marker.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:12px; }
#content ul li a{color:#ede6c4; text-decoration: none; line-height:1.69em; font-weight:bold}
#content ul li a:hover { text-decoration:underline; }

.link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#fffef6; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:1.38em}
.link-1 b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:4px 16px 8px 15px; font-weight:normal; font-style:normal;}
.link-1:hover{ text-decoration:none; color:#000000}


/*header*/
#header {font-size:1.1875em; color:#FFFFFF }
#header .logo{ margin:16px 0 0 379px }
#header .slogan{ margin:132px 0 0 45px }
#header .menu{
margin:154px 0 0 49px;
position:absolute;
width:1030px;
left: -20px;
top: -5px;
height: 129px;
}
#header .icon{margin:93px 0 0 859px; position:absolute;}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline; padding:0; vertical-align:top}
#header ul li a{color:#d5b781; text-decoration:none; font-size:1em; font-style:italic; text-transform:none; float:left; padding:0; margin:0; }
#header ul li a b { display:block; font-weight:normal; padding:0 23px 0 23px; line-height:40px}
#header ul li a em{ display:block; font-weight:normal; font-style:normal }

#header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}

#header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }


/*content*/
#content{
font-size:0.8125em;
width:100%;
text-align:center;
font-family:"Comic Sans MS"
}
#content .indent-main{padding:0 0 30px 22px}
#content .indent-main1{padding:37px 0 30px 22px}
#content .indent-main2{padding:37px 15px 30px 22px}
#content .title{ margin-bottom:16px}
#content .img-left{ float:left; margin:0 20px 16px 0}
#content .img-left1{ float:left; margin:0 14px 16px 0}
#content .img-indent{ margin:0 0 16px 0}
#content p{ margin:0 0 17px 0}
#content .p{ margin:0}
#content .p1{ margin:0 0 17px 0}
#content h1{
color:#000;
font-size:14px;
margin-bottom:13px;
line-height:1.2em;
font-family: "comic Sans MS";
font-weight: bold;
}
#content .color{
color:#230d00;
font-family: "comic Sans MS";
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
}
#content .color1{
color:#ffeaa8;
}
#page #content h2{color:#fff8d7; font-size:2.46em; margin-bottom:5px; line-height:1.2em }
#content h2{
color:#fff8d7;
font-size:2.46em;
margin-bottom:21px;
line-height:1.2em;
text-align: left;
}
#content h4{color:#ede6c4; font-size:1em;}
#content .tail{ background:url(images/tail.gif) bottom repeat-x; padding-bottom:25px; margin-bottom:25px}
.txt{ color:#ede6c4; float:right; display:block; }

#content .indent{padding:40px 0 0 0}
#content .indent1{
margin:-28px 0 0 0;
position:relative;
}
#content .indent2{margin:-15px 0 0 0; position:relative; display:block}
#content .indent3{padding:0 0 0 197px}

.block{ background:url(images/bg_block.gif) top left no-repeat; width:960px; height:265px; color:#8e7b69}
.block .indent-block{ padding:35px 0 0 202px; }
.block a{ color:#bb7631}
.block .button{color:#fff; background:url(images/button.gif) top left no-repeat; width:112px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em }
.block .button:hover{text-decoration:none; color:#000 }
#content .block p{ margin:0 0 17px 0}



.button1{color:#fffef6; background:url(images/button1.png) top left no-repeat; width:111px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button1:hover{text-decoration:none; color:#000 }
.button2{color:#fffef6; background:url(images/button2.png) top left no-repeat; width:68px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button2:hover{text-decoration:none; color:#000 }
.button3{color:#fffef6; background:url(images/button3.png) top left no-repeat; width:85px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button3:hover{text-decoration:none; color:#000 }

/*footer*/
#footer { color:#8c5e44; font-size:0.75em; text-align:center; background:url(images/bot1.gif) top center no-repeat }
#footer .indent-footer{ padding:30px 50px 0 50px;}
#footer a {
color:#FFC;
text-decoration:underline
}
#footer a:hover {
text-decoration:none;
color: #FFC;
background-image: url(images/bot1.gif);
}

.indent-2{ position:relative; padding-left:20px; float:left}
.h{ height:38px}
.h1{ height:30px; background:url(images/bg_input.gif) top left no-repeat}
.block-contact span{ float:right; margin-right:0}
input{
border:1px solid #b4a28f;
background:#846e5a;
width:264px; height:18px;
font-size:1em;
padding-left:5px;
padding-top:2px
}
textarea{
border:1px solid #b4a28f;
background:#846e5a;
width:285px; height:73px;
font-size:1em;
padding-left:5px;
margin-bottom:21px;
overflow:auto}
#page1 .tail-top .tail-top1 .current .main #footer .indent-footer strong font b {
color: #FFC;
}
#page1 .tail-top .tail-top1 .tail-bottom .main #content .indent-main .container .col-3 ul {
font-family: "comic Sans MS";
font-size: 16px;
font-weight: bold;
}
__________________
[email protected]
  #5 (permalink)  
Antiguo 07/03/2011, 15:50
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Necesito una ayudita con mi menu

El código que incluí en mi comentario es CSS y formaría parte del css de tu página. No lo he probado porque es sólo un ejemplo demostrativo, pero supongo que funcione según está.
  #6 (permalink)  
Antiguo 07/03/2011, 16:39
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

Yo puse el codigo de mi CSS... pero no me doy cuenta donde deberia ponerlo... :(
Soy una neofita en esto.. perdon..
__________________
[email protected]
  #7 (permalink)  
Antiguo 07/03/2011, 17:10
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Necesito una ayudita con mi menu

Bastará con que lo añadas al final del css.
Si nunca has usado css quizás sea buena idea recurrir a algún manual para aprender lo más básico.
  #8 (permalink)  
Antiguo 08/03/2011, 11:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Necesito una ayudita con mi menu

Hola:

Introducción a CSS.

Saludos.

  #9 (permalink)  
Antiguo 08/03/2011, 11:26
 
Fecha de Ingreso: octubre-2008
Mensajes: 10
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Necesito una ayudita con mi menu

Te recomiendo que busques un menu ya echo solo de implementar en tu sitio, y modificalo a tu gusto.

Yo te puedo mandar un ejemplo si tu lo deseas.
  #10 (permalink)  
Antiguo 08/03/2011, 23:29
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

Lo apreciaria muchisimos... gracias por la cooperacion.
__________________
[email protected]
  #11 (permalink)  
Antiguo 09/03/2011, 23:07
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

Gracias amigo Jomaruro... ya lei los dos libros de CSS.. ahora se un poquito mas y entiendo mejor... pero aun asi.. no se como resolver este problema del submenu vertical.... intente implementar varias cosas peorno me ha funcionado....

buaaaaaaaaaaaaaaaaaaaaaaa!!!! :(
__________________
[email protected]
  #12 (permalink)  
Antiguo 10/03/2011, 02:13
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Necesito una ayudita con mi menu

Arme un archivo separado con el nombre index.html y trabaja como quiero... ahora cuando lo incorporo al real archivo, test.html y style.css no trabaja de la misma manera... ya intetne varias cosas y la verdad no me doy cuenta que puede ser... lo comprimi los cuatro archivos y lo deje en este link

http://www.sos-designs.com/index.zip

Puede alguien amable ver que pasa... desde ya muchas gracias...
__________________
[email protected]

Etiquetas: Ninguno
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 03:52.