Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Dimitar Stefanov

Páginas: 1 ... 22 23 24 25 26 [27] 28 29 30
521
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear tabla HTML y CSS con fondo gris degradado y bordes redondeados CU01058D
« en: 22 de Enero 2016, 01:12 »
Posibles códigos del ejercicio CU01058D del curso CSS desde cero.

Código HTML y CSS unido en un solo archivo html:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
td, th {
border-bottom: solid 1px #CDCDCD;
text-align: center;
font-weight: bold;
border-left: solid 1px white;
border-right: solid 1px white;
height: 35px;
width: 100px;
background-color: #EBEBEB;
}
.tabla-destacada {
width: 60%;
margin: 10% auto;
border-spacing: 0;
}
tr th:last-child, tr td:last-child {
background-color: #E2F4C4;
}
tfoot tr td {
border-bottom: none;
}
thead tr th:first-child, thead tr th:nth-child(2), thead tr th:last-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
tfoot tr td:first-child, tfoot tr td:nth-child(2), tfoot tr td:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<title>Portal web</title>
</head>
<body>
<div>
<table class="tabla-destacada">
<thead>
<tr>
<th>Standard</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Gracias.

522
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Modificar el tipo de cursor usando css mostrar lupa signo interrogación CU01054D
« en: 22 de Enero 2016, 01:09 »
Códigos del ejercicio CU01054D del curso CSS desde cero.

1er Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos92.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<a href="#">Enlace 3</a>
<a href="#">Enlace 4</a>
<a href="#">Enlace 5</a>
</div>
<div id="caja2">
<a href="CU01054D(1).html" target="_blank"><img src="http://www.pintura-para.com/wp-content/uploads/2015/10/pintar-flores-300x200.jpg" title="documento 2" /></a>
</div>
</body>
</html>
Código CSS: "estilos92.css"

Código: [Seleccionar]
#caja1, #caja2 {
margin: 25px;
width: 200px;
height: 300px;
border: solid 5px violet;
float: left;
padding-top: 10px;
}
a {
display: block;
margin-bottom: 5px;
text-align: center;
cursor: help;
}
#caja2 a:hover {
cursor: zoom-in;
}
#caja2 {
width: 300px;
height: 225px;
padding: 0;

}

2o Código HTML: "CU01054D(1).html"

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
</head>
<body>
<div id="caja2">
<img src="http://www.teleadhesivo.com/es/img/fom214-png/folder/products-detalle-png/fotomurales-paisaje-flores-4.png"/>
</div>
</body>
</html>
Gracias

523
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS HTML bordes de tablas cómo poner bordes simples en vez de dobles CU01052D
« en: 22 de Enero 2016, 01:05 »
Códigos del ejercicio CU01052D del curso CSS desce cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos91.css"/>
<title>Portal web</title>
</head>
<body>
<table>
<tr>
<th>Título 1</th>
<th>Título 2</th>
<th>Título 3</th>
<th>Título 4</th>
<th>Título 5</th>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
</body>
</html>
Código CSS facilitado por el tutorial (yo lo puse como "estilos91.css") (al final de dicho código contesto a las preguntas del ejercicio):

Código: [Seleccionar]
table {
font-family: Helvetica, Arial, Sans-Serif;
color: #333;
width: 640px;
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
height: 30px;
}
th {
background: #d3d3d3;
font-weight: bold;
}
td {
background: #fafafa;
text-align: center;
}
tr:nth-child(even) td {
background: #f1f1f1;
}
tr:nth-child(odd) td {
background: #fefefe;
}
tr td:hover {
background: #666;
color: #fff;
}

/* a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado.
Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe.
Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.*/
/* b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}*/
/* c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}*/

Respuestas a las preguntas:

a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado.

Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe.

Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.


b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}


c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}

Gracias


524
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS estilos de tablas bordes simples o bordes dobles inferior Ejercicio CU01051D
« en: 22 de Enero 2016, 01:01 »
Códigos del ejercicio CU01051D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos89.css"/>
<title>Portal web</title>
</head>
<body>
<table id="table1">
<tr>
<caption>Título tabla 1</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table2">
<tr>
<caption>Título tabla 2</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table3">
<tr>
<caption>Título tabla 3</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
</body>
</html>
Código CSS: "estilos89.css"

