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 ... 23 24 25 26 27 [28] 29 30
541
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Ejercicio CU01041D CSS
« en: 16 de Enero 2016, 13:18 »
Ogramar,

ante todo, buenas tardes.

Me atrevería a pedirte un poquito de explicaciones sobre este ejercicio. En el presente ejercicio no se menciona claramente que tenemos que utilizar la propiedad text-overflow (y, como puedes ver, no la he incluido), pero intenté utilizarla y no me funcionó. Había establecido (para la #caja1) la propiedad overflow: hidden y la white-space: nowrap (tal y como se recalca en el tutorial que tenemos que darles valores a estas dos propiedades anteriormente para que nos funcione la propiedad text-overflow), pero aún así no funcionó. No sé, me deberé de equivocar en algo. Me podrías explicar un poco como es el comportamiento de dicha propiedad.

Gracias antemano.

Saludos.

542
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS text-transform: uppercase; poner en mayúsculas o minúsculas texto CU01042
« en: 16 de Enero 2016, 13:11 »
Códigos del ejercicio CU01042D 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"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos74.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p class="p">El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor</p><p class="p"> El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS.</p><p class="p"> La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal. </p></div>
<div id="caja2"><p>El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadenadetextocualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.</p></div>
<div id="caja3"><p>El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadenadetextocualquieracadenadetextocualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.</p></div>
</body>
</html>
Código CSS: "estilos74.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 180px;
height: 300px;
margin: 33px;
border-style: solid;
border-width: 6px;
border-color: red;
}
#caja1 {
text-transform: uppercase;
letter-spacing: 5px;
overflow: scroll;
}
.p::first-letter {
font-size: 250%;
}
#caja2 {
overflow-y: scroll;
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#caja3 {
overflow-y: scroll;
text-transform: capitalize;
word-spacing: 10px;
}
PD: Como podemos observar, en la última caja, al haber una letra más larga que el ancho de la misma, aunque especificando en la propiedad overflow-y: scroll, el navegador realmente lo lee como: overflow: scroll, es decir, hay tanto un scroll vertical como horizontal, a pesar de que sólo hemos especificado la propiedad de overflow-y. No sé por qué pasa esto.

543
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS efecto tres dimensiones para texto brillo o difuminado de fondo CU01041D
« en: 16 de Enero 2016, 12:13 »
Códigos del ejercicios CU01041D 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"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos73.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p> 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 … . La altura de línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener <span id="a">tamaño de fuente 18 píxeles y una sombra sólida de color rojo</span> con desplazamiento hacia la derecha y abajo.</p><p>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 … . La altura de línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color rojo con desplazamiento hacia la derecha y abajo.</p></div>
<div id="caja2"><p>El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de <span id="b">fuente 18 píxeles y una sombra sólida de color azul</span> con desplazamiento hacia la izquierda y abajo.</p><p>El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener <span>tamaño de fuente 18 píxeles y una sombra sólida</span> de color azul con desplazamiento hacia la izquierda y abajo.</p></div>
<div id="caja3"><p>El div 3 debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener <span id="c">tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde</span> de modo que parezca que existe vapor verde detrás del texto.</p><p>El div 3 debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor verde detrás del texto.</p></div>
</body>
</html>
Código CSS: "estilos73.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 240px;
height: 300px;
margin: 18px;
padding: 8px;
border-style: solid;
border-width: 3px;
border-color: blue;
}
#caja1 {
overflow: scroll;
line-height: 105%;
}
#a {
font-size: 18px;
text-shadow: 5px 3px red;
}
#caja2 {
overflow: hidden;
line-height: 110%;
}
#b {
font-size: 18px;
text-shadow: -5px 3px blue;
}
#caja3 {
text-align: justify;
color: #8B4513;
overflow: scroll;
line-height: 120%;
}
#c {
font-size: 18px;
text-shadow: 0px 0px 5px green;
}

544
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Cajas div con display inline-block no se alinean verticalmente CU01040D CSS
« en: 15 de Enero 2016, 22:17 »
Código del ejercicio CU01040D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE htlm>
<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="estilos72.css"/>
<title>Ejemplo text-align</title>
</head>
<body>
<div id="caja1"><p id="a">El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p><p>El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p></div>
<div id="caja2"><p id="c">El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span>
y el primer párrafo indentado en 50 píxeles.</p>
<p>El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span> y el primer párrafo indentado en 50 píxeles.</p></div>
<div id="caja3"><p id="e">El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p><p>El div 3 debe tener alineación del texto justificada, color de texto #8B4513.                Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p></div>
</body>
</html>
Código CSS: "estilos72.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 200px;
height: 400px;
padding: 10px;
border-style: solid;
border-width: 4px;
font-size: 14px;
}
#caja1 {
text-align: center;
color: #FF6347;
}
#a {
text-indent: 10%;
}
span {
text-decoration: underline;
}
#caja2 {
text-align: right;
color: #008080;
white-space: pre-line;
}
#b {
text-decoration: overline;
}
#c {
text-indent: 50%;
}
#caja3 {
text-align: justify;
color: #8B4513;
white-space: pre-wrap;
}
#d {
text-decoration: line-through;
}
#e {
text-indent: 20%;
}
No entiendo por qué las cajas div no están alineadas.

