La fabrica de software: HTML

Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

miércoles, 15 de marzo de 2017

Generador de Menus de Bootstrap

https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0

lunes, 28 de marzo de 2016

Juntar arreglo con form para enviarlo como un arreglo de controles dinamicos html jquery

//arreglo es una variable de tipo array
var arreglo= ["2368", "1818", "2365"];
           var model = $("#formulario").serializeArray();

                    $.map(arreglo, function (val, i) {
                        return model.push({ "name": "nombrePropiedadoControl[" + i + "]", "value": val });
                    });

viernes, 27 de febrero de 2015

Link a tuto para crear webfonts

http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/

lunes, 7 de abril de 2014

La etiqueta button que realiza submit por default

Hace unos días realice unos cambios de unos botones creados con la etiqueta input, estos botones realizaban eventos dentro de la página, los cambie por la etiqueta button para poder poner algunas imagenes dentro de ellos, sin embaro tenían un extraño comportamiento, envíaban mi formulario, y pues yo no lo quería enviar, así que descubrí que la etiqueta button por default dentro de un formulario envía el formulario, como solucione que no envíara el formulario, simple poniendole como atributo que sea de tipo botón y no submit,

jueves, 9 de enero de 2014

Recursos para bootstrap

http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

martes, 31 de diciembre de 2013

Excelente tutorial de bootstrap

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
Muchas gracias a toda la gente que vistia mi blog ya sea porque lo tiene agregado o da con el buscando alguna solución, mil gracias, bendiciones para todos, y este es el último post del 2013 por lo que les deseo un FELIZ AÑO NUEVO, deseandoles que Dios llene de bendiciones sus vidas y que todos sus sueños se hagan realidad.

miércoles, 19 de junio de 2013

Iexplorer 8 se traba el scroll, para arriba para abajo y el cpu se va al 100%

La raiz del problema, es el internet explorer, si puedes hacer que tus usuarios no lo usen es mejor, yo solucione el problema con un pequeño parche, dentro de la etiqueta body le agregue un valor con la etiqueta style al heigth, pero el credito no es mio es del compa oscar de oax.

jueves, 11 de abril de 2013

Custom css list images

<ul style="list-style-image: url(customImage.gif)">
<li>primero</li> 
<li>segundo</li>
</ul>

Alinear un span dentro de un div

<div class="titulo">
  <span class="derecha">Titulo</span>
  <span class="izquierda">Boton izquierda</span>
</div>



Y en el css


.derecha { float:right }
.izquierda { float:left }

miércoles, 20 de marzo de 2013

Recursos para menus con jquery

2 links para crear menus muy pero muy modernos. Recurso 1
Recurso 2

lunes, 12 de noviembre de 2012

Ajusta el contenido de una tabla

Trabajando con tablas me paso que después de agregar varios spans dentro de una columna, no me estaba respetando el tamaño de la tabla, asi que agregue estos estilos.
Estilo de la tabla
table-layout: fixed;
Estilo de la columna
word-wrap:break-word

martes, 10 de julio de 2012

Sobreescribir el valor de un style de un elemento css

Veamos un ejemplo

<style>
a{
 background-color: yellow;
}
</style>

<body>
<a style="background-color: red">a</a>
</body>

Ahora si le agregamos la etiqueta important

<style>
a{
 background-color: yellow !important;
}
</style>

<body>
<a style="background-color: red">a</a>
</body>

En el primer ejemplo el elemento a es de color rojo, cuando agregamos important el color es sobreescrito por color amarillo.

martes, 10 de enero de 2012

Los mejores botones css

Dejo este link css buton para quien necesite crear botones web.

viernes, 11 de noviembre de 2011

Centrar tabla dentro de un div

Tenemeos el siguiente codigo


<div style="position:absolute;text-align:center;width:100%;">

HOLA MUNDO

</div>

Hasta aquí no hay problema todo va bien el texto se muestra centrado

Si lo metemos en una tabla


<div style="position:absolute;text-align:center;width:100%;">
<table width=200><tr><td>HOLA MUNDO
</td></tr></table>

</div>

Se distorciona estoes mas q nada por los margenes de la tabla Solucion


<div style="position:absolute;text-align:center;width:100%;">

<table width=200 style="margin-left: auto;margin-right: auto;"><tr><td>HOLA MUNDO</td></tr></table>

</div>

domingo, 17 de abril de 2011

El elemento hr con color no se despliega del tamaño adecuado IExplorer

