Foros del Web » Creando para Internet » CSS »

Aplicar JS en CSS

Estas en el tema de Aplicar JS en CSS en el foro de CSS en Foros del Web. Hola, estoy empezando con CSS y aun me sobrepasa todas las cosas que se pueden hacer con el...... He hecho un menú con un programa ...
  #1 (permalink)  
Antiguo 02/07/2009, 10:59
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Aplicar JS en CSS

Hola, estoy empezando con CSS y aun me sobrepasa todas las cosas que se pueden hacer con el......

He hecho un menú con un programa (sothink dhtml menú) el cual me da un codigo en javascript y tres archivos JS mas todas la imagenes necesarias:

mi css es este;


Código:
<style type="text/css">
.fondoweb {
	background-image: url('../fondos/fondo11.jpg');
}
.bannertaekwondo {
	background-image: url('../banners/banner%20taekwondo.jpg');
	border-spacing: 0px;
}
.cabezadelcuerpo {
	background-image: url('../cabezadelcuerpo.png');
	font-family: Calibri;
	font-size: 20px;
	color: #EF6B4D;
	text-decoration: underline;
}
.cabezaeventos {
	background-image: url('../cabezaeventos.png');
	font-family: Calibri;
	font-size: 18px;
	color: #EF6B4D;
	text-decoration: underline;
	text-align: center;
}
y tengo este codigo;

Código:
<script type="text/javascript">
<!--
stm_bm(["menu7aae",900,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,1,"default","hand","",1,25],this);
stm_bp("p0",[1,4,0,0,0,2,0,0,100,"progid:DXImageTransform.Microsoft.RandomDissolve(,enabled=0,Duration=0.20)",12,"",-2,90,0,0,"#D8D8D8","transparent","",3,0,0,"#CCCCCC","",-1,-1,0,"","surround21_t.gif",3,"",-1,-1,0,"","surround21_r.gif",3,"",-1,-1,0,"","surround21_b.gif",3,"",-1,-1,0,"","surround21_l.gif",3,"surround21_tl.gif","surround21_tr.gif","surround21_br.gif","surround21_bl.gif",22,22,22,22,22,22,22,22]);
stm_ai("p0i0",[0,"DHTMLMenu Product News","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#d88843",0,"#c0cbab",0,"","",3,3,0,0,"#5AA2C1","#000000","#FFFFFF","#FFFFFF","bold 8pt Arial","bold 8pt Arial",0,0,"","","","",0,0,0],163,30);
stm_ai("p0i1",[6,1,"#CCCCCC","",160,1,0]);
stm_aix("p0i2","p0i0",[0,"Four versions for \r\ndifferent languages","","",-1,-1,0,"","_self","","","","",0,0,0,"","",-1,-1,0,1,1,"#d88843",0,"#c0cbab",0,"","",3,3,0,0,"#5AA2C1","#000000","#FFFFFF","#FFFFFF","8pt Arial","8pt Arial"],163,0);
stm_bp("p1",[1,2,5,0,0,2,0,0,79,"stEffect(\"slip\")",-2,"stEffect(\"slip\")",-2,89,0,0,"#D8D8D8","transparent","",3,1,2,"#a2ad8c"]);
stm_aix("p1i0","p0i2",[0,"Current Version: \r\nSothink DHTMLMenu 6.5","","",-1,-1,0,"#","_self","","","","",0,0,0,"","",0,0,0,1,1,"#c0cbab",0,"#d88843",0,"060428line.gif"],193,0);
stm_aix("p1i1","p0i1",[6,1,"#CCCCCC","file:///D|/Program%20Files/SourceTec/Sothink%20DHTML%20Menu%209/",193]);
stm_aix("p1i2","p1i0",[0,"English Version"],193,0);
stm_aix("p1i3","p1i1",[]);
stm_aix("p1i4","p1i0",[0,"French Version(5.2)"],193,0);
stm_aix("p1i5","p1i1",[]);
stm_aix("p1i6","p1i0",[0,"Simplified/Traditional\r\nChinese Version "],193,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Add new samples for V6.x"],163,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"New Arrivals "],193,0);
stm_aix("p2i1","p1i1",[]);
stm_aix("p2i2","p1i0",[0,"General Samples "],193,0);
stm_aix("p2i3","p1i1",[]);
stm_aix("p2i4","p1i0",[0,"Functional Samples "],193,0);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Know limitations of \r\nunregistered version "],163,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[],193,0);
stm_aix("p3i1","p1i1",[]);
stm_aix("p3i2","p1i2",[],193,0);
stm_aix("p3i3","p1i1",[]);
stm_aix("p3i4","p1i4",[],193,0);
stm_aix("p3i5","p1i1",[]);
stm_aix("p3i6","p1i6",[],193,0);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Unofficial Sothink DHTMLMenu\r\n Resource Site(thanks to Bill Pitt)","","",-1,-1,0,"#","_self","","","","",0,0,0,"","",0,0,0,1,1,"#d88843",0,"#c0cbab",0,"","",3,3,0,0,"#5AA2C1 #000000 #000000","#CCCC00"],163,0);
stm_ep();
stm_em();
//-->
</script>
y com ya he dicho varios archivos JScript, me gustarias saber si se puede aplicar el menú al css y de que manera.

Muchas gracias.
  #2 (permalink)  
Antiguo 02/07/2009, 15:09
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 12 años, 7 meses
Puntos: 2
Respuesta: Aplicar JS en CSS

El <script></script> Debes colocarlo antes de </head>
__________________
Twitter: ipad
  #3 (permalink)  
Antiguo 02/07/2009, 15:46
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

y nada mas, se mas concreto
  #4 (permalink)  
Antiguo 02/07/2009, 16:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Aplicar JS en CSS

ahh!!!! cuanto codigo... no te etendi muy bien... quieres un menu solo con css?... es facil pero dinos exactamente que quieres para poder ayudarte que con el codigo que pegas no veo que hace... o que necesitas? perdona no entendi jeje chao...
  #5 (permalink)  
Antiguo 02/07/2009, 16:41
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 12 años, 7 meses
Puntos: 2
Respuesta: Aplicar JS en CSS

Ok disculpa jeje, no te recomiendo hacer menus con generadores como Sothink, pero dejame aclararte algo. El CSS que tienes por lo que veo no pertenece a un menu sino al contenedor, banner y header. Los menus por lo general estan conformados por 'Unordered List' o 'Ordered List' ejemplo:

Código:
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Inicio</a></li>
<li><a href="#">Inicio</a></li>
</ul>
Busca esa parte del markup y la posteas.

Ahora hablemos del Javascript, fijate como nos complica el generador con un JS que no se entiende. No veo la 'clase' del menu por ningun lado. Lo que yo te intentaba decir con mi primer post fue:

Código:
<!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>Titulo</title>

<!-- Colocar aqui todo el <Script> -->

</head>

<body>
</body>
</html>

Tendria que leer bien la documentacion del Sothink para ver como funciona... No te compliques con esto hacer un menu es fácil ;) nosotros te podemos ayudar.


