Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 22 de Abril 2017, 14:59
-
Muy buenos dias!
Les dejo mi ejercicio correspondiente a la entrega CU01058D del tutorial de desarrollador web desde cero con CSS.
HTML:
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>
<body>
<div id="contenedor">
<table>
<thead>
<tr>
<th id="color-curva-toplila"> Standard </th>
<th id="color-curva-toplila"> Professional </th>
<th id="color-curva-top"> Enterprise </th>
</tr>
</thead>
<tbody>
<tr>
<td> <div id="x"> </div> </td>
<td> <div id="x"> </div> </td>
<td id="color"> <div id="ok"> </div> </td>
</tr>
<tr>
<td> <div id="x"> </div> </td>
<td> <div id="x"> </div> </td>
<td id="color"> <div id="ok"> </div> </td>
</tr>
<tr>
<td> Datos </td>
<td> Datos </td>
<td id="color"> <div id="ok"> </div> </td>
</tr>
<tr>
<td> Datos </td>
<td> Datos </td>
<td id="color"> <div id="ok"> </div> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="color-curva-bottomlila"> $99 </td>
<td id="color-curva-bottomlila"> $199 </td>
<td id="color-curva-bottom"> $399 </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
CSS:
#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
#ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
#x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}
#color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}
-
Buenas.
Has repetido id en muchos elementos, los id deben ser únicos en un documento, es decir cada elementos puede tener un id que no se repita en el resto del documento. Aunque no te de ningún error es la forma adecuada de actuar, si quieres que varios elementos compartan propiedades css usa clases.
Saludos. ;D
-
Pedro muchas gracias por la paciencia de siempre!
Adjunto de nuevo el ejercicio:
HTML:
<!DOCTYPE html>
<!--Has repetido id en muchos elementos, los id deben ser únicos en un documento,
es decir cada elementos puede tener un id que no se repita en el resto del documento.-->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>
<body>
<div id="contenedor">
<table>
<thead>
<tr>
<th class="color-curva-toplila"> Standard </th>
<th class="color-curva-toplila"> Professional </th>
<th id="color-curva-top"> Enterprise </th>
</tr>
</thead>
<tbody>
<tr>
<td> <div class="x"> </div> </td>
<td> <div class="x"> </div> </td>
<td class="color"> <div class="ok"> </div> </td>
</tr>
<tr>
<td> <div class="x"> </div> </td>
<td> <div class="x"> </div> </td>
<td class="color"> <div class="ok"> </div> </td>
</tr>
<tr>
<td> Datos </td>
<td> Datos </td>
<td class="color"> <div class="ok"> </div> </td>
</tr>
<tr>
<td> Datos </td>
<td> Datos </td>
<td class="color"> <div class="ok"> </div> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="color-curva-bottomlila"> $99 </td>
<td class="color-curva-bottomlila"> $199 </td>
<td id="color-curva-bottom"> $399 </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
CSS:
#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
.ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
.x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}
.color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}
-
Buenas alefaletti.
Ahora mucho mejor.
Solo recomendarte que en vez de llamar a una clase x, intentes siempre que se pueda darle un nombre que sea significativos para que sea más fácil comprender el código.
Aún así ya puedes dar como terminado este ejercicio.
Saludos. ;D