Problema 2 menus desplegables con mismo css

[wmdiseno]

Hola buenas noches a todos soy nuevo en el foro, soy medio novato investigando investigando y estudiando las claves ya se manejar mas o menos el diseño web y queriendo aprender al máximo de los expertos, que son todos ustedes aqui en este bonito foro que desarrollo web.

Mi duda es la siguiente.

hize una pagina web, que es una pasteleria, le agrege un menu desplegable, con acciones y fondo que concordara con la pagina a su estilo, le quise agregar otro con el mismo codigo pero en vertical, porque el otro es en horizontal. los mismo divs pero diferente css de tamaño para que quedara en horizontal pero no me explico porque se unieron, repito los estilos css, asi un ejemplo le cambio el porcentaje de ancho o alto (height o width al tantos pixeles px) y se cambia al otro sin modificar nada del otro menu desplegable, checando las situacion. la solucione con diferente codigos de divs y css, de una pagina que se hace menu desplegable a tu estilo, quedo perfecto! hasta que quise meter una caja de registro, nombre y contraseña con codigo css y el accion del boton (codigo) ''registrar'' con method post index.php donde esta todo el codigo php. de eso no tengo problema utilizo la base de texto por mysql, pero no se porque al agregar la caja de (nombre y contraseña) se modifica el estilo del menu desplegable (css)

pongo captura de pantalla (para que se den una idea):


Codigo: de menu desplegable. (css)

Código HTML:

<style type="text/css">
 
    * {
        
        padding:0px;
        margin:0px;
    
     }
    #header {
        margin:auto;
        width:px;
        font-family:Arial, Helvetica, sans-serif;
        z-index: 1;
        position:relative ;
        
        
    }
    
    ul, ol {
      list-style:none;  
   }
   .nav li a {
       background-color:#AE8452;
       color:#fff;
       text-decoration:none;
       padding:11px 10px;  
       display:block;
    }
    
    .nav li a:hover { 
    background-color:#FFC7B0;}
    
    .nav > li {
        float:left; 
 
    }
    
    .nav li ul {
        display:none;
        position:absolute;
        min-width:140px; 
    
 
    }
    
    .nav li:hover > ul { 
       display:block;
    
    }
    
    .nav li ul li { 
    position:relative;      
    }
 
    .nav li ul li ul {
    right:-140px;
    top:0px;
    
    }
     #slider {
               
                z-index: -1;
                position: relative;
                width:1050px;
                height:334px;
                
                
                /*IE bugfix*/
                padding:0;
                margin:0;
            }
            
            #slider li { list-style:none; }
            
            #page {
                width:1050px;
                margin:0px auto;
            }
    
    
    </style>
 

Ahora codigo de registro: nombre y contraseña css!

Código HTML:

<style> 
        <style> 
        *{ 
            font-size: 3px; 
            font-family:Arial, Helvetica, sans-serif 
        } 
        form.registro{ 
            background: none repeat scroll 0 0 #FFC9B2; 
            border: 1px solid #AE8552; 
            margin: 0 auto; 
            padding: 0px; 
            width: 192px;
            height: 197px; 
            box-shadow:0px 0px 10px black;  
            border-radius:0px;    /* dejar esquinas curviadas o cuadradas del cuadro */
            position:relative; 
            top:0px; 
        } 
        form.registro div {
            margin-bottom: 2px; 
            overflow: hidden; 
        } 
        form.registro div label { 
            display: block; 
            float: center; 
            line-height: 16px;
            margin-bottom: 6px;     /* tamaño de boton */
            margin-left: 7px;
            
             
        } 
        form.registro div input[type="text"], form.registro div input[type="password"] { 
            border: 1px solid #DCDCDC; 
            float: center; 
            padding: 3px 17px; 
            margin-left: 10px;
        } 
        form.registro div input[type="submit"] { 
            background: none repeat scroll 0 0 #AE8552; 
            border: 1px solid #C6C6C6; 
            float: right; 
            font-weight: bold; 
            padding: 3px 3px;      /* Tamaño de cuadro */
            margin-left: 10px;   /* marge a la izquierda cuadro blanco */
            margin-right: 7px;     /* Tamaño a la derecha cuadro blanco */
        
        } 
        .error{ 
            color: red; 
            font-weight: bold; 
            margin: 10px; 
            text-align: center; 
        } 
 
</style>
<link href="index.css" rel="stylesheet" type="text/css">
<form action="index1.php" method="post" class="registro"> 
<div><label><br>
  Usuario:</label> 