Saludos
__________________
Twitter: ipad
  #6 (permalink)  
Antiguo 03/07/2009, 13:21
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

solo quiero poner el codigo javascript en el css
Código:
<style type="text/css">
.fondoweb {
	background-image: url('../fondos/fondo11.jpg');
}
.bannertaekwondo {
	background-image: url('../banners/banner%20taekwondo.jpg');
	border-spacing: 0px;
}
.cabezadelcuerpo {
	background-image: url('../cabezadelcuerpo.png');
	font-family: Calibri;
	font-size: 20px;
	color: #EF6B4D;
	text-decoration: underline;
        POR AQUI, EN CUALQUIER PARTE DEL CSS 
}
.cabezaeventos {
	background-image: url('../cabezaeventos.png');
	font-family: Calibri;
	font-size: 18px;
	color: #EF6B4D;
	text-decoration: underline;
	text-align: center;
}
he especificado que el codigo va con tres archivos JScript por que no se si hacen falta o no para aplicar el menu al css ya esta no tiene mas

Última edición por taoshi; 03/07/2009 a las 13:34
  #7 (permalink)  
Antiguo 03/07/2009, 13:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Aplicar JS en CSS

y por que lo quieres llamar en el css? hasta donde se no es correcto... podrias llamarlo como en el "body{}" pero no es valido.... te recomiendo ponerlo como te dice ivor
  #8 (permalink)  
Antiguo 03/07/2009, 13:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Aplicar JS en CSS

Y antes que liarte haciendo menús en ajvascript que siempre son mas liosos, no has valroado esta posibilidad?
__________________
No diseñes usando tablas.
  #9 (permalink)  
Antiguo 03/07/2009, 16:04
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 12 años, 7 meses
Puntos: 2
Respuesta: Aplicar JS en CSS

@Taoshi No puedes usar JavaScript en un .CSS jamás jamás podrás introducir JS en un archivo CSS,el JS se llama desde el .html .php, etc con una línea de código. Por ejemplo este menú usa la librería Mootools y si ves su código fuente te darás cuenta de como llama el javascript y como usa el CSS.

Código:
<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all"> 
 <link href="imageMenu.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="../_common/js/mootools.js"></script> 
<script type="text/javascript" src="imageMenu.js"></script> 
</head>
Yo te puedo ayudar, sin embargo te aconsejo documentarte mejor... saludos
__________________
Twitter: ipad
  #10 (permalink)  
