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

miércoles, 29 de julio de 2015

Formularios

Una de las partes más importante de una página web, son los formulario de contacto, que nos permite obtener datos de las personas que visitan la página para usos diversos.

En esta entrada muestro un ejemplo de formulario en HTML y CSS,  y está realizado en una tabla.
Espero que les guste.


El formulario tiene que quedar de la siguiente forma.


 Código HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario Datos Personales</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div>
<h1>DATOS PERSONALES</h1>
<table>
<form action="mailto:pepe@pepe.es" method="post" enctype="text/plain" name="datospersonales">
<tr>
<td>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos">
</td>
<td>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">
</td>
<td>
<label for="dni">DNI:</label>
<input type="text" name="dni" id="dni"  maxlength="10">
</td>
</tr>
<tr>
<td>
<label for="nacido">Nacido en:</label>
<input type="text" name="nacido" id="nacido">
</td>
<td>
<label for="provnacimiento">Provincia:</label>
<select id="provnacimiento" name="provnacimiento">
<option value="alava">Álava</option>
<option value="albacete">Albacete</option>
<option value="alicante">Alicante</option>
<option value="almeria">Almería</option>
<option value="asturias">Asturias</option>
<option value="avila">Ávila</option>
<option value="badajoz">Badajoz</option>
<option value="barcelona">Barcelona</option>
<option value="burgos">Burgos</option>
<option value="caceres">Cáceres</option>
<option value="cadiz">Cádiz</option>
<option value="cantabria">Cantabria</option>
<option value="castellon">Castellón</option>
<option value="ciudadreal">Ciudad Real</option>
<option value="cordoba">Córdoba</option>
<option value="cuenca">Cuenca</option>
<option value="gerona">Gerona</option>
<option value="granada">Granada</option>
<option value="guadalajara">Guadalajara</option>
<option value="guipuzcoa">Guipúzcoa</option>
<option value="huelva">Huelva</option>
<option value="huesca">Huesca</option>
<option value="islasbareales">Islas Bareales</option>
<option value="jaen">Jaén</option>
<option value="lacoruna">La Coruña</option>
<option value="larioja">La Rioja</option>
<option value="laspalmas">Las Palmas</option>
<option value="leon">León</option>
<option value="lerida">Lérida</option>
<option value="lugo">Lugo</option>
<option value="madrid">Madrid</option>
<option value="malaga">Málaga</option>
<option value="murcia">Murcia</option>
<option value="navarra">Navarra</option>
<option value="orense">Orense</option>
<option value="palencia">Palencia</option>
<option value="pontevedra">Pontevedra</option>
<option value="salamanca">Salamanca</option>
<option value="segovia">Segovia</option>
<option value="sevilla">Sevilla</option>
<option value="soria">Soria</option>
<option value="tarragona">Tarragona</option>
<option value="tenerife">Tenerife</option>
<option value="teruel">Teruel</option>
<option value="toledo">Toledo</option>
<option value="valencia">Valencia</option>
<option value="valladolid">Valladolid</option>
<option value="vizcaya">Vizcaya</option>
<option value="zamora">Zamora</option>
<option value="zaragoza">Zaragoza</option>
</select>
</td>
<td>
<label for="nacimiento">Fecha de nacimiento (dd/mm/aaaa):</label>
<input type="text" name="nacimiento" id="nacimiento"  maxlength="10">
</td>
</tr>
<tr>
<td colspan="2">
<label for="domicilio">Domicilio:</label>
<select id="domicilio" name="domicilio">
<option value="avenida">Avenida</option>
<option value="calle">Calle</option>
<option value="camino">Camino</option>
<option value="plaza">Plaza</option>
</select>


<input type="text" name="domicilio1" id="domicilio1">
</td>

<td>
<label for="cp">Codigo Postal:</label>
<input type="text" name="cp" id="cp"  maxlength="5">
</td>

</tr>

