Foros del Web » Creando para Internet » CSS »

Menu desplegable 100% CSS

Estas en el tema de Menu desplegable 100% CSS en el foro de CSS en Foros del Web. A simple vista y sin ver también el html no veo exactamente qué has modificado sobre el original para que te ocurra eso. Yo diría ...

  #121 (permalink)  
Antiguo 16/09/2008, 03:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

A simple vista y sin ver también el html no veo exactamente qué has modificado sobre el original para que te ocurra eso. Yo diría que lo más fácil es que cojas de nuevo el menú original y vayas modificando las cosas una a una y comprobando qué ocurre en cada cambio. Lo digo entre otras cosas porque en el fragmento de html que pusiste en el otro hilo ví que habías eliminado varias cosas como los comentarios condicionales y demás, por lo que el menú no te funcionará en IE6.

Creo que partiendo del original, los cambios que quieres hacer serían sencillos, pero como ya comenté alguna otra vez, si cambias varias cosas y luego se produce un desastre, no sabes dónde está el problema, por eso es mejor ir cambiando las cosas una a una y comprobando qué ha pasado.

Si sobre el original no lo consigues, dime y te echo una mano.
__________________
Visita mi nueva web idplus.org
  #122 (permalink)  
Antiguo 16/09/2008, 04:12
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Pues mira, poniendo tú código tal cual a parte de que no me lo ajusta bien, que es uno de los cambios que hice a parte de color de fondos y poco más, no me muestra el submenú bien en firefox, me los muestra por separado.



en explorer, que me hace bien el submenú (lo muestra junto) pero me tapa Mi Cuenta y en Catálogo lo muestra desplazado...


en esta imagen se deberí de ver Mi Cuenta, pero lo tapa login/logout, solo le he cambiador el color de fondo y le he quitado los bordes.

Y al cambiar:

#menu ul li.nivel1
{
float: left;
width: 162px;
margin-right: 2px;
}

por:

#menu ul li.nivel1
{
float: left;
}

me alinea bien el menú, pero Catálogo y Mi Cuenta me muetra diferente el submenú, en Catálogo lo desplaza a la derecha y en Mi cuenta me lo tapa como antes (Catálogo tb me lo mostraba desplazado y hace desaparecer Catálogo)...todo esto en explorer, en firefox bien alineado pr submenús separados:



¿sabes por qué pasa esto? Gracias!!!

Última edición por Kilofafeure; 16/09/2008 a las 04:40
  #123 (permalink)  
Antiguo 16/09/2008, 04:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Como verás en el enlace, el menú que usas por sí solo funciona bien, por lo que si al incrustarlo en tu página ocurre eso, inevitablemente tiene que ser que algún otro elemento de tu css está interfiriendo con él. No puede haber otra causa si lo coges y lo pegas tal cual, tanto el html como el css.

Sólo podríamos ver qué ocurre viendo en funcionamiento tu web, si no, para mi es imposible.
__________________
Visita mi nueva web idplus.org
  #124 (permalink)  