Antiguo 12/07/2009, 14:51
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

Hola de nuevo a todos siento no haber respondido ni nada pero es por que os había hecho caso y al final me he tenido que poner a hacer el propio menú en css y no me a quedado nada mal pero aun así necesito de vuestra ayuda una vez mas.

tengo dos dudas

1ª. ¿cómo puedo hacer para que el submenú que sale de "otras actividades" sea en horizontal y no en vertical?

2ª He caído en la conclusión de que si alguna vez necesitase cambiar algún contenido del menú tendría que hacerlo hoja por hoja y no es eso lo que quiero ¿cómo puedo hacerlo sin tener que meterlo en un marco?

estilo css del menú:
Código:
<style type="text/css">
#menu { font-family:Calibri; height:34px; position:relative; background: #5BB0DB; -moz-border-radius:10px; -webkit-border-radius:10px; margin: 10px 0;}
#nav { margin:0px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px; position:relative; padding:1px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#3b4d83; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:wait; margin:0px 10px; font-weight:bold; }
</style>
menú css:
Código:
<div id="menu">
            <ul id="nav" style="left: 3px; top: 5px; height: 51px">
 
            <li style="left: 0px; top: 0px; width: 57px"><span>Inicio</span></li>
            <li style="left: -8px; top: 0px; width: 81px"><span>Situación</span></li>
            <li style="left: -15px; top: 0px; width: 108px"><span>Instalaciones</span></li>
            <li style="left: -20px; top: 0px; width: 142px"><span>Horarios y Cuotas</span></li>
            <li style="left: -28px; top: 0px; width: 96px"><span>El Maestro</span></li>
            <li style="left: -36px; top: 0px; width: 105px"><span>Musculación</span></li>
            <li style="left: -44px; top: 0px; width: 97px"><span>Taekwondo</span></li>
            <li style="left: -52px; top: -1px; width: 70px"><span>Aeróbic</span></li>
            <li style="left: -60px; top: 0px; width: 168px"><span>Jeet Kune Do Murcia</span></li>
            <li style="left: 876px; top: -20px; width: 138px"><span>Otras actividades</span>
                <ul>
                    <li><a href="#">Danza del Vientre</a></li>
                    <li><a href="#">Pilates</a></li>
                    <li><a href="#">Step</a></li>
               </ul>
            </li>            
    </div>

Gracias
  #11 (permalink)  
Antiguo 12/07/2009, 16:23
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Aplicar JS en CSS

para lo de cambiar hoja por hoja, miraría los includes de php
__________________
No diseñes usando tablas.

Última edición por hades87; 12/07/2009 a las 16:36
  #12 (permalink)  
Antiguo 12/07/2009, 16:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Aplicar JS en CSS

Hola Taoshi
Creo que ese menú tiene unas cuantas carencias. Etiquetas como <span> lo que debe ser <a> para que funcione como menú. Faltaría por definir algunas propiedades y otras cambiarlas.
Aparte está el hecho de que usas propiedades como "-moz-..." que son exclusivas de FF (y por lo tanto código no estándar)
Tampoco será funcional con ie6.

Te sugiero que pases por las faq's de css, donde Mikmoro tiene publicados algunos menús que podrás adaptar a tus necesidades.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 12/07/2009, 17:29
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

hades87 en ese tema soy nuevo si me recomendaras algunos links te lo agradecería.

kseso? me gusta el resultado final de mi menú las etiquetas <a> </a> ya se las pondré por que a la hora de publicar el código el foro no me lo permitía por ser spam, mirare los faq's pero si me recomiendas algunos te lo agradecería.

gracias
  #14 (permalink)  
Antiguo 12/07/2009, 17:44
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Aplicar JS en CSS

Para el tema de include, será mejor que mires en Crsitalab, que lo explican muy bien.

Para el tema de los menús, te recomiendo que te mires el link que te dejé en el post #8, donde te explica como hacer menús.
__________________
No diseñes usando tablas.
  #15 (permalink)  
Antiguo 12/07/2009, 17:47
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

ok, muchas gracias mañana lo miraré todo con mas detenimiento
  #16 (permalink)  
Antiguo 13/07/2009, 10:35
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Aplicar JS en CSS

Bueno hades87 me funciona a la perfección el “include” el tema de del submenú en horizontal era porque ya me veía metiendo el menú en marco y por no hacerlo muy grande quería poner el submenú en horizontal para que ocupase menos.

El único inconveniente es que ahora tendré que poner con la extensión .php a todas las hojas de la web pero me da igual mientras funcione.

Gracias.
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




La zona horaria es GMT -6. Ahora son las 02:00.