Codigos de programación

Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

Utilizar diferentes colores en un select con CSS

En ocasiones cuando estamos diseñando una página web y queremos dar la opción de que cambie "X" elemento de nuestro diseño podemos poner un select común que solo contenga el nobre del color, pero porque no hacerlo dandole fondo a cada elemento del select?, esto es muy sencillo utilizando Css.

Codigo CSS:

body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Para definir las clases se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}


Codigo HTML:
<form method="post" action="">
<label for="color">Selecciona tu color favorito:</label>
<p>
<select name="color" id="color">
<option value="">Selecciona Uno</option>
<option value="amarillo" class="amarillo">amarillo</option>
<option value="rojo" class="rojo">rojo</option>
<option value="verde" class="verde">verde</option>
<option value="azul" class="azul">azul</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="submit"
value="Enviar!" />
</p>
</form>

Centrar una pagina con CSS

En ocaciones cuando estamos diseñando una web y queremos centrarla de forma sencilla, la mejor opción es utilizar Css, por la sencilles con que se hace y la rapides, y para esto aquí les dejo el codigo Html y el CssCódigo HTML:
Codigo HTML:

<p id="content">
<p id="cabecera">
<h2>Esto es una prueba</h2>
<p id="contenido"><center>Resultado Final</center></p>

Codigo CSS:
<style type="text/css"> body { margin:0; padding:0; text-align:center; }
#content { text-align:left; margin:auto; background-color:#ff0; width:800px; height:800px; }
#cabecera { width: 800px; height:100px; background-color:blue; }
#menu { width:150px; height:650px; float:left; background-color:#888; }
#contenido { width:650px; height:650px; float:left; background-color:#ccc; }
#pie { clear:both; width:800px; height:50px; background-color:#0f0; }
</style>