Antiguo 16/09/2008, 04:58
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Aquí va el HTML

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$lng['titulo_index']; ?></title>
<script language="Javascript" type="text/javascript" SRC="./js/cargarcontenedor.js"></script>
<link rel="stylesheet" type="text/css" href="css/estilo2.css"/>
</head>
<body>
    <!-- parte central -->
    <div id="container">
  
          <!-- cabecera -->
          <div id="header" >
          	<div id="flags">
            	<ul>               		
                        <li><a href="./setlang.php?lang=espanol"><img src="http://www.forosdelweb.com/images/es.gif"></a></li>
                        <li><a href="./setlang.php?lang=catalan"><img src="http://www.forosdelweb.com/images/catalonia.gif"></a></li>
                        <li><a href="#"><img src="http://www.forosdelweb.com/images/england.gif"></a></li>
                        <li><a href="#"><img src="http://www.forosdelweb.com/images/de.gif"></a></li>  
               </ul>
            </div>
            <form name="frmbusqueda2" action="" >
              <div id="buscador" style="position:relative; top: 40px; left:760px;">
              	<select name="id_sello" id="id_sello" class="tamanoselect10" size="1" onchange="cargasello()">
                    <option selected value=""><?=$lng['etiqueta']['Sellos']; ?></option>
                    <?php
                    $tablasello = mysql_query("select * FROM sellos WHERE Borrado='0' ORDER BY RefNom");
                    while ($registrosello = mysql_fetch_array($tablasello))
                    {
                        ?>
                        <option> <?php echo $registrosello['NombreSello']; ?></option>
                        <?php
                    }
                    ?>
				</select>
              </div><!-- buscador1 -->  
              <br>
              <div id="buscador" style="position:relative; top: 32px; left:760px;">
				<select name="id_estilo" id="id_estilo" class="tamanoselect10" size="1" onchange="cargaestilo()">
                    <option selected value=""><?=$lng['etiqueta']['Estilos']; ?></option>
                    <?php
                        $tablaestilo = mysql_query('select * FROM Estilo');
                        while ($registroestilo = mysql_fetch_array($tablaestilo))
                        {
                     ?>
                    <option value="<?php echo $registroestilo['id_Estilo']; ?>"> <?php echo $registroestilo['TipoEstilo'];?></option>
                    <?php
                        }
                    ?>
 				</select>
              </div><!-- buscador2 -->
            </form>            
          </div> <!-- header -->          
		  <div id="topmenu">
          	<div id="toprightmenu">
            	<div class="moduletable">
          		  <form name="frmbusqueda" action="" onsubmit="buscarDato(); return false">
           			 <label for="mod_search_searchword"><?=$lng['etiqueta']['Busqueda']; ?></label>
           			 <input id="dato" class="tamanoselect15" type="text" value="<?=$lng['etiqueta']['Busqueda']; ?>..." size="12" alt="<?=$lng['etiqueta']['Busqueda']; ?>r" maxlength="20" name="dato"/>
           		 </form>
           	 	</div>
            </div>           
          	<div id="topleftmenu">
            		<div id="menu"> <!--http://www.forosdelweb.com/f53/menu-desplegable-100-css-595007/-->
                    <ul> 
                        <li class="nivel1"><a href="#" onclick="return principal('./carrito/ver_carrito.php','mainContent');"><img src="http://www.forosdelweb.com/images/carrito.jpg" width="21" height="20"></a></li>                                              
                        <li class="nivel1"><a href="#" onclick="return principal('./inicio/inicio.php','mainContent');">Inicio</li>
                        <li class="nivel1">Catálogo               
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="carganovedad();">Novedades</a></li>
                                <li><a class="nivel1" href="#" onclick="cargareposicion();">Reposiciones</a></li>
                                <li><a class="nivel1" href="#" onclick="cargaoferta();">Ofertas</a></li>
                            </ul>
                        </li>
                        <li class="nivel1">Mi Cuenta                  
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/logout.php','mainContent');">Login/Logout</a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/nuevaclave.php','mainContent');">Cambiar Clave</a></li>	              					
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/crearusu.php','mainContent');">Crear Cuenta</a></li> </ul>
                        </li>   
                        <li class="nivel1">Links
                            <ul>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/clubs.php','mainContent');"><?=$lng['links']['1']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/festivales.php','mainContent');"><?=$lng['links']['2']?></a></li> <li><a class="nivel1" href="#" onclick="return principal('./links/djs.php','mainContent');"><?=$lng['links']['3']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/amigos.php','mainContent');"><?=$lng['links']['4']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/colaboradores.php','mainContent');"><?=$lng['links']['5']?></a></li>
                            </ul>
                        </li>
                        <li class="nivel1"><a href="www.trivialbookings.net/es/" target="_blank">Bookings</a></li>
                    </ul>
                    </div>
           	</div>
          </div>
       
          <!-- contenedor información -->
          <div id="mainContent">
          <?php include_once("./inicio/inicio.php"); ?>
          </div>
          
          <!-- pie de página -->
          <div id="footer" class="Button">
          <ul>
            <li><a href="#" onclick="return principal('./pie/envios.php','mainContent');"><?=$lng['pie']['Envios']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/confidencialidad.php','mainContent');"><?=$lng['pie']['Confi']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/condiciones.php','mainContent');"><?=$lng['pie']['Condi']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/confidencialidad.php','mainContent');"><?=$lng['pie']['Contact']; ?></a></li>            
          </ul>
          </div>      
    </div>
</body>
</html> 
  #125 (permalink)  
Antiguo 16/09/2008, 04:59
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Aquí va el CSS
[HTML]
@charset "utf-8";