<tr>
<td>
<label for="localidad">Localidad:</label>
<input type="text" name="localidad" id="localidad">
</td>
<td>
<label for="provdomicilio">Provincia:</label>
<select id="provdomicilio" name="provdomicilio">
<option value="alava">Álava</option>
<option value="albacete">Albacete</option>
<option value="alicante">Alicante</option>
<option value="almeria">Almería</option>
<option value="asturias">Asturias</option>
<option value="avila">Ávila</option>
<option value="badajoz">Badajoz</option>
<option value="barcelona">Barcelona</option>
<option value="burgos">Burgos</option>
<option value="caceres">Cáceres</option>
<option value="cadiz">Cádiz</option>
<option value="cantabria">Cantabria</option>
<option value="castellon">Castellón</option>
<option value="ciudadreal">Ciudad Real</option>
<option value="cordoba">Córdoba</option>
<option value="cuenca">Cuenca</option>
<option value="gerona">Gerona</option>
<option value="granada">Granada</option>
<option value="guadalajara">Guadalajara</option>
<option value="guipuzcoa">Guipúzcoa</option>
<option value="huelva">Huelva</option>
<option value="huesca">Huesca</option>
<option value="islasbareales">Islas Bareales</option>
<option value="jaen">Jaén</option>
<option value="lacoruna">La Coruña</option>
<option value="larioja">La Rioja</option>
<option value="laspalmas">Las Palmas</option>
<option value="leon">León</option>
<option value="lerida">Lérida</option>
<option value="lugo">Lugo</option>
<option value="madrid">Madrid</option>
<option value="malaga">Málaga</option>
<option value="murcia">Murcia</option>
<option value="navarra">Navarra</option>
<option value="orense">Orense</option>
<option value="palencia">Palencia</option>
<option value="pontevedra">Pontevedra</option>
<option value="salamanca">Salamanca</option>
<option value="segovia">Segovia</option>
<option value="sevilla">Sevilla</option>
<option value="soria">Soria</option>
<option value="tarragona">Tarragona</option>
<option value="tenerife">Tenerife</option>
<option value="teruel">Teruel</option>
<option value="toledo">Toledo</option>
<option value="valencia">Valencia</option>
<option value="valladolid">Valladolid</option>
<option value="vizcaya">Vizcaya</option>
<option value="zamora">Zamora</option>
<option value="zaragoza">Zaragoza</option>
</select>
</td>
<td>
<label for="telf">Teléfono:</label>
<input type="text" name="telf" id="telf"  maxlength="13">
</td>
</tr>
<tr>
<td colspan="3">

<input type="submit" name="enviar" id="enviar" value="Enviar">
<input type="reset" name="borrar" id="borrar" value="Borrar todo">
</td>
</tr>
</form>
</table>
</div>

</body>
</html>

Código CSS.