Código: [Seleccionar]
#table1 {
border: solid 8px grey;
width: 600px;
border-collapse: collapse;
}
#table1 td {
width: 20%;
border: solid 8px grey;
}
#table1 caption {
border: solid 8px grey;
border-bottom: none;
}
#table2 {
width: 100%;
border: solid brown 2px;
}
#table2 td {
width: 20%;
border: solid brown 2px;
}
#table2 caption {
border: solid brown 2px;
}
#table3 {
width: 500px;
}
#table3 td {
width: 100px;
border-bottom: solid 6px blue;
}
#table3 caption {
border-bottom: solid blue 6px;
}

Gracias

525
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear efecto cambio color con CSS cuando se pone ratón sobre item menú CU01049D
« en: 22 de Enero 2016, 00:57 »
A continuación dejo mi solución del ejercicio CU01049D del curso CSS desde cero.

Los comentarios están en el mismo código al final.

Lo que pide el ejercicio:

Citar
Analiza el código HTML y CSS que mostramos a continuación y realiza una interpretación descriptiva del código, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cómo se ha hecho la interpretación descriptiva del código de ejemplo que hemos visto anteriormente).

Código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web - aprenderaprogramar.com</title>
<style type="text/css">
#nav-menu ul {
font-family: sans-serif;
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
float: left;
margin: 0 0.15em;
border: 5px groove #FFAA33;
}
#nav-menu li a {
background-color: #FFC0CB;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover {
background-color: #FF6347;
}
</style>
</head>
<body>
<div id="nav-menu">
<!-- identificamos div como nav-menu mediante el id -->
<ul id="navlist">
<!-- identificamos una lista desordenada como navlist mediante el id -->
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<!-- Identificamos el primer elemento de la lista como activie mediante el id y el primer enlace como current también mediante el id -->
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul>
</div>
</body>
</html>

<!-- 1)Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con las valores 0.

2)Para los elementos de la lista establecemos que floten, con un margen superio e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.

3)Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.

4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.-->
RESPUESTA

1) Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con los valores 0.

2) Para los elementos de la lista establecemos que floten, con un margen superior e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.

3) Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.

4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.

Gracias

526
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS aplicar estilo listas list-style-type list-style-position Ejercicio CU01048D
« en: 22 de Enero 2016, 00:55 »
Buenas tardes, aquí dejo los códigos del ejercicio CU01048D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCYTUPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos83.css"/>
<title>Portal web</title>
</head>
<body>
<div>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
<li>Elemento 7</li>
<li>Elemento 8</li>
<li>Elemento 9</li>
<li>Elemento 10</li>
<li>Elemento 11</li>
<li>Elemento 12</li>
<li>Elemento 13</li>
<li>Elemento 14</li>
<li>Elemento 15</li>
<li>Elemento 16</li>
<li>Elemento 17</li>
<li>Elemento 18</li>
<li>Elemento 19</li>
<li>Elemento 20</li>
<li>Elemento 21</li>
<li>Elemento 22</li>
<li>Elemento 23</li>
<li>Elemento 24</li>
<li>Elemento 25</li>
<li>Elemento 26</li>
<li>Elemento 27</li>
</ul>
</div>
</body>
</html>
Código CSS: "estilos83.css"

