Ir al contenido principal

Apuntes CSS

Imagen
De
Apuntes de CSS


- Los valores más usados de la propiedad display son block e inline.
- A los elementos inline no se les puede dar un largo y ancho (excepto en IE), tampoco dan un salto de línea.
- A los elementos block sí se les puede dar un largo y ancho .
-Los elementos block sí dan un salto de línea antes y despues.
-Son elementos  block : address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
-Y son elementos inline : a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.
- Para cambiar a un elemento de inline a block o viceversa sólo hay que darle a la propiedad display el valor block o inline como se quiera.


Ejemplo:

<label>Nombre  </label><input type="text" name="nombre"><br>
<label>Edad </label><input type="text" name="apellido">

Esto en el navegador :





podríamos darle un valor al largo(width) del elemento label pero el problema es que el elemento label es inline, entonces para eso hay que darle el valor de block a la propiedad display del elemento label para poder darle un width.


Algo así:


<style>
    label{
        display :block;   /*  convierte en elemento block al elemento label*/
        width   :80px;   /*  dándole un largo de 80px */
        float    :left;     /* enviando al elemento hacia la izquierda y quitándose el salto de línea */
    }
</style>


quedaría así :


<head>
<style>
   label{
        display :block;   /*  convierte en elemento block al elemento label */
        width   :80px;   /*  dándole un largo de 80px */
        float    :left;     /* enviando al elemento hacia la izquierda y quitándose el salto de línea */
    }
</style>
</head>
<body>
<label>Nombre </label><input type="text" name="nombre"><br>
<label>Edad </label><input type="text" name="apellido">
</body>

Esto en el navegador :




Comentarios

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

De
En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl
109 comentarios
Read more »

La propiedad Disabled en Javascript

De
Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event
2 comentarios
Read more »

Validar campo de texto con javascript

De
Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos
8 comentarios
Read more »