* {
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
#menu {
/*
font-size:0.9em;
margin:20px auto;
text-align:center;
*/
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:left;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float:left;
}
#menu ul li a {
background-color: transparent;
color: #FFFFFF;
display:block;
padding:0px;
position:relative;
text-decoration:none;
}
#menu ul li:hover {
position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #111111;
color: #FFFFFF;
position:relative;
}
#menu ul li a.nivel1 {
display:block !important;
position:relative;
}
#menu ul li ul {
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display:block;
left:0;
position:absolute;
width: 150px;
}
#menu ul li ul li a {
border-top-color:#000000;
padding:0px 0px;
}
#menu ul li ul li a:hover {
border-top-color:#000000;
position:relative;
}

#mainContent {
padding: 3px 0 0 0;
margin: 0;
color:#000000;
background:#DDFFDD;
font-family: Arial,Helvetica,sans-serif;
font-size: 12pt;
}
#maincontent h1, #maincontent .componentheading {
font-family:Arial,Helvetica,sans-serif;
font-size:16pt;
height:16pt;
margin:0 0 10px;
padding:3px 0 0;
}
#maincontent h2, #maincontent .contentheading {
font-family:Arial,Helvetica,sans-serif;
font-size:16pt;
margin:0;
padding:3px 0 0;
}
#maincontent h3 {
font-size:14pt;
margin:0;
padding:3px 0 0;
}
#maincontent h4 {
font-size:12pt;
margin:0;
padding:3px 0 0;
}
.post-body div
{
text-align:center;
}
.tamanoselect10
{
width:9.9em;
padding:0px 0px 4px 0px;
}
.tamanoselect15
{
width:12.9em;
padding:0px 0px 4px 0px;
}
body
{
color: #FFFFFF;
background-color: #000000;
background-image: url(../images/fondo.gif);
font-family: Verdana,Helvetica,sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 10pt;
}
#container {
width: 920px;
background: #FFFFFF;
margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
}
#header {
background-image: url(../images/header-fondo2.gif);
height:130px;
width: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
#flags {
position:relative; top: 5px; left: 770px;
padding:2px 0px 2px 15px;
text-align:left;
width:210px;
}
#flags ul {
margin:0;
padding:0;
}
#flags li {
display:inline;
margin:0;
padding:0;
}
#buscador {
position: relative;
left: 750px;
}
#topleftmenu
{
background-image:url(../images/topbar-left.gif);
background-position:left center;
background-repeat:no-repeat;
padding-left: 117px;
/*
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:right;
*/
}

#toprightmenu
{
border-left:2px solid #FFFFFF;
float:right;
font-size:10pt;
font-weight:bold;
margin:7px 0 5px 20px;
padding:0 10px 0 20px;
}
#topmenu {
background-image:url(../images/topbar-fondo.gif);
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
height:36px;
margin:0;
padding:0;
}
#topmenu .moduletable
{
display:inline;
}
#topmenu ul {
display: inline;
}
#topmenu ul li {
margin: 0;
padding: 0 0 0 20px;
display: inline;
font-size: 11pt;
font-weight: bold;
}
#topmenu form {
display: inline;
padding: 0;
margin: 0;
}
#topmenu a {
color:#FFFFFF;
text-decoration:none;
}
img {
border: 0;
}
#footer {
background-image: url(../images/footer-fondo.gif);
background-repeat: repeat-x;
background-color: #000000;
color: #FFFFFF;
font-family: Verdana,Helvetica,sans-serif;
font-size: 6px;
height: 20px;
text-align:center;
padding: 2px 10px 0 10px;
}
#footer ul {
display: inline;
}
#footer ul li {
margin: 0;
padding: 0 0 0 20px;
display: inline;
}
#footer form {
display: inline;
padding: 0;
margin: 0;
}
#footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}
#footer a {
color:#FFFFFF
}
a:link {
text-decoration:none;
color: inherit;
}
dl {
margin: 0 0 5px 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 0;
}
ul {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
}
fieldset {
border: 1px solid #dddddd;
margin: 0 0 7px 0;
padding: 10px 10px;
}
p {
width: 100%;
margin: 0 0 5px 0;
}
.Button{
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}
[HTML]

Última edición por Kilofafeure; 16/09/2008 a las 05:33
  #126 (permalink)  