Bueno este error es más del navegador ya que no dedspliega el tamaño adecuado al agregarle el atributo size, una solución provada en firefox 4 e iexplorer 8 es el siguiente estilo.

hr{
    background-color:#c9d7f1;
    border:thin;/*el borde puede ser en pixeles*/
    }

Eliminar de una imagen el borde con puntos dotted

Bueno me he dado cuenta que generalmente esto pasa en firefox cuando tienes una imagen dentro de un href y lo visitas y luego vuelves a regresar a la página esta aparece punteada. bueno la solución sería poner en la hoja de estilo algo así.

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

recordando las pseudoclases a:link,a:active,a:visited,a:hover

martes, 26 de octubre de 2010

Bloquear una pantalla con css(Tipo Modal)

Algunas veces es necesario hacer un bloqueo de una pantalla en forma modal, este código lo he probado en Firefox 3 e Internet Explorer 6,7,8 y va dentro de las etiquetas style o si lo prefieren en una hoja de estilo externa.
   #Bloquear{
      background:#000000;
      width: 100%;
      height: 100%;
      filter:alpha(opacity=50);
      opacity:0.5;
       margin: 0px;
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      z-index:1000;
      cursor: wait;
      margin: 0px;
      padding: 0px;
      /* display: none;*/
    }

Tomando en cuenta que debería de existir un div así <div id="Bloquear"></div>

Algunas veces el bloqueo de la pantalla no lo hace completamente en Internet explorer 8 por lo que habría que agregarle las siguiente línea a la hoja de estilo en cascada.

html
{
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
}

sábado, 2 de octubre de 2010

Creando un menu flotante con css, la propiedad fixed y la propiedad z-index

Hace unos días a un compañero le surguió una pequeña duda de como hacer que un grupo de elementos flotará,
en alguna ocasión ya había yo hecho algo así sin embargo mi mala memoria no me ayudaba, ya que cuando
dejas de usar las cosas por mucho tiempo y no me refiero a mi memoria jajaja, pues simplemente se te olvida
aun asi recuerdo que lo había hecho con hojas de estilo en cascada y efectivamente con solo colocar esta
propiedad al estilo de un objeto este simulará que flota position:fixed pero ¿porque? , los bloques en posición fixed no se mueven cuando el documento es desplazado,ahora muy bien ya flota,pero
puede ocurrir que los otros objetos se superpongan, lo que támbien es conocido como capas, bueno pues
para eso sirve la propiedad z-index para definir que objetos pueden ir enfrente de otros objetos, es decir el
orden de los elementos en el eje z, esta propiedad solo funciona cuando se indica el posicionamiento absolute
y fixed para mayor información sobre los tipos de posicionamiento aquí dejo una liga posicionamiento con css y para la propiedad z-index y pues como era de esperar dejo el código de ejemplo.


<head>
<title>http://lafabricadesoftware.blogspot.com</title>
<style>

.flotante 
{position:fixed;
 z-index:100;
  /*Aqui tenemos arriba las dos principales propiedades el z-index
  100 indica que el objeto se va a sobreponer encima de todos los objetos*/ 
 width:100px;
 background:yellow;
 border:1px solid green;
}
.capa
{
 background-color:blue;
 background:pink;
 border:1px solid green;
}
</style>
</head>
<body>
<div class="flotante">
Este es el ejemplo de un menu que flota como ves es mas sencillo de lo que te imaginas
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="capa"><h3>Seccion de en medio</h3></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="capa"><h3>Ultima seccion de la pagina</h3></div>
</body>

jueves, 19 de agosto de 2010

Estilo a un foco con css

Con este ejemplito en css, muestro como darle formato a un foco el código es el siguiente:
utilizando la pseudoclase focus.

//http://lafabricadesoftware.blogspot.com/

form ul input.focus, form ul textarea.focus, form ul input:focus, form ul textarea:focus {

}

viernes, 6 de agosto de 2010

El elemento fieldset (Frames en winforms pero en html)

Bueno pues por lo que me he dado cuenta casi nadie conoce esta etiqueta, no se si les ha pasado pero cuando trabaja uno en vb6, o winforms de vb.net hay un elemto que te crea marcos llamado frames, bueno pues en html se puede hacer exactamente lo mismo casi nadie conoce esta etiqueta pero bueno aquí les dejo un ejemplo:



<form> 

<fieldset> 

<legend>Personalia:</legend> 

Name: <input size="30" type="text"> 

Email: <input size="30" type="text"> 

Date of birth: <input size="10" type="text"> 

</fieldset> 

</form>

Lo que da como resultado