Código: [Seleccionar]
li:first-child, li:nth-child(2), li:nth-child(3) {
list-style-type: disc;
list-style-position: outside;
}
li:nth-child(4), li:nth-child(5), li:nth-child(6) {
list-style-type: circle;
list-style-position: inside;
}
li:nth-child(7), li:nth-child(8), li:nth-child(9) {
list-style: square inside;
}
li:nth-child(10), li:nth-child(11), li:nth-child(12) {
list-style-type: none;
}
li:nth-child(13), li:nth-child(14), li:nth-child(15) {
list-style-type: decimal outside;
}
li:nth-child(16), li:nth-child(17), li:nth-child(18) {
list-style: decimal-leading-zero outside;
}
li:nth-child(19), li:nth-child(20), li:nth-child(21) {
list-style: lower-roman inside;
}
li:nth-child(22), li:nth-child(23), li:nth-child(24) {
list-style: upper-alpha inside;
}
li:nth-child(25), li:nth-child(26), li:nth-child(27) {
list-style: circle url(https://lh3.googleusercontent.com/-_6GcdriGAEI/UkkjeJoZlOI/AAAAAAAAAb0/5B8NPiEqYsM/s40/CU01037D_5.png);
}
Gracias

527
Aprender a programar desde cero / Re:colores CSS equivalencias entre notación hexadecimal rgb y nombres CU01019D
« en: 22 de Enero 2016, 00:50 »
Bueans,

Alex.

Tienes razón, no sé en que estaría pensando. jeje. A continuación corrijo el despiste

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Portal web aprenderaprogramar.com">
<meta name="description" content="aprender,programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos21.css">
<title>Ejemplo colores</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<table>
<tr>
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr id="tr1">
<td>DimGray</td>
<td>696969</td>
<td>105,105,105</td>
</tr>
<tr id="tr2">
<td>IndianRed</td>
<td>CD5C5C</td>
<td>205,92,92</td>
</tr>
<tr id="tr3">
<td>FireBrick</td>
<td>B22222</td>
<td>178,34,34</td>
</tr>
<tr id="tr4">
<td>DodgerBlue</td>
<td>1E90FF</td>
<td>30,144,255</td>
</tr>
<tr id="tr5">
<td>Indigo</td>
<td>4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Código CSS: "estilos21.css"

Código: [Seleccionar]
body{font-size:36px;}

table, td, th  {
border: 2px solid;
}
#tr1 td:first-child {
background-color: DimGray;
}
#tr1 td:nth-child(2) {
background-color: #696969;
}
#tr1 td:last-child {
background-color: rgb(105, 105, 105);
}
#tr2 td:first-child {
background-color: IndianRed;
}
#tr2 td:nth-child(2) {
background-color: #CD5C5C;
}
#tr2 td:last-child {
background-color: rgb(205, 92, 92);
}
#tr3 td:first-child {
background-color: FireBrick;
}
#tr3 td:nth-child(2) {
background-color: #B22222;
}
#tr3 td:last-child {
background-color: rgb(178, 34, 34);
}
#tr4 td:first-child {
background-color: DodgerBlue;
}
#tr4 td:nth-child(2) {
background-color: #1E90FF;
}
#tr4 td:last-child {
background-color: rgb(30, 144, 255);
}
#tr5 td:first-child {
background-color: Indigo;
}
#tr5 td:nth-child(2) {
background-color: #4B0082;
}
#tr5 td:last-child {
background-color: rgb(75, 0, 130);
}

Gracias por la atención.

Atentamente,

dimiste

528
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS menús desplegables con efecto vertical aparecer elementos Ejercicio CU01050D
« en: 22 de Enero 2016, 00:45 »
Buenas tardes,

Ogramar.

Ahora ya lo veo claro. Gracias por la explicación. A veces cosas simples nos parecen complicadas.

Gracias por la ayuda.

Saludos,

dimiste

529
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS cambiar el color de los link en página web y elminar subrayado CU01047D
« en: 22 de Enero 2016, 00:39 »
Buenas Ogramar,

totalmente de acuerdo. No había caído en que si pongo como clase "a" se podría confundir con la etiqueta de enlaces en HTML.

No era exactamente un ejercicio. Era un ejercicio resuelto, pero decidí hacerlo a mi manera, a ver si era capaz de resolverde de manera distinta.

A continuación te pego el ejercicio:

Citar
EJERCICIO RESUELTO

Usando el código HTML de base que venimos empleando a lo largo del curso, se desea realizar lo siguiente:

Para los links dentro de elementos li: establecer su color como #B22222. Estos links deben aparecer sin subrayado y en negrita.Poner la siguiente imagen...




530
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS Equivalencia en pixeles y em de titulos h1, h2, h3, h4, h5 y h6 CU01044D
« en: 22 de Enero 2016, 00:27 »
Buenas, Ogramar.

