Autor Tema: Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D# (Leído 13720 veces)

pedro,, · « **en:** 21 de Septiembre 2015, 16:12 »

Otro ejercicio de CSS (CU01058D):

Citar

EJERCICIO
En numerosas ocasiones queremos crear un diseño para una página web o aplicación parecido al que nos encontramos en otra página web. Supón que has encontrado el siguiente diseño. Crea el código HTML y CSS para lograr un resultado lo más parecido posible a lo que se ve en la siguiente imagen, donde tenemos una tabla con bordes redondeados.

HTML:

Código: [Seleccionar]

<html>
	<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01058D.css">
	</head>
	<body>
			<table>
				<th><div class="borderSuperiores" id="column1">Standard</div></th> <th><div class="borderSuperiores" id="column2">Profesional</div></th> <th><div class="borderSuperiores" id="column3">Enterprise</div></th>
				<tr>
					<td><div class="chekverde" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
				</tr>
				<tr>
					<td><div class="chekverde" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
				</tr>
				<tr>
					<td><div class="aspaRoja" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
				</tr>
				<tr>
					<td><div class="aspaRoja" id="column1"></div></td> <td><div class="aspaRoja" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
				</tr>
				<tfoot>
					<tr>
						<td><div class="bordesInferiores" id="column1">$99</div></td><td><div class="bordesInferiores" id="column2">$199</div></td><td ><div class="bordesInferiores" id="column3">$399</div></td>
					</tr>
				</tfoot>
			</table>
	</body>
</html>

CSS:

Código: [Seleccionar]

*{margin:0; padding:0;}
table{
	width: 600px;
	height: 300px;
	margin: auto; /*centra la tabla horizontalmente*/
}
table tfoot div, table th div{
	font-weight: bold; font-size: 22px; 
	display: table-cell; vertical-align: middle;
}

table div{
	text-align: center;
	width: 200px;
	height: 50px;
	background-color: lightgrey;
	background-repeat: no-repeat; background-position: 50%;
}
table, th, td{
	border: solid 1px white;
	border-collapse: collapse;
}
.chekVerde{background-image: url(chekVerde.png);}
.aspaRoja{background-image: url(aspaRoja.png);}
.bordesInferiores{border-radius: 0px 0px 10px 10px; }
.borderSuperiores{border-radius: 10px 10px 0px 0px; }
#column3{background-color: 66FF66;}

Estas son las dos imágenes que usé:

Como duda, quería preguntar si se puede hacer que cambie de color una columna entera de una tabla al pasar el ratón por encima de cualquier celda de esa columna.

Saludos.

Ogramar · « **Respuesta #1 en:** 22 de Septiembre 2015, 09:30 »

Hola He usado los links de imágenes para referenciarlas así:

Código: [Seleccionar]

.chekVerde{background-image: url('http://i.imgur.com/WX1dBA4.png?1');}
.aspaRoja{background-image: url('http://i.imgur.com/LbraO64.png?1');}

¡Te ha quedado del 10!

Una cosa que diría que no está bien es aplicar id="column1" a varios elementos, id="column2" a varios elementos, etc. Un id es algo único, por ello no debe haber varios elementos con id repetido. Si quieres aplicar algo repetido lo que debemos usar es class.

Sobre tu consulta del cambio de color de una columna sí se podría hacer, quizás usando hover (http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=752:pseudoclases-css-link-visited-focus-hover-y-active-estilos-y-efectos-en-links-propiedad-outline-cu01047d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203) pero resulta mucho más potente usar javascript (http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206)

Salu2

pedro,, · « **Respuesta #2 en:** 22 de Septiembre 2015, 10:43 »

Hola.

Usé los id porque pensaba que que un elemento no podía pertenercer a dos clases distintas.
Ahora estuve revisando información y vi que si se puede hacer, no copio todo el código, pero ahora los elementos div afectados los escribí de la siguiente forma:

<div class="borderSuperiores column3">
<div class="chekverde column3">

Ahora ya lo tengo corregido, muchas gracias por los comentarios.

Ahora que mencionas JavaScript, ¿que recomiendas para cuando acabe con CSS?
¿PHP o JavaScript?

Saludos.

Ogramar · « **Respuesta #3 en:** 22 de Septiembre 2015, 11:02 »

Yo diría que mejor primero JavaScript, así tendrás todas las bases para trabajar PHP sin limitaciones o dudas derivadas de no conocer JavaScript

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D# (Leído 13720 veces)

pedro,,

Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D#

Ogramar

Re:Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D

pedro,,

Re:Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D

Ogramar

Re:Esquinas redondeadas en tablas o div CSS. border-radius Ejercicio CU01058D

Preguntas y respuestas