Foros del Web » Creando para Internet » CSS »

Menu Css

Estas en el tema de Menu Css en el foro de CSS en Foros del Web. Me he currado un menu horinzontal con css, mirando aqui y mirando alli y tengo dos problemas, uno que lo quiero abajo de la pantalla ...
  #1 (permalink)  
Antiguo 30/05/2012, 12:09
 
Fecha de Ingreso: abril-2010
Ubicación: Gipuzkoa
Mensajes: 7
Antigüedad: 14 años
Puntos: 0
Menu Css

Me he currado un menu horinzontal con css, mirando aqui y mirando alli y tengo dos problemas, uno que lo quiero abajo de la pantalla y no hay manera de ponerlo y otra que me salen unas rayas bajo el texto que yo no eh puesto, creo.
Este es el codigo:
Cita:
.menu1 ul li{
font-family: "Cicle Gordita";
display:inline;
text-align: center;
font-size:20px;
background-color:#999;
width:100%;
height:20px;
position: static;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border:1px solid #000000;
letter-spacing: 1px;
margin:125px;


}
.menu1 ul li:hover {
background-color:#CCCCCC; /* Color de fondo sobre el boton */

}
.menu1 .ul li a {
color: #000;
}
.menu1 ul {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E4E4E4;
}
  #2 (permalink)  
Antiguo 30/05/2012, 12:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Menu Css

text-decoration
Y el valor por defecto para los enlaces es underline

Sobre la posición:
A falta de los códigos (html y css) del resto del menú y sus ancestros para ver la estructura de la página y otras cuestiones, lo mejor es que se informe sobre la propiedad position

Eso y el lugar donde aparece en el flujo del documento html le ayudarán a colocarlo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 30/05/2012, 12:27
 
Fecha de Ingreso: abril-2010
Ubicación: Gipuzkoa
Mensajes: 7
Antigüedad: 14 años
Puntos: 0
Respuesta: Menu Css

Gracias por contestar, pero no he pillado ni jota, has usado un lenguaje demasiado tecnico para mi, si me lo podrias explicar como si fuera a un niño.
Muchas gracias.
  #4 (permalink)  
Antiguo 30/05/2012, 12:31
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Menu Css

<code>
/* Root = Horizontal, Secondary = Vertical */
ul#menu
{
margin: 0;
border: 0 none;
padding: 0;
/* ahora esta en 737px width: 500px; For KHTML with 360px*/
width:815px;
list-style: none;
height: 20px;
border:1px solid #55E;/* Original #eee*/
padding-top:30px;
padding-right:5px;
padding-left:31px;
padding-bottom:1px;
}