<input type="text" name="usuario"></div> 
<div><label>Clave:</label> 
<input type="password" name="password"></div> 
 
 
<div><input type="submit" name="enviar"  value="Registrar">
 
 
<style type="text/css">
 
 a:link {
font-size:12px;
 
} 
 a:visited {
font-size:12px;
} 
 a:active {
font-size:12px;
}
 a:hover {
font-size:12px;
}
 
 
a:link {text-decoration:none; color: #AE8552;} /* Link no visitado*/
a:visited {text-decoration:none; color:#AE8552} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00; background:#EEEEEE} /*Link activo*/
a:hover {text-decoration:underline; color:#AE8552; background: #FFC9B2} /*Mause sobre el link*/
</style>
 
 
<div class='recuperar'>
  <p align="left"><a href="recuperar.php" class="recuperar" onClick="return confirm('¿Realmente deseas recuperar su contrase&ntilde;a?')">
Olvid&oacute; su Password?<br>
  
  </a><a href="tu link" onClick="return confirm('¿Realmente deseas recuperar su usuario?')">Olvid&oacute; su Usuario?</a>  </div>
</form> 
</style>
 

Cualquier respuesta seria de mucha ayuda, para resolver este problema que me anda sacando las pocas neuronas que tengo en la cabeza, Bah!

Gracias!

[pzin]

Bienvenido al foro.

Tu código no hay por donde cogerlo. Está muy desordenado, no hay body, código HTML dentro de style y cosas así.
Aparte, yo personalmente no entiendo muy bien cual es el problema.

Si lo tienes online o puedes poner un ejemplo funcional donde se reproduzca el problema en un fiddle mejor.

Y usa highlight cuando publiques código.

[alzacon]

Yo tampoco llego a saber cual es el problema, porque me pierdo entre detalles que no aclaran nada.

Por ejemplo de la siguiente frase sobraría lo que pongo en negrita.

hasta que quise meter una caja de registro, nombre y contraseña con codigo css y el accion del boton (codigo) ''registrar'' con method post index.php donde esta todo el codigo php. de eso no tengo problema utilizo la base de texto por mysql, pero no se porque al agregar la caja de (nombre y contraseña) se modifica el estilo del menu desplegable (css)

Creo que lo fundamental es que reordenes y limpies el código, porque te va a ser más fácil encontrar y solucionar problemas.

[wmdiseno]

Gracias por contestarme a la brevedad posible.

Creo que no me explique a la perfeccion :/ soy novato para explicarlo :) nomas uno lo sabe lo que es en la cabeza. ahora si! esque cuando agrege la caja de registro que con lleva esa caja codigos (html y css) tambien agarro la misma dimensión el menu desplegable. del tamaño de letra y creo que el tamaño del recuadro (donde va el menu desplegable), es por eso que se me encojio el menu desplegable.

como se muestra a continuación, ya me regañaron por no utilizar el highlight jejeje, ¿alguna idea?

quise hacer lo mismo con otro menu desplegable en forma vertical, pero se agarraba de lo mismo codigos, estoy seguro que es css, porque el html esta bien o los div que lleva el contenido el menu. es el css, traigo la idea de sacar los codigos css y vincularlo mediante un codigo aver si eso lo agarraria pero no se que opinen los expertos, ya me medio estrese les agradeceria de antemano.


Saludos!

[wmdiseno]

Pense que era mas rapido el foro, para responder, digame con un si o no, si lo que necesito hacer una hoja de estilo 'css' adjuntarlo con los datos del menu desplegable para que funcione, lo e estado pensando pero ando programando en php, que no e tenido time, pero ahi esta el interes jajaja, saludos colegas y amigos de este foro. :D

[pzin]

Iniciado por wmdiseno

Pense que era mas rapido el foro

Normalmente es rápido, pero yo sigo sin entender el problema porque te explicas muy mal. No sé si es que haces mal uso de los signos de puntuación (frases que terminan, pero ¿realmente terminan?), algunas faltas ("con lleva" o "conlleva") o algunos términos que a saber qué significan (¿dimensión?) y cosas así...

Todo eso no ayuda especialmente. Y yo al menos no he contestado porque sigo sin entenderte.

Puedes subir un ejemplo de lo que dices a jsfiddle, o dos; uno donde no aparezca el problema y otro donde aparezca el problema. Luego lo enlazas para poder verlo y ya la explicación no es tan importante.

[wmdiseno]

Bueno creo que yo no me explico jajaja, esque no se que ando diciendo mal, a la mejor lo manejas mas profesional, y yo un simple samaritano. xD

Bueno el problema es que el menú desplegable se modifico sin haberlo Yo! modificado, cuando agregué los códigos de la caja de registro (usuario y contraseña) el menú desplegable se hizo mas chico del tamaño normal, que deja el hueco de espacio (blanco) lo hice el diseño con plantilla de photoshop (Ps) le agregué los códigos en dreamweaver paso los códigos mediante jsfiddle:

el codigo css del del registro (usuario y contraseña)
[URL="http://jsfiddle.net/pcJtb/""]http://jsfiddle.net/pcJtb/"[/URL]

http://jsfiddle.net/pcJtb/

codigo del menu desplegable (html y css)
[URL="http://jsfiddle.net/uUa52/"]http://jsfiddle.net/uUa52/[/URL]

http://jsfiddle.net/uUa52/

bueno creo que me supe entender, si no me avisas. jajaja tengo una pequeña idea seria vincular una hoja de estilos css ala pagina así no se pegaría los estilos css, uno con otro. bueno es que no se como explicarlo profesionalmente, ando prendiendo de esto. y si es necesario aprendería como un profesional!

GRACIAS!
por tomarte de tu tiempo.

[pzin]

Ahora creo que si te entendí. De todas formas en ambos enlaces de jsfiddle está el mismo código. Pero bueno, como está en tu primer mensaje no hay mayor problema.

Entiendo que tenías tu menú como querías, y que al añadir el código CSS para la caja de registro, te cambió el diseño del menú y se hizo más pequeño.

Supongo que será debido a esto:

Código CSS:

* { 
  font-size: 3px; 
  font-family:Arial, Helvetica, sans-serif 
}
 

Estás indicando que la fuente de todos los elementos de la página se reduzca a tres píxeles, es decir, que sea bastante pequeña. Quitando esa regla seguramente se te arregle lo del menú.

Lo de los enlaces es porque aún no cumples la regla 30/30 (días de registro y mensajes publicados), cuando la cumplas podrás poner enlaces. Es parte de las políticas del foro.

[wmdiseno]

Oh geneal! dejame checarlo minuciosamente, agradecido estoy con vos, una cosa? no necesitas un aprendis? jajaja esque necesito saber, algo que tengas en tu tiempo libre estaria plenamente agradecido, veo veo y leo leo pero la verdad no le eh preguntado a nadien, nomas con mi amiga incondicional ''Dreamweaver'' saludos!

y gracias!

P.d pense que se habia puesto bien los enlaces, ando medio tarugo con esa pagina de poner códigos , te aseguro aprender a utilizarlo mejor, prometido!


msg de 7.06 p.m sigue igual, ya le quite todo y sigue igual
ya le intente quitar el font-size: 3px; y nada

Código CSS:

*{ 
            font-size: 3px; 
            font-family:Arial, Helvetica, sans-serif 
        }
 

nomas se pone en blanco la caja de registro, pero sigue con el mismo tamaño el menu deseplegable. ¿como vez?

[wmdiseno]

Sigo igual! ¡alguien que me pueda echar la mano, para poderlo en solucionado ando buscando como hacerle por el padre Google, pero no llego a encontrar una solución que se parezca o al respecto, de antemano, Gracias!

[Tecna]

Buenas,

si quieres que te puedan ayudar deberías poner un ejemplo sencillo con el código html y css implicado intentando explicar claramente el problema y sin mezclar con otras cosas, (primero hablas de 2 menus pero en la imagen no se ve más que uno, luego de un formulario..).

Sin ver nada de código mi intuición me dice que puede tratarse de un problema de selectores duplicados. Lo digo por cosas que comentas como "le quise agregar otro con el mismo código.... los mismos divs...." Los id tienen que ser únicos, no se pueden repetir, si se repiten puede hacer cosas raras según el navegador, una de ellas es que aplique los mismos estilos. Pero esa no es la forma correcta de hacerlo porque no se pueden repetir los ids, deberías poner 2 ids diferentes y definir los estilos para cada uno de ellos. Los comunes se pueden definir a la vez separando los 2 selectores por una coma.

Si esto no te ayuda intenta explicarte mejor para que sea más fácil ayudarte.

Si en lugar de aplicar los estilos a los ids los aplicas a la etiqueta div se aplicarán a todos los div y al cambiar algo se cambiara en todos.

[wmdiseno]

Gracias! amigo por responerme, a la mejor la mayoria de las personas andaran de que este chavo no entienden o cosas asi.

¡Bueno! YA LO SOLUCIONE! supe cual es la raiz del problema pero el problema aun sigue ahi

Código CSS:

<style type="text/css">
 
 a:link {
 font-size:  /*aquí le quito el valor agregado y se compone el menu pero el problema es la caja de registro agarra el mismo tamaño que el menu y lo quiero un poco mas pequeño el tamaño de letra*/ 
} 
 a:visited {
} 
 a:active {
}
 a:hover {
}
 
 
a:link {text-decoration:none; color: #AE8552} /* Link no visitado*/
a:visited {text-decoration:none; color:#AE8552} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00; background:#EEEEE} /*Link activo*/
a:hover {text-decoration:underline; color:#AE8552; background: #FFC9B2} /*Mause sobre el link*/
</style>
 
<br>
<br>
<div class='recuperar'>
&nbsp; <a href="recuperar_contraseña.php" class="recuperar" onClick="return confirm('¿Realmente deseas recuperar su contrase&ntilde;a?')">
Olvid&oacute; su Password?</a><br>
 
&nbsp; <a href="tu link" onClick="return confirm('¿Realmente deseas recuperar su usuario?')">Olvid&oacute; su Usuario?</a>  </div>
</form> 
</style>
 

donde pueden ver es ahi, bueno lo cheque por secciones, y encontre que ahi tengo el problema no se como dividir los estilos, que agarre el menu y la caja de registro, por partes diferentes

Saludos! y Gracias!