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 - freddychpo

Páginas: [1]

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

« en: 28 de Octubre 2015, 02:52 »

Hola

La linea me olvide de descomentarla.

En mi navegador se ve bien, no especificamente con los valores que me dicen que use en la nota pero se asemeja.

En mi caso se ve igual el ejercicio con valor both o right para mi propiedad clear de #cajaContacto.

Para el caso de la #cajaContenido2 le di valor de height:37.5% por lo siguiente:

#cajaCaecera tiene height : 20%
#cajaContenido1 tiene height: 37.5%
#cajaContenido2 tiene height: 37.5%
#cajaContacto tiene height : 5%

Sumando height de cada elemento tengo lo sgte:
20% + 37.5% + 37.5% + 5% = 100%

En mi caso si comento el height de mi #cajaContacto se reduce el height.

Revisando y probando el codigo que usaste, me parece que se muestra diferente la pagina cuando usas todo el codigo en un archivo (como el que probaste) frente a un archivo html en donde llamas a un archivo css (como lo que use yo). Pero, la pregunta es ¿por que?

Me parece que la propiedad height toma otros valores pero no estoy seguro.

De todas maneras te dejo un link con la imagen de mi ejercicio.

https://www.dropbox.com/s/34191wqn6lm5u31/ejer36.png?dl=0

Agradeceria la respuesta.

Muchas gracias

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

« en: 24 de Octubre 2015, 16:02 »

Citar

Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

(...)

html:

Código: [Seleccionar]

<html>
	<head>
		<title>Ejercicio 36 - CSS</title>
		<link rel="stylesheet" href="styleExer36.css">
		<meta charset="utf-8">
	</head>
	<body>
		<div id="cajaCabecera">
		<br> <br> <br> 
			Bienvenidos a aprenderaprogramar.com
		</div>
		 
		<div id="cajaMenu">
				Menu: 
				<br> <br>
				- Cursos 
				<br> <br>
				- Humor 
				<br> <br>
				- Divulgacion
				<br> <br>
				- Etc
		</div>
		
		<div id="cajaPublicidad">
			<br> <br> <br> <br> <br> <br>
			Espacio reservado para publicidad 
		</div>
		
		<div id="cajaContenido1"> 
			<br> <br> <br> 
			Conoce las últimas novedades del lenguaje JavaScript.
		</div>

		<div id="cajaContenido2">
			<!--Artículo sobre Gimp, un programa de software libre para el diseño gráfico. -->
		
		</div>
		
		<div id="cajaContacto" style="font-size:15px;">
			Contacta con nosotros
		</div>
		
		<div id="cajaFooter">Aviso legal</div>
	</body>
</html>

css:

Código: [Seleccionar]

 
*{
	margin:0px; 
	padding:0px;
	font-family:arial;
	font-size:20px;
}

#cajaCabecera{
	width:100%;
	height:20%;
	background-color:#DEB887;
	text-align:center;
}

#cajaMenu{
	width:20%;
	height:75%;
	background-color:#FBE13A;
	float:left;
}

#cajaContenido1{
	background-color:#ADD8E6;
	width:60%;
	height:37.5%;
	float:left;
	text-align:center;
}

#cajaPublicidad{
	width:20%;
	height:75%;
	background-color:green;
	float:right;
	text-align:center;	
}


#cajaContenido2{
	width:60%;
	height:37.5%;
	background-color:#90EE90;
	float:right;
}

#cajaContacto{
	width:50%;
	height:5%;
	background-color:#DDA0DD;
	clear:right;
	float:left;
	
}

#cajaFooter{
	width:50%;
	height:5%;
	float:left;
	background-color:grey;
}

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

« en: 24 de Octubre 2015, 04:12 »

Si, hare pruebas para ir entendiendo que afecta y que no afecta.

Gracias por la repuesta Ogrammar.

Saludos tambien

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D

« en: 23 de Octubre 2015, 05:59 »

Ogramar quiero saber si estoy correcto en algo.