Antiguo 16/09/2008, 05:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Pues perdóname pero ahora sí que definitivamente no te entiendo: en el menú usas javascript, incrustas imágenes, eliminas las clases que yo uso para que todo funcione, eliminas los comentarios condicionales para IE6... la verdad, ¿en qué se parece este menú que quieres hacer con mis ejemplos?

¿Y dices que sólo has cambiado el color de fondo y nada más? Me has dejado perplejo, la verdad.
__________________
Visita mi nueva web idplus.org
  #127 (permalink)  
Antiguo 16/09/2008, 05:50
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Pues perdóname pero ahora sí que definitivamente no te entiendo: en el menú usas javascript, incrustas imágenes, eliminas las clases que yo uso para que todo funcione, eliminas los comentarios condicionales para IE6... la verdad, ¿en qué se parece este menú que quieres hacer con mis ejemplos?

¿Y dices que sólo has cambiado el color de fondo y nada más? Me has dejado perplejo, la verdad.
El javascript que utilizo en el menu es para cargar cosas en el container, no utilizo para nada javascript en el menu, es decir utilizo ajax para cargar lo que necesito donde lo necesito, no he leido que no se puedan utilizar, si no es así 1ª noticia y lo siento. Piensa que el menú siempre esta visible ya que está en el header, si has mirado el html de arriba (que está todo) lo habrás visto, que lo único que cambia en la pagina es el contenedor.

Las unica imagen que utilizo en el menu es para un carrito, tampoco he leido que no se puedan poner, al fin y al cabo me la alinea bien y no tiene ni submenu ni nada d nada, es un link normal y corriente, en vez de texto imagen.

Los comentarios condicionales no me aparecen cuando cargo la pagina con el css, además estoy utilizando explorer 7, no 6...pero no estaria de mas tenerlos
http://www.araudi.net/forosdelweb/css/menu.css
He vuelto a mirarlo y no aparecen, y si cargo el menu con firebug tampoco aparecen...

¿Y me podrias decir que clases me he cargado por favor?, he cortado y pegado tal cual del link

Aquí solo tienes el codigo del menu:

Código HTML:
 <div id="topleftmenu">
            		<div id="menu"> <!--http://www.forosdelweb.com/f53/menu-desplegable-100-css-595007/-->
                    <ul> 
                        <li class="nivel1"><a href="#" onclick="return principal('./carrito/ver_carrito.php','mainContent');"><img src="http://www.forosdelweb.com/images/carrito.jpg" width="21" height="20"></a></li>                                              
                        <li class="nivel1"><a href="#" onclick="return principal('./inicio/inicio.php','mainContent');">Inicio</li>
                        <li class="nivel1">Catálogo               
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="carganovedad();">Novedades</a></li>
                                <li><a class="nivel1" href="#" onclick="cargareposicion();">Reposiciones</a></li>
                                <li><a class="nivel1" href="#" onclick="cargaoferta();">Ofertas</a></li>
                            </ul>
                        </li>
                        <li class="nivel1">Mi Cuenta                  
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/logout.php','mainContent');">Login/Logout</a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/nuevaclave.php','mainContent');">Cambiar Clave</a></li>	              					
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/crearusu.php','mainContent');">Crear Cuenta</a></li> </ul>
                        </li>   
                        <li class="nivel1">Links
                            <ul>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/clubs.php','mainContent');"><?=$lng['links']['1']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/festivales.php','mainContent');"><?=$lng['links']['2']?></a></li> <li><a class="nivel1" href="#" onclick="return principal('./links/djs.php','mainContent');"><?=$lng['links']['3']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/amigos.php','mainContent');"><?=$lng['links']['4']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/colaboradores.php','mainContent');"><?=$lng['links']['5']?></a></li>
                            </ul>
                        </li>
                        <li class="nivel1"><a href="www.trivialbookings.net/es/" target="_blank">Bookings</a></li>
                    </ul>
                    </div>
           	</div>
          </div> 
Espero que me puedas decir si puedo utilizar javascript o no en los links, si puedo poner o no imagenes y si puedes chequear los links ya que lo he mirado con explorer y firefox y de ninguna manera me aparecen los condicionales o a ver si me puedes decir que estoy haciendo mal para poder verlo correctamente...muchas gracias!

Última edición por Kilofafeure; 16/09/2008 a las 06:03
  #128 (permalink)  