545
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Poner una imagen de fondo en página web Ejemplo background-image repeat CU01030D
« en: 15 de Enero 2016, 19:12 »
Buenas Ogramar,

tienes razón. En el primer ejercicio teníamos que utilizar distintos imágenes, no sé porque he utilizado la misma, quizás por comodidad para no buscar más.

Gracias por corregirme otro ejericico más.

Saludos.

546
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS equivalencia entre tamaños de fuente en pixeles, puntos, %, em etc. CU01024D
« en: 15 de Enero 2016, 18:47 »
Hola Ogramar,

Ahora mismo estoy en el tutorial de text-align. Supongo que allí nos lo explicarán. Me has adelantado info, jeje. No se si lo podré hacer hoy, porque estoy un poco saturado. He tenido muchos problemas en entender las propiedades position: absolute y position:relative, pero creo que ya los he entendido. jeje

Gracias. Saludos

547
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: 15 de Enero 2016, 18:44 »
Buenas Ogramar,

sobre el color, tienes razón, había interpretado que sólo teníamos que incluir la propiedad background-color y no también color. Lo he corregido. He pasado el archivo por W3C validator y los logos conseguidos los incorporo en <div id="header">. No se te han visualizado bien a ti?

Saludos. (Gracias por corregir y ayudarme en todos los ejercicios que estoy haciendo. Aprendo muchiiisimo:))

548
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS colores rgba con efecto transparencia distintos grados Ejercicio CU01020D
« en: 15 de Enero 2016, 18:35 »
Gracias Ogramar,

Estoy intentando crear los códigos de la mejor forma posible (cosa muy difícil aún para mi, jeje). En el curso HTML desde cero nos han explicado la estructura por la cual creo los códigos HTML, por eso siempre intento meter el div id="menu", pero quizás tienes razón y no debería de ponerlo si no lo exige el ejercicio.

Saludos

549
Aprender a programar desde cero / Re:diferencia entre padding y margin CSS cómo dejar margen todas direccion CU01029D
« en: 15 de Enero 2016, 18:31 »
Ogramar, tines toda la razón. He corregido el ejercicio. Gracias. (he utilizado el enlace para guiarme).

Quedará así:

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,curso">
<link rel="stylesheet" type="text/css" href="estilos37.css">
<title>Ejemplo margin y padding</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div>
<div id="b">div2</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Código CSS: "estilos37.css"
Código: [Seleccionar]
#a, #b {
display: inline-block;
width: 250px;
margin: 20px;
background-color: #FFB6C1;
border-top: dotted 15px #DC143C;
border-right: dashed 10px green;
border-bottom: double 10px #FF00FF;
border-left: ridge 40px #2F4F4F;
padding: 30px 45px 0 60px;
}
/* Ancho de cada div=div+border(10px+40px)+padding(45px+60px) */
/* Alto de cada div=div+border(15px+10px)+padding(30px+0px) */

550
Aprender a programar desde cero / Re:CSS estilos de bordes border-right border-left border-top border-bottom CU01027D
« en: 15 de Enero 2016, 18:14 »
Gracias Ogramar,

tomo nota sobre la notación abreviada (shortand).

551
Aprender a programar desde cero / Re:colores CSS equivalencias entre notación hexadecimal rgb y nombres CU01019D
« en: 15 de Enero 2016, 18:10 »
Buenas Ogramar,

He corregido el código CSS. Creo que quedará algo así:

Código: [Seleccionar]
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);
}

He acertado?

552
Aprender a programar desde cero / Re:HTML introducir anclas o referencias para poder saltar de ubicación web CU00717B
« en: 15 de Enero 2016, 17:49 »
Gracias por la respuesta Ogramar, tomo nota de tu aclaración.

Atentamente,

dimiste.

Saludos

553
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS cajas contenedoras crear superposiciones elevar una encima de otra CU01039D#
« en: 15 de Enero 2016, 17:46 »
Respuestas para el ejercicio CU01039D del curso CSS desde cero.

