12/12/2013, 02:24
|
| | Fecha de Ingreso: abril-2012 Ubicación: Madrid (España)
Mensajes: 162
Antigüedad: 12 años, 9 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. |