Revisando el codigo de wilfrido llegue a la conclusion de que el espacio entre el parrafo y el div se muestra no solo porque el div envolvente tiene el clear establecido, sino tambien por la propiedad margin-bottom:20px del selector id #ocho.

Código: [Seleccionar]

 #ocho {width:50px;height:50px; margin-right:5px; margin-bottom:20px; background-color:gray; float:left;}

#nueve {width:100%; margin-top:20px; margin-bottom:20px; background-color:yellow; clear:both;  }

Lo que hace que se vea el espacio entre el parrafo y el div es especificamente dos cosas:
- La propiedad margin-bottom:20px en el sel id #ocho
- El clear establecido en el div

¿Estoy en lo correcto?

Si estuviera en lo correcto, ¿No importa el margin-top:20px del sel #nueve?

Agredecere la respuesta.

Muchas gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Ejercicio 35 - CSS clear CSS both ¿float no funciona? - CU01035D

« en: 23 de Octubre 2015, 03:51 »

Tienes toda la razon pedro,,

Aqui dejo mi codigo corregido usando la propiedad clear

html:

Código: [Seleccionar]

<html>
	<head>
		<title> Ejercicio 35 - CSS</title>
		<link rel="stylesheet" href="styleExer35.css">
	</head>
	<body>
		<div id="caja1" class="cajasleft">Caja 1</div>
		<div id="caja2" class="cajasleft">Caja 2</div>
		<div id="caja3" class="cajasleft">Caja 3</div>
		<div id="caja4" class="cajasleft">Caja 4</div>
		<div id="caja5" class="cajasleft">Caja 5</div>
		<div id="caja6" class="cajasleft">Caja 6</div>
		<div id="caja7" class="cajasleft">Caja 7</div>
		<div id="caja8" class="cajasleft">Caja 8</div>
		
		<div id="fondo">Texto de fondo </div>
		
		<div id="caja9" class="cajasright">Caja 9 </div>
		<div id="caja10" class="cajasright">Caja 10 </div>
		<div id="caja11" class="cajasright">Caja 11 </div>
		
		<div id="caja12"> Curso CSS aprenderaprogramar.com </div>
		
	</body>
</html>

css:

Código: [Seleccionar]

.cajasleft{
	width:50px;
	height:50px;
	margin-right:5px;
	float:left;
}

.cajasright{
	width:200px;
	height:50px;
	margin-right:5px;
	float:right;
}

#caja1 {background-color:yellow;}
#caja2 {background-color:green;}
#caja3 {background-color:brown;}
#caja4 {background-color:red;}
#caja5 {background-color:grey;}
#caja6 {background-color:black;}
#caja7 {background-color:orange;}
#caja8 {background-color:purple;}

#caja9{background-color:red;}
#caja10{background-color:blue;}
#caja11{background-color:orange;}

#caja12{
	background-color:#DEB887;
	clear:right;
	text-align:center;
}


#fondo {
	background-color:yellow;
	margin-top:20px;
	margin-bottom:20px;
	width:100%;
	height:250px;
	clear:left;
	text-align:center;
}

Solo tengo una pregunta, ¿Por que al darle valor a mi propiedad margin-top de mi caja con id="fondo" no obtengo ningun resultado ?

No puedo generar un margen por arriba de mi caja.

Agradeceria la respuesta.

Muchas gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear diseños web usando propiedades CSS float y clear cajas CU01035D

« en: 21 de Octubre 2015, 04:51 »

Citar

Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.

b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.

c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.

d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>

html:

Código: [Seleccionar]

<html>
	<head>
		<title> Ejercicio 35 - CSS</title>
		<link rel="stylesheet" href="styleExer35.css">
	</head>
	<body>
		<div id="caja1" class="cajasleft">Caja 1</div>
		<div id="caja2" class="cajasleft">Caja 2</div>
		<div id="caja3" class="cajasleft">Caja 3</div>
		<div id="caja4" class="cajasleft">Caja 4</div>
		<div id="caja5" class="cajasleft">Caja 5</div>
		<div id="caja6" class="cajasleft">Caja 6</div>
		<div id="caja7" class="cajasleft">Caja 7</div>
		<div id="caja8" class="cajasleft">Caja 8</div>
		
		<div id="fondo">Texto de fondo </div>
		
		<div id="caja9" class="cajasright">Caja 9 </div>
		<div id="caja10" class="cajasright">Caja 10 </div>
		<div id="caja11" class="cajasright">Caja 11 </div>
		
		<div id="caja12"> Curso CSS aprenderaprogramar.com </div>
		
	</body>