A)
Hay 3 cajas contenedoras que todas ellas están identificadas por id.

B)
El grosor de la caja azul es de 3px y está establecido en unidades: píxeles.

C)
Las cajas se superponen, porque el navegador lee el código por su orden normal. Primero está entrada la caja gris, después la caja azul y al final la caja ocre. Se superponen, porque la caja azul, mediante las propiedades de margin entra en el espacio de la caja predecesora y a su vez la caja ocre entra en el espacio de la caja azul por la misma razón. Así que, mediante el código HTML del ejercicio, está encima la caja ocre, luego la caja azul y al final la caja gris.

D)
Para que la caja gris se sitúe por encima de las demás cajas, tan sólo tenemos que posicionarla en distinta dimensión. Esto lo conseguimos con posicionarla añadiendo a sus propiedades la siguiente propieda: #cajaGris {position: relative;}. El código HTML quedará de la siguiente manera:

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
* {
font-family: sans-serif;
}
#cajaGris {
width: 225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top:20px;
position: relative;
}
#cajaAzul {
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
}
#cajaOcre {
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id ="cajaGris">Caja gris</div>
<div id ="cajaAzul">Caja azul</div>
<div id ="cajaOcre">Caja ocre</div>
</body>
</html>
E)
Código HTML:

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
* {
font-family: sans-serif;
}
#cajaGris {
width: 225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top:20px;
position: relative;
z-index: 1;
}
#cajaAzul {
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
position: relative;
}
#cajaOcre {
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id ="cajaGris">Caja gris</div>
<div id ="cajaAzul">Caja azul</div>
<div id ="cajaOcre">Caja ocre</div>
</body>
</html>

554
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear scrolls CSS en un div cuando el texto excede la capacidad tamaño CU01038D#
« en: 15 de Enero 2016, 01:15 »
Códigos del ejercicio CU01038D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="estilos67.css">
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
</body>
</html>
Código CSS: "estilos67.css"

Código: [Seleccionar]
div {
font-size: 30px;
width: 200px;
height: 200px;
background-color: yellow;
border: solid 2px blue;
overflow: scroll;
}

555
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS desde cero maquetar una web con tres columnas de ancho variable CU01036D
« en: 14 de Enero 2016, 21:39 »
Aquí os dejo los códigos del ejercicio CU01036D 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"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos64.css"/>
<title>Ejemplo float</title>
</head>
<body>
<div id="caja1"><br/>Bienvenidos a aprenderaprogramar.com</div>
<div id="caja2"><br/>Menú<br/><br/>-Cursos<br/><br/>-Humor<br/><br/>-Divulgación<br/><br/></div>
<div id="caja3"><br/><br/>Conoce las últimas novedades del lenguaje<br/>JavaScript.</div>
<div id="caja4"><br/><br/><br/><br/>Espacion reservado para publicidad</div>
<div id="caja5"><br/><br/>Artículo sobre Gimp, un programa de software<br/>libre para el diseño gráfico.</div>
<div id="caja6"><br/>Contacta con nosotros</div>
<div id="caja7"><br/>Aviso legal</div>
</body>
</html>
Código CSS: "estilos64.css"

Código: [Seleccionar]
* {
font-family: arial;
font-size: 14px;
text-align: center;
}
body {
width: 604px;
}
div {
border: solid 1px;
}
#caja1 {
width: 602px;
height: 60px;
background-color: #DEB887;
border-bottom: none;
}
#caja2 {
width: 151px;
height: 181px;
float: left;
border-right: none;
}
#caja3 {
width: 300px;
height: 90px;
float: left;
background-color: #ADD8E6;
}
#caja4 {
width: 150px;
height: 181px;
float: right;
border-left: none;
}
#caja5 {
width: 300px;
height: 90px;
float: left;
background-color: #90EE90;
border-top: none;
}

#caja6 {
width: 301px;
height: 60px;
float:left;
background-color: #DDA0DD;
border-top: none;
}
#caja7 {
width: 301px;
height: 60px;
float: left;
border-left: none;
border-top: none;
}

556
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS alinear div a la derecha o izquierda con float y usar clear both CU01035D#
« en: 14 de Enero 2016, 15:08 »
Subo aquí los códigos del ejercicio CUO1035D 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="estilos60.css"/>
<title>Ejemplo de float</title>
</head>
<body>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div class="limpiador"></div>
</div>
<div id="div9">Texto</div>
<div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12"></div>
</div>
<div id="div13">&lt;&lt;Curso CSS aprenderaprogramar.com&gt;&gt;</div>
</body>
</html>
Código CSS: "estilos60.css"

