Foros del Web » Creando para Internet » CSS »

Cambiar menu de 2 columnas en 1 columna

 Estas en el tema de Cambiar menu de 2 columnas en 1 columna en el foro de CSS en Foros del Web. Hola a todos, tengo un menu echo con css (el codigo no es mio, es de una plantilla gratuita) el problema que tengo es que ...
  #1 (permalink)  
Antiguo 11/12/2013, 06:32
 
Fecha de Ingreso: abril-2012
Ubicación: Madrid (España)
Mensajes: 162
Antigüedad: 13 años, 7 meses
Puntos: 5
Cambiar menu de 2 columnas en 1 columna
Hola a todos, tengo un menu echo con css (el codigo no es mio, es de una plantilla gratuita) el problema que tengo es que en el menu, hay desplegables, osea, cuando te situas encima se despliegan las opciones de ese menu. El problema, es que cuando las opciones superan las 4 me comienza a salir en columnas y no se como eliminar eso y que me salga todo en una sola columna.


Pongo el codigo del CSS a ver si me podeis echar una mano. (Ojo, es un poco largo)


Código: 
@font-face { 
  font-family: Yanone Kaffeesatz; 
    src: url('../fonts/CALIBRI.eot'); 
    src: local("CALIBRI"), url('../fonts/CALIBRI.ttf'); 
} 

@font-face { 
  font-family: CALIBRI; 
    src: url('../fonts/CALIBRI.eot'); 
    src: local("CALIBRI"), url('../fonts/CALIBRI.ttf'); 
} 

html { 
  height: 100%;
}

* { 
  margin: 0;
  padding: 0;
}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

body { 
  font: normal .80em arial, sans-serif;
  background: #eeeeee url(../images/pattern.png);
  color: #444;
}

p { 
  padding: 0 0 20px 0;
  line-height: 1.7em;
  text-align : justify;
  
}

img { 
  border: 0;
}


blockquote { 
  margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;
}
ul { 
  margin: 2px 0 22px 17px;
}
ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}
ol { 
  margin: 8px 0 22px 20px;
}
ol li { 
  margin: 0 0 11px 0;
}
.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}
.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}
.center { 
  display: block;
  text-align: left;
  margin: 20px auto;
}

#main, nav, #container, #logo, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;
}

nav { 
  height: 44px;
  width: 940px; /*ANCHO DE LA CAJA DEL MENU*/
  float: right;
  margin: -20px auto 0 auto;
  color: #222;
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #eee;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
} 

#sidebar_container { 
  float: right;
  /*width: 224px;*/
  margin: 25px 0 0 0;
}
.sidebar { 
  float: right;
  width: 200px;
  padding: 0px 20px;
  margin: 0 0 10px 0;
}
#sidebar_container2 { 
  float: left;
  width: 100px;
  margin: 25px 25px 50px 0;
}
.sidebar2 { 
  float: left;
  width: 100px;
  padding: 0px -20px;
  margin: 0 50px 0 0;
} 
.sidebar h3, .content h1 { 
  padding: 0 15px 20px 0;
  font: 230% 'CALIBRI', arial, sans-serif;
  text-shadow:  #FFF 1px 1px;
  margin: 0 1px;
  color: #444;
}
.sidebar h3 { 
  color: #444;
  font: 250% 'CALIBRI', arial, sans-serif;
  padding: 0 15px 5px 0;
}
.sidebar ul { 
  margin: 0 0 15px 0;
} 
.sidebar li a, .sidebar li a:hover { 
  color: #555;
  text-decoration: none;
} 
.sidebar li a:hover { 
  text-decoration: underline;
} 
.sidebar_item, .content_item { 
  padding: 15px 0;
}
.content { 
  text-align: left;
  width: 600px;
  margin: 0 0 0 0;
  float: left;
  font-size: 120%;
}
.content ul { 
  margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li { 
  list-style-type: none;
  background: url(../images/bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 28px;
  line-height: 1.5em;
}
footer { 
  width: 950px;
  font: 170% 'CALIBRI', arial, sans-serif;
  height: 30px;
  padding: 5px 0 20px 0;
  text-align: left;
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #eee;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
}
footer p { 
  line-height: 1.7em;
  padding: 0 0 10px 0;
}
footer a { 
  color: #222;
  text-decoration: none;
}
footer a:hover { 
  color: #222;
  text-shadow: none;
  text-decoration: underline;
}
.separator { 
  width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;
}
table { 
  margin: 0 0 0 0;
}

/* Image Transitions */
ul#images {
  margin: 10px 15px 10px 0;
  padding: 0;
  list-style: none;
  position: relative;
}
ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 150px;
}