</html>

css:

Código: [Seleccionar]

.cajasleft{
	width:50px;
	height:50px;
	margin-right:5px;
	float:left;
}

.cajasright{
	width:200px;
	height:50px;
	margin-right:5px;
	float:right;
}

#caja1 {background-color:yellow;}
#caja2 {background-color:green;}
#caja3 {background-color:brown;}
#caja4 {background-color:red;}
#caja5 {background-color:grey;}
#caja6 {background-color:black;}
#caja7 {background-color:orange;}
#caja8 {background-color:purple;}

#caja9{background-color:red;}
#caja10{background-color:blue;}
#caja11{background-color:orange;}

#caja12{background-color:#DEB887;}


#fondo {
	background-color:yellow;
	margin-top:20px;
	margin-bottom:20px;
	width:100%;
}

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Ejercicio 32 CSS - propiedad position static relative absolute fixed CU01032D

« en: 08 de Octubre 2015, 04:58 »

Hola Pedro,

Si, justo me di cuenta del espacio cuando probe el codigo en mi navegador.

Gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS posicionar div propiedad position static relative absolute fixed CU01032D

« en: 07 de Octubre 2015, 07:03 »

Citar

Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.

html

Código: [Seleccionar]

<html>
	<head> 
		<title> Ejercicio 32 - CSS </title>	
		<link rel="stylesheet" href="estilosEjer32.css" >
	</head>
	<body>
		<div id="divPadre">
			<div id="Box1" class="box"></div>
			
			<div id="Box2 " class="box"></div>
			
			<div id="Box3" class="box"></div>
		</div>		
	</body>
</html>

css

Código: [Seleccionar]

.box{
	width:300px;
	height:300px;
	margin:40px;
	padding:30;
}

#Box1 {
	background-color:grey;
	position:relative; left:200px; top:100px;
	}
	
#Box2 {
	background-color:yellow;
	position:relative; right:50px; bottom:50px;
	}
	
#Box3 {
	background-color:green;
	position:relative; left:450px; bottom:300px;
	}

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS hacer que se muestre un color de fondo si falla la carga de imagen CU01030D

« en: 11 de Septiembre 2015, 03:32 »

html:

Código: [Seleccionar]

<html>
	<head> 
		<title> Ejercicio 30 - CSS </title>
		<link rel="stylesheet" style="text/css" href="estiloejer30.css">
		<body>
			<div id="div1">
				BOX 1
			</div>
			
			<div id="div2">
				BOX 2
			</div>
			
			<div id="div3">
				BOX 3
			</div>
			
			<div id="div4">
				BOX 4
			</div>
		</body>
	</head>
</html>

CSS

Código: [Seleccionar]

div{
		width:250px;
		height:250px;
		margin: 30px;
		padding: 30px;
}
 #div1{background-image:url("hotcreations.jpg");
	   background-color:blue;}
 #div2{background-image:url("crosstownrebels.jpg");
	   background-color:green;}
 #div3{background-image:url("philweeks_logo.jpg")
	   background-color:yellow;}
 #div4{background-image:url("phil-weeks-jack-to-my-groove-ep.jpg")
	   background-color:gray;}

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Padding y margin CSS márgenes y rellenos. Top, right, bottom, left. (CU01029D)

« en: 20 de Agosto 2015, 08:45 »

Una consulta Ogramar,

Para la pregunta a) Por que le sumas 70px? De donde sale el 70px? No seria solo 50px? Grosor del borde por izquierda 10px y grosor del borde por derecha 40px, lo que nos resulta como suma 50px.

Y seria 250px + 45px+60px + 50px= 405px.

Agradeceria tu respuesta, gracias.

Páginas: [1]

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

Noticias: