Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: freddychpo en 24 de Octubre 2015, 16:02
-
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:
<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:
*{
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;
}
-
Hola!
¿Por qué tienes comentada la línea esta?
<!--Artículo sobre Gimp, un programa de software libre para el diseño gráfico. -->
Al probar a visualizar no se veía bien como pedía el ejercicio, para lograr que se vea como pedía el ejercicio he tenido que cambiar el clear de #cajaContacto dejándolo así:
#cajaContacto{
width:50%;
height:5%;
background-color:#DDA0DD;
clear:both;
float:left;
}
Hay algunas cosas que no se visualizan bien al menos en mi navegador por ejemplo la cajaContenido2
En #cajaContenido2 definir height parece que no tiene ningún efecto
Este es el código que he probado
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
*{
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:both;
float:left;
}
#cajaFooter{
width:50%;
height:5%;
float:left;
background-color:grey;
}
</style>
</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>
Revisa hilos de otros compañeros para obtener ideas:
https://www.aprenderaprogramar.com/foros/index.php?topic=2585.0
https://www.aprenderaprogramar.com/foros/index.php?topic=2870.0
https://www.aprenderaprogramar.com/foros/index.php?topic=2453.0
https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0
Saludos!
-
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 (https://www.dropbox.com/s/34191wqn6lm5u31/ejer36.png?dl=0)
Agradeceria la respuesta.
Muchas gracias :)
-
Hola!
Si el código es el mismo no debe haber diferencias en la visualización cuando se tiene en dos archivos (html por un lado y css por otro) respecto a cuando se tiene en uno.
En la imagen que has puesto con cómo visualizas el ejercicio, lo que se ve es lo que pedía el ejercicio.
(https://photos-1.dropbox.com/t/2/AAAtJKPKKjuMJKlUDWNpFA3esFfIHMjbQxUKsizY5Cmqgw/12/290060059/png/32x32/1/1446109200/0/2/ejer36.png/CJvup4oBIAEgAiADIAUgBygCKAc/QHwvUcki5ZQZeF6emeVxlpCS2e3IqSE8GfI7yov43wk?size=1280x960&size_mode=2)
Pero en mi navegador no se ve así. Para asegurarte de la corrección del código, es conveniente que lo pruebes al menos en dos navegadores.
Hay una cosa que no está bien en tu código: estás usando <br/> como forma de colocar los elementos. Esto no es aconsejable ya que no se trata de maquetación basada en css.
Cuando se usa float puede haber problemas con height por lo que se explica en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=740:clear-css-both-ifloat-no-funciona-iel-texto-no-envuelve-una-imagen-html-por-que-de-problemas-cu01035d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203 pienso que ahí puede estar el problema ya que distintos navegadores pueden interpretarlo distinto
Saludos!