Antiguo 16/09/2008, 06:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Kilofafeure Ver Mensaje
El javascript que utilizo en el menu es para cargar cosas en el container, no utilizo para nada javascript en el menu, es decir utilizo ajax para cargar lo que necesito donde lo necesito, no he leido que no se puedan utilizar, si no es así 1ª noticia y lo siento.
No, veamos, te he contestado un poco precipitado.
El javascript lo puedes usar siempre que quieras, y más si es ajax para cargar otra cosa en otra parte. No me he fijado y pensaba que usabas JS para desplegarlo.

Cita:
Iniciado por Kilofafeure Ver Mensaje
Las unica imagen que utilizo en el menu es para un carrito, tampoco he leido que no se puedan poner, al fin y al cabo me la alinea bien y no tiene ni submenu ni nada d nada, es un link normal y corriente, en vez de texto imagen.
Por supuesto que puedes usar imágenes, pero te podrían producir un efecto indeseado por sus tamaños, display, etc.

Cita:
Iniciado por Kilofafeure Ver Mensaje
Los comentarios condicionales no me aparecen cuando cargo la pagina con el css, además estoy utilizando explorer 7, no 6...pero no estaria de mas tenerlos
Los comentarios condicionales obviamente no están en la css, sino en el html. Míralo bien y verás que están ahí

Cita:
Iniciado por Kilofafeure Ver Mensaje
¿Y me podrias decir que clases me he cargado por favor?, he cortado y pegado tal cual del link
Perdón, no has eliminado, has añadido.
Los li "<li class="nivel1">" sólo deben ser lo que tengan algo que desplegar dentro, no todos. Y has añadido esa clase también a los enlaces

(<li><a class="nivel1" href="#" onclick...)

así, que creo que no, no has copiado y pegado tal cuál (a no ser que estemos hablando de diferente menú).

Es bastante probable que el problema esté justamente en esa clase. Revisa que sólo los elementos de primer nivel que tengan algo que desplegar dentro lleven esa clase.

Si has copiado y pegado tal cuál dime de qué número de menú estás hablando, para comprobarlo.
__________________
Visita mi nueva web idplus.org
  #129 (permalink)  
Antiguo 16/09/2008, 08:03
 
Fecha de Ingreso: noviembre-2006
Mensajes: 117
Antigüedad: 10 años
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Los comentarios condicionales obviamente no están en la css, sino en el html. Míralo bien y verás que están ahí
Cierto es, con firebug no sale, dándole a ver código fuente aparecen...

Cita:
Iniciado por Mikmoro Ver Mensaje
Perdón, no has eliminado, has añadido.
Los li "<li class="nivel1">" sólo deben ser lo que tengan algo que desplegar dentro, no todos. Y has añadido esa clase también a los enlaces
(<li><a class="nivel1" href="#" onclick...)
así, que creo que no, no has copiado y pegado tal cuál (a no ser que estemos hablando de diferente menú).
Cierto también, iba mirando código y adaptando el mio y lo hice mal, al arreglar esto en firefox ya se me muestra como todo un bloque. Muchas Gracias!! sin embargo en explorer me da los mismos errores, investigaré un poco más...

Pero tengo otra pregunta, como puedo hacer para que me quite este espacio de fondo de color dentro del submenú, me aparece como tabulado y estoy tocando propiedades align-text pero no consigo que me lo mueva, también he provado con el ancho del submenú pero entonces los que son largos y tienen 2 palabras me los divide en 2 filas...muchas gracias por enésima vez!

  #130 (permalink)  
Antiguo 16/09/2008, 08:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

El alineado al centro de los elementos del menú se encuentra aquí:

#menu { text-align: center;

con quitar ese, todo se va a la izquierda.
__________________
Visita mi nueva web idplus.org
  #131 (permalink)  
Antiguo 03/10/2008, 08:47
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

alguien puede decirme porque se me ve con letras en vez de como a vosotros?

Se me ve así; http://www.mariabalibrea.es/desplegable.htm
  #132 (permalink)  
Antiguo 03/10/2008, 09:52
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.706
Antigüedad: 11 años, 7 meses
Puntos: 829
Exclamación Respuesta: Menu desplegable 100% CSS

Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #133 (permalink)  
Antiguo 03/10/2008, 15:39
Avatar de Hiruma-Sama  
Fecha de Ingreso: agosto-2007
Ubicación: Floresta, Buenos Aires, Argentina.
Mensajes: 234
Antigüedad: 9 años, 3 meses
Puntos: 5
Respuesta: Menu desplegable 100% CSS