Código: [Seleccionar]
* {
font-family: arial;
}

div div {
width: 50px;
height: 50px;
margin-right: 5px;
border: solid;
}

#div1 {
background-color: red;
float: left;
}
#div2 {
background-color: blue;
float: left;
}

#div3 {
background-color: purple;
float: left;
}
#div4 {
background-color: grey;
float: left;
}
#div5 {
background-color: orange;
float: left;
}
#div6 {
background-color: pink;
float: left;
}
#div7 {
background-color: brown;
float: left;
}
#div8 {
background-color: green;
float: left;
}
.limpiador {
clear: both;
border: none;
height: 0;
}
#div9 {
background-color: yellow;
margin: 20px 0;
width: 100%;
}
#div10, #div11, #div12 {
width: 200px;
height: 50px;
margin-right: 5px;
float: right;
}
#div10 {
background-color: red;
}
#div11 {
background-color: blue;
}
#div12 {
background-color: yellow;
}
#div13 {
background-color: #DEB887;
clear: both;
width: 100%;
}
Como podemos observar, tanto en el #div9 como en el #div13 he establecido un valor de 100% en la propiedad "width". Esta propiedad sobra, porque por norma general el div es un elemento de tipo block y tiende a ocupar todo el ancho del elemento padre.

557
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS superponer varios div efecto superposición relative y absolute CU01032D
« en: 13 de Enero 2016, 20:41 »
Muy buenas,

aquí dejo los códigos del ejercicio CU01032D del curso CSS desde cero.

Ejercicio 1:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" text="text/css" href="estilos48.css"/>
</head>
<body>
<div id="padre">
<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
</div>
</body>
</html>
A)

Código CSS: "estilos48.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
position: relative;
left: 200px;
top: 100px;
}
#b {
background-color: pink;
}
#c {
background-color: yellow;
}
B)

Código CSS: "estilos49.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
}
#b {
background-color: pink;
position: relative;
right: 50px;
bottom: 50px;
}
#c {
background-color: yellow;
}
C)

Código CSS: "estilos50.css"

Código: [Seleccionar]
div {
border-style: solid;
}
div div {
width: 300px;
height: 300px;
border-style: dashed;
border-color: green;
margin: 40px;
padding: 30px;
}
#a {
background-color: skyblue;
}
#b {
background-color: pink;
}
#c {
background-color: yellow;
position: relative;
left: 450px;
bottom: 300px;
}
Ejercicio 2:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE 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="estilos51.css"/>
<title>Ejemplo de position</title>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Código CSS: "estilos51.css"

Código: [Seleccionar]
#div1 {
width: 600px;
height: 600px;
background-color: yellow;
position: absolute;
}
#div2 {
width: 400px;
height: 400px;
background-color: green;
position: absolute;
}
#div3 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
Ejercicio 3:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE 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="estilos52.css"/>
<title>Ejemplo de position</title>
</head>
<body>
<div id="div1">
<p>&lt;&lt;Esta página web utiliza cookies. Si continuas navegando aceptas el uso de cookies.&gt;&gt;</p>
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Código CSS: "estilos52.css"

Código: [Seleccionar]
#div1 {
height: 100px;
background-color: yellow;
position: fixed;
top: 0;
}
#div2 {
height: 1000px;
background-color: blue;
}
#div3 {
height: 1000px;
background-color: pink;
}
PD: ¿Por qué cuando defino las divisiones "div"s con id="1" o id="2" (es decir, cuando les pongo número como id), después cuando me refiero a los mismos en la hora de estilo no me los reconoce?

558
Aprender a programar desde cero / Re:HTML Ejercicio CU00718B
« en: 13 de Enero 2016, 16:51 »
Gracias,

Jorge Lopez.

Y gracias por la oportación. Se nota mi ignorancia en el tema de los códigos, pero me fascina mucho el tema y poco a poco estoy aprendiendo. Gracias por corregirme, es la única manera de aprender, evidentemente con los cursos que hay en esta página también, porque son excelentes.

Saludos.

559
Aprender a programar desde cero / Re:Ejercicio CU01012D curso CSS
« en: 13 de Enero 2016, 16:47 »
Gracias, Pedro.

Totalmente de acuerdo, me faltaba la etiqueta "</head>" y tenía que cambiar el class="tercera" por class="secundario".

Saludos

560
Aprender a programar desde cero / Re:Ejercicio CSS CU01013D
« en: 13 de Enero 2016, 16:44 »
Buenas tardes,

Pedro.

Ejercicio corregido. Tenías razón.

Páginas: 1 ... 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".