/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}
html body ul.sf-menu ul ul { 
  margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
  z-index:2;
}
ul.sf-menu { 
  display: block;
  position: relative;
  z-index:2;
}
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
  z-index:2;
}
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}
ul.sf-menu a { 
  display: block;
  position: relative;
}
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}
ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(../images/arrows-black.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}
ul ul span.sf-arrow { 
  right: 5px;
  top: 20px;
  background-position: 0 100%;
}
/* Theming the menu */
ul#nav { 
  float: left;
}
ul#nav ul { 
  background: #DDD;
  margin-top: 5px;
  padding-bottom: 15px;
}
ul#nav li a { 
  padding: 7px 20px 6px 20px;
  font: 160% 'CALIBRI', arial, sans-serif;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  color: #222;
  margin-right: 2px;
  text-align:left;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
  color: #B30303;
  text-shadow: none;
}
ul#nav ul li a { 
  color: #222;
}
ul#nav ul li a:hover { 
  color: #B30303;
  margin-right: 2px;
}
/* Image Transitions */
ul#images {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}
ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
  list-style: none;
  z-index:0;
}
ul#images2 {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}
ul#images2 li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 100px;
  list-style: none;
  z-index:0;
}
  #2 (permalink)  
Antiguo 11/12/2013, 12:52
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 12 años, 6 meses
Puntos: 31
Respuesta: Cambiar menu de 2 columnas en 1 columna
No estaría de más que purgaras el código para tener lo implicado en el menú. Seleccionando según los tipos de elementos implicados, id y/o clases del menú. Si lo organizas bien, posiblemente podrás solucionarlo solo.
  #3 (permalink)  
Antiguo 12/12/2013, 02:24
 
Fecha de Ingreso: abril-2012
Ubicación: Madrid (España)
Mensajes: 162
Antigüedad: 13 años, 7 meses
Puntos: 5
Respuesta: Cambiar menu de 2 columnas en 1 columna
No entiendo mucho de CSS de ahi mi pregunta, creo que he aislado todo lo relacionado con el menu, lo detallo aqui abajo.

Código: 
ul { 
  margin: 2px 0 22px 17px;
}

ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

ol { 
  margin: 8px 0 22px 20px;
}

ol li { 
  margin: 0 0 11px 0;
}

#main, nav, #container, #logo, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;
}

nav { 
  height: 44px;
  width: 940px; /*ANCHO DE LA CAJA DEL MENU*/
  float: right;
  margin: -20px auto 0 auto;
  color: #222;
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #eee;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
} 
#sidebar_container { 
  float: right;
  /*width: 224px;*/
  margin: 25px 0 0 0;
}

.sidebar { 
  float: right;
  width: 200px;
  padding: 0px 20px;
  margin: 0 0 10px 0;
}

.content { 
  text-align: left;
  width: 600px;
  margin: 0 0 0 0;
  float: left;
  font-size: 120%;
}
  
.content ul { 
  margin: 2px 0 22px 0px;
}

.content ul li, .sidebar ul li { 
  list-style-type: none;
  background: url(../images/bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 28px;
  line-height: 1.5em;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
  z-index:2;
}

ul.sf-menu { 
  display: block;
  position: relative;
  z-index:2;
  
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
  z-index:2;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(../images/arrows-black.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 5px;
  top: 20px;
  background-position: 0 100%;
}

/* Theming the menu */
ul#nav { 
  float: left;
}

ul#nav ul { 
  background: #DDD;
  margin-top: 5px;
  padding-bottom: 15px;
}

ul#nav li a { 
  padding: 7px 20px 6px 20px;
  font: 160% 'CALIBRI', arial, sans-serif;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  color: #222;
  margin-right: 2px;
  text-align:left;
}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
  color: #B30303;
  text-shadow: none;
}

ul#nav ul li a { 
  color: #222;
}

ul#nav ul li a:hover { 
  color: #B30303;
  margin-right: 2px;
}



/* Image Transitions */
ul#images {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}

ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
  list-style: none;
  z-index:0;
}
ul#images2 {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}

ul#images2 li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 100px;
  list-style: none;
  z-index:0;
}
No tengo ni idea de cual de estos es el que indica que saque los datos en 2 columnas. Ayudenme, estoy desesperado.
  #4 (permalink)  
Antiguo 16/12/2013, 02:37
 
Fecha de Ingreso: abril-2012
Ubicación: Madrid (España)
Mensajes: 162
Antigüedad: 13 años, 7 meses
Puntos: 5
Respuesta: Cambiar menu de 2 columnas en 1 columna
Sigo necesitando ayuda, alguien me puede echar una mano?
  #5 (permalink)  
Antiguo 16/12/2013, 09:33
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 12 años, 6 meses
Puntos: 31
Respuesta: Cambiar menu de 2 columnas en 1 columna
Con ese css no veo que los submenus esten ocultos para luego desplegarse, si sólo usa css. Estas seguro que no hay otra oja de estilos que no hayas visto.

Creo que será mejor que compartas el menu que tienes mediante una pagina tipo http://jsfiddle.net/

Etiquetas: ancho, background, color, columna, columnas, hover, html
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:44.