La verdad que este ejercicio me puso algunas dificultades, pero como explico en la resolución, tomé de referencia los h4 como valores de la letra normal de los navegadores y de allí hice los  cálculos necesario para llegar al resultado final.

Saludos.

531
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS efecto tres dimensiones para texto brillo o difuminado de fondo CU01041D
« en: 22 de Enero 2016, 00:20 »
Buenas Ogramar.

En el ejercicio, pone:

Citar
El div 1 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … .

Para conseguir dicho efecto, en el tutorial pone:

Citar
La propiedad text-overflow se concibió para dar un mayor control sobre cómo debería comportarse un texto que se sale de su contenedor, permitiendo el reemplazo del final del texto por unos puntos suspensivos (ellipsis) o por una cadena definida por nosotros, por ejemplo podría ser “Leer más…”.

Para aplicar esta propiedad tenemos que establecer antes la propiedad overflow con valor hidden, ya que si no lo hacemos no observaremos efecto alguno (prevalecerá lo indicado por overflow). Además lo indicado se aplicará al texto que no quepa en sentido horizontal pero en cualquier punto del texto, no sólo al final. Esto puede generar efectos extraños (por ejemplo que unos puntos suspensivos aparezcan en un punto intermedio, cuando realmente sólo deberían aparecer al final). Para evitar esto habremos de forzar que el texto no haga saltos de línea usando white-space: nowrap;

Por lo tanto, siguiendo las instrucciones del tutorial, puse lo siguiente en la hora de estilos sobre el #caja1, pero no me funciona en ningún navegador (firefox, chrome, opera, etc.)

Código: [Seleccionar]
#caja1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 105%;
}
No sé por qué.

(Gracias por corregirme el ejercicio).

532
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS menús desplegables con efecto vertical aparecer elementos Ejercicio CU01050D
« en: 18 de Enero 2016, 23:23 »
¿Por qué en el tutorial CU01050D del curso CSS en la hora de estilos se especifica el fondo de los enlaces del menu desplegable de una manera y no de otro?

A continuación pongo los dos códigos y al final concreto la pregunta.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos87.css"/>
<title>Portal web</title>
</head>
<body>
<div id="wrap">
<h2>CSS - Menú desplegable</h2>
<p>aprenderaprogramar.com</p>
<ul id="navbar">
<li><a href="http://aprenderaprogramar.com">Libros</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li>
<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li>
<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li>
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li>
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Humor informático</a></li>
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li>
<li><a href="http://aprenderaprogramar.com">Humor programación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li>
</ul>
</li>
</ul>
<div class="limpiador"></div>
</div>
</body>
</html>
Código CSS: "estilos87.css"

Código: [Seleccionar]
body {
font: 62.5%/1.2 Arial, Helvetica, sans-serif;
background-color: #EEE;
}
#wrap {
font-size: 1.8em;
width: 520px;
padding: 20px;
margin: 0 auto;
background-color: #FFF;
}
#navbar {
padding: 0;
margin: 0;
}
#navbar li {
list-style: none;
float: left;
margin: 10px;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5E8CE9;
color: #FFF;
text-decoration: none;
}
#navbar li ul {
display: none;
background-color: #69F;
}
#navbar li:hover ul {
font-size: 12px;
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69F;
border-bottom: 1px solid #FFF;
color: #000;
}
#navbar li li a:hover {
background-color: #8DB3FF;
}
.limpiador {
padding: 0;
border-style: none;
clear: both;
}
No entiendo por qué para establecer el fondo de los enlaces de los elementos que están en: ul->li->ul->li no se seleccioná el elemento así:
#navbar li a:hover li {}
sino así:
#navbar li li a:hover {}

533
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Cajas div con display inline-block no se alinean verticalmente CU01040D CSS
« en: 18 de Enero 2016, 18:19 »
Buenas Ogramar,

tienes razón, se me ha olvidado lo de los 20px de margin. Gracias por explicarme lo de la propiedad vertical-align, me falta y tanta experiencia con las hojas de estilos. Pero bueno, me lo tomo con calma, jeje ;)

Saludos

534
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS desde cero maquetar una web con tres columnas de ancho variable CU01036D
« en: 18 de Enero 2016, 18:14 »
Buenas Ogramar,

He mirado el enlace que me enviaste y yo no veo el ejercicio igual que como lo pedían en el tutorial. Pensaba que se tenía que hacer literalmente como estaba en el dibujo (sin una caja de contenedor y luego dentro las cajas). De todas maneras, tal y como dices tu, mi ejercicio tampoco ha conseguido el objetivo, porque si no lo has podido ver bien...Además, yo para verlo bien (con el navegador firefox) tenía que subirlo a zoom 150% porque si no, no se visualiza bien.

Saludos

535
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS W3C Validator validación de código CSS según especificación oficial CU01023D
« en: 18 de Enero 2016, 17:54 »
Ah, sí, sí, me ha salido todo sin errores. Perdón, despiste mio.

Saludos.

536
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS superponer varios div efecto superposición relative y absolute CU01032D
« en: 18 de Enero 2016, 17:53 »
Buenas Ogramar,

primero, y como siempre, gracias por corregirme el ejercicio.

En el primer ejercicio, pensaba que los subapartados A), B) y C)  se tenían que hacer por separado, por eso creé 3 hojas de estilo diferentes.

Y sobre el tercer ejercicio, sí, no puse texto porque pensé q creando las propiedades oportunas para que se pueda ver la barra de scroll ya sería suficiente.

Saludos.

537
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS cambiar el color de los link en página web y elminar subrayado CU01047D
« en: 16 de Enero 2016, 20:00 »
Mi código del ejercicios cu01047D resuelto del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<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="estilos79.css"/>
<title>Portal web</title>
</head>
<body>
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>
<div>
<div>
<div>Menú</div>
<hr/>
<ul>
<li><div class="a"></div><a href="#">Inicio</a></li>
<li><div class="a"></div><a href="libros.html">Libros de programación</a></li>
<li><div class="a"></div><a href="cursos.html">Cursos de programación</a></li>
<li><div class="a"></div><a href="humor.html">Humor informático</a></li>
</ul>
</div>
<div>
<div>
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</P>
<p>Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a><span class="b"></span> no es tarea de un día ni de una semana: aprender programción requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</P>
<p>Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a><span class="b"></span> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidos otras alternativas como Crimson Editor.</p>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"></a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>
</div>
<br/>
<div>
<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario:<br/><br/>
Nombre:<input type="text" name="nombre"/><br/><br/>
Apellidos:<input type="text" name="apellidos"/><br/><br/>
Dirección:<input type="text" name="direccion"/><br/><br/>
Correo electrónico:<input type="text" name="correo"/><br/><br/>
Mensaje:<textarea name="mensaje" cols=30 rows=2></textarea><br/><br/>
<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>
</form>
</div>
<br/><br/><br/>
<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>
</div>
</body>
</html>
Código CSS: "estilos79.css"

Código: [Seleccionar]
* {
font-family: sans-serif;
}
li {
list-style-type: none;
}
li a:link {
color: #B22222;
text-decoration: none;
font-weight: bold;
}
.a {
display: inline-block;
background-image: url(3.png);
width: 38px;
height:38px;
position: relative;
top: 10px;
}
.a:hover {
background-image: url(2.png)
}
.b {
display: inline-block;
width: 38px;
height: 38px;
background-image: url(2.png);
position: relative;
top: 10px;
}
.b:hover {
background-image: url(3.png);
}
a:link {
text-decoration: none;
font-weight: bold;
color: blue;
}
a:visited {
color: green;
}
a:hover {
color: #6D006D;
}
PD: He resuelto el ejercicios metiendo dos elementos en el código HTML y luego los he dado propiedades en la hoja de estilo. No sé si es la manera más correcta, pero el efecto visual es el mismo a al que se exegía en el ejercicio.

538
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS propiedades de fuente font-size font-variant font-family Ejercicio CU01045D
« en: 16 de Enero 2016, 17:01 »
Códigos del ejercicio CU01045D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos76.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p></div>
<div id="caja2"><p>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</p><P>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</P><p>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</p></div>
<div id="caja3"><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p></div>
</body>
</html>
Código CSS: "estilos76.css"

Código: [Seleccionar]
div {
margin: 33px;
padding: 25px;
border-style: solid;
border-width: 5px;
border-color: red;
}
#caja1 {
font-size: 12px;
font-family: serif;
}
#caja1 p:nth-child(2) {
font-variant: small-caps;
}
#caja2 {
font-family: sant-serif;
font-size: 14px;
color: #B22222;
}
#caja3 {
font: 2em fantasy;
}

539
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS Equivalencia en pixeles y em de titulos h1, h2, h3, h4, h5 y h6 CU01044D
« en: 16 de Enero 2016, 15:54 »
Códigos del ejercicio CU01044D del curso CSS (basándome que el valor del h4 se toma como 1em.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos75.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">
<table>
<h1 id="a">Mozilla Firefox</h1>
<tr>
<td>Tipo de título</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td><h1>h1</h1></td>
<td>46</td>
<td>1.91</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td>35</td>
<td>1.45</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td>27</td>
<td>1.125</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td>24</td>
<td>1</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td>20</td>
<td>0.83</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td>16</td>
<td>0.66</td>
</tr>
</table>
</div>
<div id="caja2">
<table>
<h1 id="a">Chrome</h1>
<tr>
<td>Tipo de título</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td><h1>h1</h1></td>
<td>37</td>
<td>2.05</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td>27</td>
<td>1.5</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td>22</td>
<td>1.22</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td>18</td>
<td>1</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td>16</td>
<td>0.88</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td>12</td>
<td>0.66</td>
</tr>
</table>
</div>
</body>
</html>
Código CSS: "estilos75.css"

Código: [Seleccionar]
div {
width: 400px;
}
#caja1 {
float: left;
}
#caja2 {
float: left;
margin-left: 100px;
}
table {
width: 400px;
height: 400px;
text-align: center;
border: solid #9F89B8;
border-collapse: collapse;
/* la propiedad border-collapse sirve para colapsar las celdas entre sí */
}
table tr td {
    border-top: solid #9F89B8;
border-bottom: solid #9F89B8;
width: 100px;
}
table tr:first-child {
background-color: #8063A1;
color: white;
}
table tr:nth-child(2) {
background-color: #DFD7E8;
}
table tr:nth-child(4) {
background-color: #DFD7E8;
}
table tr:nth-child(6) {
background-color: #DFD7E8;
}
#a {
text-align: center;
}

540
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS cómo centrar verticalmente un texto dentro de un div vertical-align CU01043D
« en: 16 de Enero 2016, 14:24 »
Código del ejercicio CU01043D del curso CSS desde cero (respuestas están dentro del código como comentarios).

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<style type="text/css">
* {
font-family: arial;
}
div {
width: 360px;
height: 210px;
margin: 10px;
padding: 5px 20px;
border-style: solid;
border-color: red;
border-width: thin;
background-color: yellow;
text-align: center;
float: left;
}
#vcent, #caja1 {
display: table;
}
#vcent span, #caja1 span {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="caja1"><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

<!-- Hay 2 cajas contenedoras identificada sólo una de ella por id. -->
<!-- En mi caso, no se observa ninguna diferencia en los dos navegadores que he visualizado el código. Si se diera el caso de que se hubieran visto diferente, se debería a los propiedades por defecto de los navegadores que no hemos especificado nosotros en el código. -->
<!--  -->
<!-- La línea <<Línea de texto contenedor>> se muestra centrada porque es un elemento dentro de una tabla y le afecta la propiedad vertical-align. -->
<!-- Para que se mostrara igual la Línea de texto contenedor 1 como la Línea de texto contenedor 2 tan sólo tenemos que hacer los siguientes cámbios:
<div> (del primer contenedor) le tendremos que identificar por un id, en mi caso lo identifico como: id="caja1" y luego añadirlo en el script de arriba (tal y como está en el código más arriba). -->

Páginas: 1 ... 22 23 24 25 26 [27] 28 29 30

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".