ul#menu li
{
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 20px;
padding-right:1px;
padding-left:7px;
}
ul#menu li
{
padding-bottom:2px;
}
ul#menu li:hover
{
background:#FFF;/* Original #eee */
}
ul#menu ul
{
margin: 0;
border: 0 none;
padding: 0;
width: 60px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 10px;
background: #EEE;/* Original #eee */
border: none;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/
{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#menu ul li
{
width: 40px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#menu input
{
padding: 2px 7px 2px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background:#0099FF;/*Verde: #99FF99 Azul: #00AAFF*/
color: #FFFFFF;/* original #9FCF21 */
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/*border-right:1px solid #818181;*/
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/

}

/* Root Menu Hover Persistence */
ul#menu input:hover,ul#menu li:hover input,ul#menu li.iehover input
{
color: #009900;/*Original #003300*/
}

/* 2nd Menu */
ul#menu li:hover li input a, ul#menu li.iehover li input a
{
float: none;
border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover input:hover, ul#menu li:hover li:hover input, ul#menu li.iehover li a:hover, ul#menu li.iehover li.iehover input
{
background:#55A;/* Original #ddd */
color: #003300;/* Original #003300 */
}

/* 3rd Menu */
ul#menu li:hover li:hover li input, ul#menu li.iehover li.iehover li input
{
background: #55A;/* Original #EEE */
color: #003300;/* Original #666 */
}

/* 3rd Menu Hover Persistence */
ul#menu li:hover li:hover li a:hover input:hover, ul#menu li:hover li:hover li:hover input, ul#menu li.iehover li.iehover li a:hover,ul#menu li.iehover li.iehover li.iehover input a
{
background:#55A;/* Original #ddd */
color: #003300; /* Original #FFF */
}
/* 4th Menu */
ul#menu li:hover li:hover li:hover li input, ul#menu li.iehover li.iehover li.iehover li input a
{
background:#55A;/* Original #ddd */
color: #003300; /* Original #ddd */
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li input:hover, ul#menu li.iehover li.iehover li.iehover li a:hover
{
background: #55A;/* Original #CCC */
color: #003300; /* Original #FFF */
}

ul#menu ul ul, ul#menu ul ul ul
{
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul, ul#menu li:hover ul ul ul, ul#menu li.iehover ul ul, ul#menu li.iehover ul ul ul
{
display: none;
}

ul#menu li:hover ul, ul#menu ul li:hover ul, ul#menu ul ul li:hover ul, ul#menu li.iehover ul, ul#menu ul li.iehover ul, ul#menu ul ul li.iehover ul
{
display: block;
}

ul#menu .selected
{
color: #003300;
}
</code>
  #5 (permalink)  
Antiguo 30/05/2012, 12:34
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Menu Css

Menu en HTML
<form action="#">
<div id="menu" name="menu" >
<ul id="menu" name="menu" style="position:relative; z-index:10px;background: url(Menu.png) no-repeat;height:100PX" align="center">
<li align="Center"><input type="button" value="Nosotros">
<ul>
<li><input type="button" value="Mision" ></li>
<li><input type="button" value="Vision"></li>
<li><input type="button" value="Valores"></li>
</ul>
</li>
<li><input type="button" value="Proyectos">
<ul>
<li><input type="button" value=""></li>
<li><input type="button" value="Bao"></li>
<li><input type="button" value="ONGs"></li>
<li><input type="button" value="Proyecto"></li>
</ul>
</li>
<li><input type="button" value="Servicios">
<ul>
<li><input type="button" value="Da"></li>
<li><input type="button" value="Di"></li>
<li><input type="button" value="TI"></li>
<li><input type="button" value="Even"></li>
<li><input type="button" value="Ingenieria"></li>
<li><input type="button" value="Sustentabilidad"></li>
</ul>
</li>
<li><input type="button" value="Productos">
<ul>
<li><input type="button" value="Do"></li>
<li><input type="button" value="Diso"></li>
<li><input type="button" value="TI"></li>
<li><input type="button" value="Eve"></li>
<li><input type="button" value="Inge"></li>
<li><input type="button" value="Sustentabilidad"></li>
</ul>
</li>
<li><input type="button" value="Casos de Exito">
<ul>
<li><input type="button" value="Cafe"></li>
<li><input type="button" value="Aqui"></li>
<li><input type="button" value="Alla"></li>
<li><input type="button" value="Aquel"></li>
</ul>
</li>
<li><input type="button" value="Noticias y\n Eventos"></li>
<li><input type="button" value="Participa!!!"></li>
</ul>
</div>
</form>
  #6 (permalink)  
Antiguo 30/05/2012, 12:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Menu Css

Cita:
Iniciado por pelotxo Ver Mensaje
Gracias por contestar, pero no he pillado ni jota, has usado un lenguaje demasiado tecnico para mi, si me lo podrias explicar como si fuera a un niño.
Muchas gracias.
Bien. Siendo así, vamos a empezar por lo básico, que sería el equivalente a comenzar a gatear:
www.librosweb.es
Lo básico de Css: Sintaxis y Glosario de términos.

@Simon_Echecopar
¿Se equivocó de tema?
Si es así pida que algún admin elimine su respuesta
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 30/05/2012, 13:07
 
Fecha de Ingreso: abril-2010
Ubicación: Gipuzkoa
Mensajes: 7
Antigüedad: 14 años
Puntos: 0
Respuesta: Menu Css

Cita:
Iniciado por kseso? Ver Mensaje
[URL="http://www.sidar.org/recur/desdi/traduc/es/css/text.html#propdef-text-decoration"]text-decoration[/URL]
Y el valor por defecto para los enlaces es underline
Yo lo que quiero hacer es quitar la rayita que sale, que no se porque sale, yo no creo habersela puesto.

Cita:
Iniciado por kseso? Ver Mensaje
[URL="http://www.sidar.org/recur/desdi/traduc/es/css/text.html#propdef-text-decoration"]text-decoration[/URL]
Sobre la posición:
A falta de los códigos (html y css) del resto del menú y sus ancestros para ver la estructura de la página y otras cuestiones, lo mejor es que se informe sobre la [URL="http://ksesocss.blogspot.com/2012/04/repaso-lo-basico-y-lo-mas-nuevo.html"]propiedad position[/URL]

Eso y el lugar donde aparece en el flujo del documento html le ayudarán a colocarlo.
Creo entender que te refieres a que si hay algo por encima en el html, eso hara que el menu se vea abajo.
  #8 (permalink)  
Antiguo 02/06/2012, 15:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Menu Css

Lo mínimo que se espera de quien participa en este foro es que sepa pinchar un enlace y leer.
No digo comprender del todo y a la primera.
Sólo ir y leer.

Dudo que lo haya hecho. Pinchar y leer.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 07/06/2012, 09:45
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Menu Css

Lo que envie es un ejemplo de menu desplegable en CSS, pruebalo a ver que tanto te sirve.

Etiquetas: hover, fondo
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 1 personas




La zona horaria es GMT -6. Ahora son las 13:17.