@charset "utf-8";
/* CSS Document */
label { display: block;}
table { background-color: #E7E7E7;
border: 1px solid #92938D;
width: 700px;}
input { border: 2px solid #8CA8C0;}
select { border: 2px solid #8CA8C0;}

div { margin:auto;
width: 710px;
padding-left: 10px;
padding-bottom: 10px;
background-color: #F6F6F6;}
input[name="apellidos"] { width: 300px;}
input[name="dni"] { width: 90px;}
input[name="nombre"] { width: 110px;}
input[name="nacimiento"] { width: 90px;}
input[name="domicilio1"] { width: 365px;}
input[name="cp"] { width: 55px;}
input[name="telf"] { width: 95px;}
input[name="enviar"] { float:right;}
input[name="borrar"] { float:right;
margin-right: 5px;}
h1 { background-color: #E2E2E4;
  margin-left: -10px;
    padding-left: 10px;}

sábado, 18 de julio de 2015

HTML / CSS ejemplo pagina 6

Otra forma de hacer un menú para nuestra página es mapeando una imagen, de esta forma podemos marcar enlaces sobre la imagen.

Para ello busque una imagen que tuviera marcadas las Comunidades Autonómicas.



Esta imagen la inserte entre una <p> y cree una clase que llame centro para poder colocarla en la parte de la página que quería, todo ello esta dentro de un div que se llama mapa.
Realizado esto empecé a mapear la imagen creando sectores de cada comunidad autónoma.

Y este es el resultado.


Código HTML

<div id="mapa">
<p class="centro"><img src="imagenes/EspañaPolítica2.jpg" usemap="#Map">
  <map name="Map">
    <area shape="poly" coords="542,259,511,283,507,290,521,289,512,294,517,296,518,307,511,300,501,302,492,306,482,310,473,304,450,320,437,333,436,352,445,346,451,357,447,361,454,367,457,384,471,378,470,416,466,431,467,458,487,443,495,438,518,430,527,442,518,453,523,461,534,466,543,454,544,461,557,457,564,459,566,463,570,460,577,459,578,464,583,462,594,455,598,444,606,450,610,449,608,438,619,423,626,416,621,404,623,397,614,391,605,392,608,370,617,361,620,349,613,339,613,331,620,327,619,322,612,324,605,314,605,307,597,301,598,296,600,294,607,281,588,281,583,271,571,265,564,268,558,259,545,268,541,262" href="#Galicia" alt="Galicia">
    <area shape="poly" coords="607,281,598,296,606,307,604,317,614,324,618,323,620,326,612,338,619,342,620,350,625,351,631,347,640,350,647,345,645,342,650,341,653,335,664,338,671,336,678,334,684,335,693,343,700,342,707,336,719,337,730,333,730,328,737,330,750,329,755,322,767,314,772,322,780,320,780,313,787,310,792,310,796,310,793,305,796,298,736,284,706,282,697,273,676,282,667,279,608,280" href="#Asturias" alt="Asturias">
    <area shape="poly" coords="797,299,792,302,797,309,789,309,780,313,779,317,773,321,773,329,780,338,799,335,808,343,817,344,819,357,829,362,831,360,835,364,845,362,844,354,845,347,838,349,835,344,846,335,858,322,876,325,875,316,886,307,892,309,896,305,892,298,877,298,874,292,866,286,856,291,849,290,813,299,795,297" href="#Cantabria" alt="Cantabria">
    <area shape="poly" coords="895,302,897,307,893,310,887,307,874,315,876,323,889,321,900,321,896,326,899,338,905,340,912,346,899,350,897,346,893,346,887,352,893,356,897,355,906,349,898,357,899,364,908,366,917,370,921,385,925,381,931,382,934,392,942,393,953,392,953,388,946,383,952,378,961,377,960,370,966,361,965,351,967,347,972,346,979,342,982,333,990,326,989,316,997,315,1000,309,1002,309,998,299,973,310,957,309,942,300,933,298,929,294,915,294,908,302,909,308,902,303" href="#Pais_Vasco" alt="Pais_Vasco">
    <area shape="poly" coords="1001,301,1006,309,1012,306,1015,317,1021,311,1030,312,1024,330,1031,336,1038,328,1038,336,1051,338,1060,343,1074,343,1078,347,1071,353,1068,362,1059,372,1056,378,1047,378,1047,383,1043,386,1040,386,1038,391,1037,397,1032,404,1029,416,1029,428,1033,440,1028,454,1021,454,1010,451,1002,447,991,442,997,430,1004,430,1006,425,995,419,987,406,978,407,977,402,969,402,965,397,956,397,953,392,955,388,951,383,960,378,962,371,966,361,967,347,974,347,980,343,991,328,994,318,1003,308" href="#Navarra" alt="Navarra">
    <area shape="poly" coords="620,351,620,363,610,368,608,392,619,391,623,397,621,402,627,409,624,419,614,427,608,435,612,449,620,452,624,445,627,452,636,452,640,449,643,459,641,470,642,480,647,478,652,477,661,478,670,488,657,506,640,524,636,521,626,530,625,537,620,543,613,543,622,562,621,573,623,587,620,593,625,595,621,601,625,611,618,621,628,624,639,622,644,616,655,608,667,600,678,608,676,614,689,618,697,614,697,619,707,618,720,628,727,622,733,624,733,637,744,640,755,634,759,634,759,639,770,632,775,623,779,621,785,633,791,628,793,618,805,609,810,608,809,592,811,582,813,588,819,588,820,580,829,569,835,571,837,559,842,550,848,549,866,531,879,526,878,519,896,518,912,519,917,516,928,522,933,520,940,528,943,534,951,540,959,541,972,538,974,536,981,540,982,530,972,526,972,515,976,504,981,509,987,506,985,486,996,482,999,474,995,465,995,461,995,450,987,455,976,450,972,439,974,435,965,434,962,431,952,431,945,434,942,443,929,443,929,432,923,439,919,442,913,437,900,426,900,391,903,382,918,380,919,372,901,361,900,357,891,357,887,353,894,347,900,348,904,353,910,347,903,342,897,338,898,326,899,323,881,325,861,322,846,337,841,335,836,343,839,347,843,346,847,362,834,365,834,360,828,365,821,360,817,346,811,344,803,336,792,339,782,338,773,329,772,322,769,317,761,320,751,327,750,329,736,330,733,328,729,332,718,339,710,337,697,342,690,342,684,335,676,336,666,339,654,338,647,345,642,350,632,350,622,352" href="#Castilla_Leon" alt="Castilla_Leon">
    <area shape="poly" coords="1079,349,1089,362,1096,357,1102,361,1113,356,1121,359,1128,372,1144,372,1147,368,1156,374,1160,370,1165,372,1187,372,1190,380,1187,393,1189,418,1187,429,1178,448,1178,459,1158,480,1161,486,1163,486,1164,494,1160,500,1158,506,1161,520,1160,526,1156,531,1150,534,1154,544,1154,559,1153,568,1148,573,1142,576,1140,578,1136,576,1125,574,1122,569,1116,577,1112,582,1108,583,1108,586,1109,588,1111,600,1108,602,1110,609,1105,618,1104,622,1097,625,1096,624,1091,634,1088,638,1088,643,1073,651,1073,662,1068,665,1066,657,1058,651,1051,651,1046,654,1047,649,1052,643,1051,638,1046,638,1043,636,1038,631,1035,635,1029,637,1022,634,1020,630,1014,627,1006,620,998,609,1001,601,1004,590,1012,590,1017,586,1016,573,1014,566,1011,564,1012,557,1005,544,986,530,980,530,975,526,971,513,977,509,981,510,987,506,984,488,1000,477,999,467,994,444,1009,451,1027,453,1035,442,1030,424,1034,406,1037,396,1040,387,1048,383,1048,378,1054,380,1063,371,1070,361,1077,347" href="#Aragon" alt="Aragon">
    <area shape="poly" coords="1186,353,1205,362,1216,363,1219,369,1235,369,1242,378,1240,389,1240,396,1246,399,1255,397,1261,392,1278,395,1282,395,1280,405,1288,406,1294,401,1307,399,1322,408,1335,410,1334,404,1340,400,1344,402,1347,396,1361,394,1366,398,1370,398,1369,407,1382,410,1377,417,1374,419,1370,417,1366,423,1367,428,1372,438,1374,447,1370,458,1353,471,1341,479,1303,497,1290,517,1223,536,1222,540,1218,538,1206,540,1203,549,1187,565,1191,568,1196,574,1190,583,1179,586,1174,594,1167,589,1167,587,1155,586,1156,580,1149,575,1153,568,1155,546,1152,537,1159,528,1160,513,1163,499,1166,489,1162,482,1168,470,1176,460,1179,448,1189,417,1189,395,1190,382,1187,372,1182,370,1180,359,1188,355" href="#Cataluña" alt="Cataluña">
    <area shape="poly" coords="918,379,912,381,913,378,902,378,904,384,903,390,904,399,902,404,898,423,917,440,926,432,929,434,930,444,942,442,949,432,962,432,968,435,972,433,975,440,979,450,988,455,995,451,994,445,993,438,999,430,1005,429,1004,425,997,421,991,408,976,408,976,404,969,401,967,398,956,397,955,392,940,394,935,390,932,386,925,380,921,380" href="#Rioja" alt="Rioja">
    <area shape="poly" coords="866,533,875,539,881,544,873,567,878,574,877,580,885,586,889,596,892,594,892,604,898,606,894,613,894,624,900,622,902,634,903,640,896,643,883,641,879,648,873,643,848,661,844,655,853,649,863,639,856,635,846,633,833,627,828,623,823,620,813,626,808,624,806,618,796,628,794,626,797,618,804,613,810,609,810,589,822,588,821,580,829,571,836,572,838,562,839,558,841,549,849,550,865,535" href="#Madrid" alt="Madrid">
    <area shape="poly" coords="615,621,610,624,609,636,620,645,618,655,614,663,610,666,607,680,597,685,591,682,587,683,572,683,571,687,577,697,586,701,584,708,589,719,591,731,597,733,598,738,604,736,612,744,605,756,605,762,590,772,588,784,583,801,599,821,602,828,610,826,623,831,623,837,637,838,642,843,647,847,653,842,670,852,687,845,691,837,697,831,703,827,707,831,704,835,704,840,712,832,717,831,721,827,719,814,718,803,723,801,731,792,748,781,747,778,760,774,766,760,771,760,773,754,765,753,764,744,771,743,767,740,774,729,784,734,778,717,784,707,783,705,773,710,767,710,746,687,747,667,741,671,737,669,738,661,731,657,732,638,731,626,726,625,720,629,712,624,707,620,699,618,698,617,692,620,678,613,680,610,668,604,660,606,644,616,640,621,626,624,617,622" href="#Extremadura" alt="Extremadura">
    <area shape="poly" coords="791,629,796,632,808,620,814,626,823,623,862,640,843,654,850,664,873,644,881,647,885,644,898,645,904,640,900,621,896,622,894,617,900,609,894,606,893,596,884,584,881,582,881,571,875,568,882,543,870,531,882,525,881,521,894,520,918,517,934,525,952,542,965,542,974,538,981,541,984,534,994,537,1013,558,1016,588,1010,588,999,604,1027,637,1029,648,1046,648,1047,652,1043,655,1044,662,1036,673,1038,682,1034,682,1029,681,1020,703,1029,712,1046,718,1039,741,1050,755,1060,753,1063,770,1063,770,1065,779,1056,782,1049,775,1033,779,1031,776,1024,779,1024,789,1021,792,1021,810,1014,816,1009,815,1007,809,1001,808,983,818,981,814,977,820,969,827,961,834,959,844,945,836,952,822,947,810,940,807,944,797,929,795,917,798,913,798,909,804,905,800,893,801,880,799,879,805,872,807,869,802,864,803,849,803,845,809,815,807,814,812,802,806,772,784,769,778,758,777,764,762,770,761,772,756,768,752,764,746,768,743,772,734,781,733,778,719,783,708,781,705,769,709,748,684,748,666,743,672,739,668,738,661,732,658,734,640,745,641,758,636,763,638,779,621,785,632" href="#Castilla_Mancha" alt="Castilla_Mancha">
    <area shape="poly" coords="614,828,609,840,609,845,603,845,598,847,588,848,587,860,580,871,570,889,576,908,577,925,596,924,620,928,647,946,658,966,652,969,657,981,668,981,668,992,663,990,682,1022,691,1019,702,1033,715,1038,726,1032,726,1024,733,1027,745,998,767,991,782,992,787,985,796,981,803,971,820,971,830,966,851,967,864,969,874,974,887,968,916,967,931,976,945,962,958,956,970,969,984,957,990,951,998,919,1009,908,999,900,984,881,983,863,971,858,958,845,943,838,951,827,949,814,944,808,942,797,922,799,911,800,906,805,903,802,881,800,873,806,851,803,843,809,816,809,805,811,776,789,770,788,770,779,762,779,759,775,719,805,720,822,719,831,705,837,706,832,703,829,690,838,688,846,675,851,664,849,651,842,647,847,640,841,631,839,624,835,624,832,615,829" href="#Andalucia" alt="Andalucia">
    <area shape="poly" coords="1025,780,1024,787,1021,792,1022,809,1015,818,1009,815,1008,810,1001,809,984,820,982,816,960,833,960,845,971,862,985,860,984,881,1009,907,1021,902,1031,892,1041,888,1049,891,1053,888,1060,889,1079,885,1069,872,1075,865,1067,858,1053,834,1061,820,1054,812,1055,801,1059,785,1048,774,1036,778,1024,779" href="#Murcia" alt="Murcia">
    <area shape="poly" coords="1171,595,1165,588,1157,587,1154,583,1155,579,1146,575,1140,578,1131,577,1123,571,1110,585,1111,595,1113,600,1110,601,1113,610,1102,622,1094,626,1088,643,1074,652,1072,662,1068,664,1064,658,1058,652,1048,652,1046,647,1051,643,1051,641,1045,639,1037,632,1035,635,1028,637,1028,647,1044,648,1046,653,1045,660,1038,670,1038,678,1030,683,1021,693,1021,703,1036,716,1046,718,1045,728,1037,739,1052,755,1063,756,1066,777,1058,783,1058,797,1052,805,1057,817,1062,826,1056,831,1073,864,1080,850,1086,828,1093,829,1094,815,1103,812,1106,803,1120,795,1130,795,1130,787,1144,780,1149,775,1144,767,1134,760,1121,745,1116,730,1109,711,1111,695,1122,673,1135,654,1152,626,1172,594" href="#Valenciana" alt="Valenciana">
    <area shape="poly" coords="728,1048,732,1052,736,1049,732,1047,728,1047" href="#Ceuta" alt="Ceuta">
    <area shape="poly" coords="911,1103,910,1107,912,1112,917,1111,912,1107" href="#Melilla" alt="Melilla">
    <area shape="poly" coords="1218,748,1361,648,1441,641,1456,664,1365,723,1355,739,1253,785,1238,785,1220,750" href="#Baleares" alt="Baleares">
    <area shape="poly" coords="77,974,419,969,387,1057,354,1084,254,1114,176,1088,138,1088,84,1117,66,1109,87,1050,64,1014,78,976" href="#Canarias" alt="Canarias">
  </map>
   
</p>

</div>

Código CSS.

.centro { text-align:center;
}
#mapa { margin:0;
padding:0;
margin-top:200px;
border:1px solid #931416;
width:auto;
height:auto;
}


viernes, 17 de julio de 2015

HTML / CSS ejemplo de página 5

Lo que tenemos hasta el momento es:




CSS ejemplo de página 4

El código CSS que transforma nuestra lista en un menú desplegable es el siguiente.

Código CSS.

@charset "utf-8";
/* CSS Document */

*{ margin: 0; padding: 0;}
ul { list-style: none;}
ul li a { background-color: #0c9ba0;
color: #fff;
display:block;
padding: 1px 2px;
border: 1px solid #fff;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif; font-size:9px;
width: 100px;
height:50px;}
ul li a:hover { color: #0fbfc6;}
ul li {float:left;}
ul li ul li {float:none; position:relative;}
ul li ul { display:none;}
ul li:hover > ul {display:block;}
ul li ul li ul {position:absolute; top: 0; left:102px;}
body { width:2200px;}

El resultado muestra un estilo sin ningún criterio es simplemente un ejemplo ya lo modificare más adelante para que se adapte mejor a la página.
Espero que les guste.

HTML / CSS ejemplo de página parte 3.

Ahora tenemos el código.
Ahora vamos a dar el siguiente paso para ello empezaremos a utilizar el CSS.
Empezamos creando un documento con extensión CSS.
La estructura de carpetas que yo utilizo es la siguiente.
Creo una carpeta con el nombre de España, en esa carpeta tengo guardada mi documento HTML, que es index.html.
En esta carpeta creo otra carpeta con el nombre css y dentro de esta carpeta guardo mi hoja de estilo con el nombre style.css.
Esta es una organización que yo recomiendo.

Para enlazar la hoja de estilo css con el documento html, tenemos que indicarlo en el head de la siguiente forma:

<link rel="stylesheet" type="text/css" href="css/style.css">

Ojo en este punto recuerdo que yo llame a la hoja de estilo style, si utilizáis otro nombre lo tendréis que poner el nombre que habéis utilizado.

Nuestro head queda de la siguiente manera.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>