realmente exelente, me a servido de maravilla y aprendi algunas cosas muy interesantes ^^
  #134 (permalink)  
Antiguo 03/10/2008, 17:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por David el Grande Ver Mensaje
Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css
Efectivamente, gracias, David.

balibrea: si te fijas donde descargaste el html, hay un enlace al archivo css, para que puedas descargarlo y ponerlo en tu servidor.
__________________
Visita mi nueva web idplus.org
  #135 (permalink)  
Antiguo 03/10/2008, 17:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Hiruma-Sama Ver Mensaje
realmente exelente, me a servido de maravilla y aprendi algunas cosas muy interesantes ^^
Me alegro de que te haya gustado y servido de algo
__________________
Visita mi nueva web idplus.org
  #136 (permalink)  
Antiguo 19/10/2008, 10:32
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por David el Grande Ver Mensaje
Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css
MUCHISIMAS GRACIAS DAVID!!!! Meha servido de ayuda perfectamente. Te lo agradezco de verdad.
  #137 (permalink)  
Antiguo 19/10/2008, 11:05
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.887
Antigüedad: 13 años, 8 meses
Puntos: 59
Respuesta: Menu desplegable 100% CSS

Excelente aportación Mikmoro

Gracias por compartir
  #138 (permalink)  
Antiguo 19/10/2008, 11:54
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 8 años, 1 mes
Puntos: 30
Respuesta: Menu desplegable 100% CSS

excelente! :D!!!
  #139 (permalink)  
Antiguo 20/10/2008, 16:26
 
Fecha de Ingreso: febrero-2008
Mensajes: 30
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

men he copiado el cod.fuente de la pagina y el css y no me sale ningun menu solo me aparece un menu vertical con puntos y nada mas, espero me entiendas y saber que es lo que estoy haciendo mal.
  #140 (permalink)  
Antiguo 20/10/2008, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Es difícl saber con tan escasa explicación, pero date cuenta de que la css en estos menús siempre está en una carpeta llamada "css", por eso en la cabecera encuentras esta llamada a la hoja de estilo:

<link rel="stylesheet" href="css/menu.css" type="text/css" />

Es decir: o quitas el css/ de ese nombre o creas una carpeta ahí mismo llamada css y metes ahí la hoja de estilo.

A ver si es eso.
__________________
Visita mi nueva web idplus.org
  #141 (permalink)  
Antiguo 20/10/2008, 16:38
nfo
 
Fecha de Ingreso: octubre-2008
Ubicación: EsPaCiO TiEmPo
Mensajes: 396
Antigüedad: 8 años, 1 mes
Puntos: 5
Respuesta: Menu desplegable 100% CSS

Que buen aporte.... me va a venir de perlas! gracias
  #142 (permalink)  
Antiguo 21/10/2008, 16:58
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

[bueno antte todo darte las gracia por compartir todo lo que sabes, eres una makina, pero he utilizado tu desplegable que es magnifico. y tengo un problema que desde algunos ordenadores no se desplega, no se porque. sale opcion 1 opcion 2 opcion3 opcion4 y enciam no se desplega, muchas gracias por todo

Con que tiene que ver eso?
  #143 (permalink)  
Antiguo 21/10/2008, 17:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Hola, balibrea.

¿En que ordenadores? yo lo he comprobado en todos estos navegadores

- Firefox 2 y 3
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror (Linux)
- Firefox 2 y 3 (Linux)

y funciona en todos, todos en PC`s con Windows y Linux.

Dime en qué ordenadores y con qué navegadores, a ver si se puede averiguar algo.
__________________
Visita mi nueva web idplus.org
  #144 (permalink)  
Antiguo 23/10/2008, 02:34
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Hola, balibrea.

¿En que ordenadores? yo lo he comprobado en todos estos navegadores

- Firefox 2 y 3
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror (Linux)
- Firefox 2 y 3 (Linux)

y funciona en todos, todos en PC`s con Windows y Linux.

Dime en qué ordenadores y con qué navegadores, a ver si se puede averiguar algo.
Hola! muchas gracias por atenderme te lo agradezco de verdad, siempre tan genial.
Tengo internet explorer 6 en concreto este:(lo siento por no poner enlace directo no me lo permite todavía)

www.todoaunclic.com/Dibujocualidadesdeexplorer.bmp

y se me ve así :
www.todoaunclic.com/Dibujo.bmp
...y no se despliegan

este es el enlace www.mariabalibrea.es

muchas gracias por todo, te admiro, eres un genio y enciam compartes



este es mi codigo html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title> Aritista Maria Balibrea Melero CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />
</head>
<body background="imagenes/fotomaria.jpg">
<table border="0" width="100%">
<tr>
<td width="100%">
<p align="center"><b><font face="Comic Sans MS" color="#ffffff" size="6"><i>Maria
Balibrea Melero</i></font></b></p>
</td>
</tr>
</table>

<div id="menu" style="width: 674; height: 361">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Trayectoria
de pinturas</a><!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/anterioresal2000/index.html">Cuadros
anteriores al 2000</a></li>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/cuadros2000-2003/index.html">Cuadros
período 2000-2003</a></li>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/cuadros2003-2006/index.html">Cuadros
período 2003-2006</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Libros ilustrados</a> <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li><a href="#">Fábulas de Tomás de Iriarte</a></li>
<li><a href="http://www.google.es">Pandora de Antonio Balibrea</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Pinturas</a> <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li><a href="#">Pinturas 2008</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td>
<![endif]-->
<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="menu0" style="width: 674; height: 361">
<ul>
<li class="nivel1">
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="0" width="100%">
<tr>
<td width="100%" bordercolor="#FFFFFF"><b>Fotografía; <i>Ana Rosa Paños Martínez</i></b></td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

se me habia olvidado este es mi codigo css, bueno que es el tuyo...

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body {font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #000;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: ;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}





sin embargo tu codigo tal cual si que se ve bien en el mismo navegador, algo debo de haber hemodificado que lo he estropeado

Última edición por balibrea; 23/10/2008 a las 02:41
  #145 (permalink)  
Antiguo 23/10/2008, 11:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Se trata de una pequeña tontería: en este selector

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: ;
color: #000;
position: relative;
}

Has eliminado el color de fondo, y no debes hacerlo porque en ese caso no se ve en IE6. El original era:

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;

Cámbialo por el color que tú quieras, pero no lo elimines.
__________________
Visita mi nueva web idplus.org
  #146 (permalink)  
Antiguo 23/10/2008, 16:03
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Se trata de una pequeña tontería: en este selector

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: ;
color: #000;
position: relative;
}

Has eliminado el color de fondo, y no debes hacerlo porque en ese caso no se ve en IE6. El original era:

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;

Cámbialo por el color que tú quieras, pero no lo elimines.
Muchas gracias, con lo que me has dicho he conseguido arreglarlo, es un honor poder contar con tu ayuda
  #147 (permalink)  
Antiguo 23/10/2008, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
  #148 (permalink)  
Antiguo 23/10/2008, 22:39
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 8 años, 1 mes
Puntos: 30
Respuesta: Menu desplegable 100% CSS

mikmoro te ganaste un articulo en mi sitio web :P
http://codigodemaquina.110mb.com/CSS...esplegable.php

Suerte :D
  #149 (permalink)  
Antiguo 24/10/2008, 02:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

Estupendo

Saludos
__________________
Visita mi nueva web idplus.org
  #150 (permalink)  
Antiguo 24/10/2008, 05:54
 
Fecha de Ingreso: julio-2008
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
De nada, es un placer.

Saludos.
Lo siento, otra vez no se ven. pero ahora es con el explorer 7.0 con el que ni siquiera aparecen ( con el 6.0 se ven de lujo. ¿Que puede ser?

ya he conseuido que se vea pero para eso he tenido que quitar el titulo de la pagina que lo tenia así ...

<table border="0" width="100%">
<tr>
<td width="100%">
<p align="center"><b><font face="Comic Sans MS" color="#ffffff" size="6"><i>
Maria Balibrea Melero</i></font></b></p>
</td>
</tr>
</table>


¿puedo ponerle esto de alguna manera y que se sigan viendo los desplegables en el
ie7? muchas gracias de antemano, eres un genio?

Última edición por balibrea; 24/10/2008 a las 06:18
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

SíEste tema le ha gustado a 54 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 08:30.