Foros del Web » Creando para Internet » CSS »

maquetacion de una aplicación WEB Un reto

Estas en el tema de maquetacion de una aplicación WEB Un reto en el foro de CSS en Foros del Web. Hola chicos, tengo como reto hacer un entorno grafico para una aplicación web. Quiero que luzca muy similar a una aplicación de escritorio. La maqueta ...
  #1 (permalink)  
Antiguo 08/01/2011, 19:06
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
maquetacion de una aplicación WEB Un reto

Hola chicos, tengo como reto hacer un entorno grafico para una aplicación web. Quiero que luzca muy similar a una aplicación de escritorio.



La maqueta que tengo implica altos y anchos del 100% de la pantalla pero tengo problemas con lso mismos, quiciera que vieran la imagen que necesito maquetar y que me ayudarán si es posible.



He intentado cosas como:
Código HTML:
html,body{
margin:0px;
height:100%;
}
div.contenedor{
width: 100%;
background-color:#DFE8F6;
height:100%;
overflow:scroll;
}
div.menu-superior{
width:100%;
height:34px;
background-color:#999999;
}
div.menu-lateral{
width: 275px;
height: 100%;
margin: 10px 0px 10px 10px;
background-color:#000000;
}
Muchisimas gracias por su ayuda
  #2 (permalink)  
Antiguo 08/01/2011, 19:27
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: maquetacion de una aplicación WEB Un reto

html:

Cita:
<div id="menu">menú superior 100% ancho de la pantalla</div>
<div id="columnleft">contenido izquierda</div>
<div id="columnright">contenido derecha</div>
<div id="footer">contenido del footer</div>

CSS:

Cita:
*{margin:0; padding:0; outline:0; border:0;}
#menu{background:#666; width:100%; margin:10px 0;}
#columnleft{background:#666; width:35%; margin:0 0 10px 0; float:left;}
#columnright{background:#666; width:60%; margin:0 0 10px 5%; float:left;}
#footer{clear:both; background:#666;}
Te ayude, espero qué tu imaginación realize lo que buscas ;)
  #3 (permalink)  
Antiguo 08/01/2011, 20:34
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
Respuesta: maquetacion de una aplicación WEB Un reto

Hola,

Gracias por tu respuesta, pero en tu codigo no se contempla el heigh 100% sabes como lograrlo??? que se ocupe el 100% de la pantalla en lo alto... y qeu solo salga netscroll en el div del contenido??

CHAO y de nuevo gracias!!
  #4 (permalink)  
Antiguo 08/01/2011, 20:56
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: maquetacion de una aplicación WEB Un reto

HTML:

Cita:
<div id="menu">menú superior 100% ancho de la pantalla</div>
<div id="columnleft">contenido izquierda</div>
<div id="columnright">contenido derecha</div>
<div id="footer">contenido del footer</div>
CSS:

Cita:
*{margin:0; padding:0; outline:0; border:0; height:100%;}
#menu{background:#666; width:100%; height:18%; margin:0 0 2% 0;}
#columnleft{background:#666; width:35%; height:58%; margin:0 0 2% 0; float:left;}
#columnright{background:#666; width:60%; height:58%; margin:0 0 2% 5%; float:left;}
#footer{clear:both; background:#666; height:16%;}
Hay gran recursos para aprender, y pues no se acostumbre a pedir las cosas, acostumbrese a retarse usted mismo a lograr lo que quiere, de en caso de no lograr lo que quiere, tener un código base donde usted hara lo que quiere y aquí siempre se le ayudara.

Saludos!
  #5 (permalink)  
Antiguo 08/01/2011, 22:13
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
Respuesta: maquetacion de una aplicación WEB Un reto

Código CSS:
Ver original
  1. div#ancho100 {
  2. width: 100&#37;; /* en esta linea sustituye los signos que estan deltante del 100 por el signo de porcierto (%) */
  3. height: 18%;
  4. margin: 0 0 2% 0;
  5. }
  6.  
  7. div#contenidoleft {
  8. width: 60%;
  9. height: 80%;
  10. float:left;
  11. margin: 0 0 0 2%;
  12. }
  13.  
  14. div#contenidoright {
  15. width: 34%;
  16. height:80%;
  17. margin: 0 2%;
  18. float:left;
  19. }

Saludos
  #6 (permalink)  
Antiguo 08/01/2011, 22:31
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
Respuesta: maquetacion de una aplicación WEB Un reto

COmprendo, habría que poner todo en % pero lo que sucede es que yo quiero que el menu superior y las margenes siempre sean las mismas si lo hago con porcentajes estas variaran dependiendo del monitor...

hay alguna manera de lograr que sean en PX el menu superior y las margenes?

hasta luego y gracias
  #7 (permalink)  
Antiguo 08/01/2011, 22:56
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
Respuesta: maquetacion de una aplicación WEB Un reto

estaria bien si hago lo siguiente:

-Que el menu mida
100% ancho
y una altura de 15 pixeles (por ejemplos)

-Que los cuadros del contenido midan:
300 pixeles de ancho
pero siempre el 100% de alto

Es asi como quieres que este?.
  #8 (permalink)  
Antiguo 09/01/2011, 12:35
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
Respuesta: maquetacion de una aplicación WEB Un reto

Kurozaki.

Muchas gracias por tu ayuda, sería como esto:

-Que el menu mida
100% ancho
y una altura de 15 pixeles (por ejemplos)

- que los cuadros midan:

el primero ( que sería como otro menu )
300 pixeles de ancho
pero siempre el 100% de alto

El segundo
que mida 100% de ancho es decir 100% - 300px ( 100% menos 300px )
y que también mida 100% alto.

La dificultad que tengo ahora es que al ponerle a los divs de contenido 100% ( de alto ) suman los 15 px del menu superior mas el 100%. entonces se genera un scroll vertical.

De nuevo muchas gracias!!

Última edición por mafima; 09/01/2011 a las 13:22
  #9 (permalink)  
Antiguo 11/01/2011, 13:34
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: maquetacion de una aplicación WEB Un reto

Otra posibilidad más entre muchas otras.
Mantengo el menú superior siempre fijo en la pantalla.
Le doy posición absoluta a las dos columnas laterales.
Para las dos establezco la altura como auto en lugar de 100%. (height:auto)
A las dos le doy la propiedad top:15px (suponiendo que el menú tiene 15 px de altura) y bottom:0
La columna izquierda queda alineada a la izquierda y a la columna derecha le doy la posición right:0 y left:300px y el ancho con width:auto
Todo esto te asegura que la pantalla siempre se cubra. La barra de desplazamiento sólo aparece si el contenido sobrepasa la altura de la ventana del navegador.
De esta forma también se evita utilizar la propiedad float.
Si necesitas añadir un pie, la cosa se complica un poco más, pero el esquema sigue siendo el mismo.
Conviene añadir un ancho mínimo para la página que no he incluido.

<style type="text/css">
body {
margin:0;
}
#izda {
background-color: #456789;
bottom: 0;
position: absolute;
top: 15px;
width: 300px;
}
#dcha {
background-color: #FF6677;
bottom: 0;
height: auto;
left: 300px;
position: absolute;
right: 0;
top: 15px;
width: auto;
}
#menu {
background-color: #222222;
bottom: 0;
height: 15px;
position: fixed;
top: 0;
width: 100%;
}
</style>

<body>
<div id="menu"></div>
<div id="dcha"></div>
<div id="izda"></div>
</body>
  #10 (permalink)  
Antiguo 11/01/2011, 14:41
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
Respuesta: maquetacion de una aplicación WEB Un reto

Te dejo este codigo. (Sin fixed y sin auto, con todo al 100%)

Código HTML:
Ver original
  1. </head><title>Reto</title>
  2. <style type="text/css">
  3. * {border:0; margin:0; padding:0;}
  4. div#container {width:100%; height:100%;}
  5.  
  6. div#menu {width:100%; height:15px; background:#00F; position:absolute;}
  7. div#boxone {width:300px; float:left; height:100%; margin-top:15px; background:#FF0; position:absolute;}
  8. div#boxtwo {width:100%; float:left; height:100%; margin-left:300px; margin-top:15px; background:#000; position:absolute;}
  9.  
  10. </head>
  11.  
  12. <div id="container">
  13.     <div id="menu"></div>
  14.     <div id="boxone"></div>
  15.     <div id="boxtwo"></div>
  16. </div>
  17.  
  18. </body>
  19. </html>

para los margenes, aumenta margin-top para el margen entre los dos contenedores y el menu.
Para el margen entre los dos contenedores, aumenta margin-left.

Más dudas? Aqui estamos
  #11 (permalink)  
Antiguo 20/01/2011, 23:06
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
Respuesta: maquetacion de una aplicación WEB Un reto

Hola a todos,

gracias por responder. estuve haciendo pruebas y el codigo que me pego kurozaki genera un poco de scroll vertical y un scroll horizontal.

La solución que propone sanxuan se ve perfecto en mozilla pero en internet explorer 8 se ve mal ( nada semejante a lo que necesitamos )

Estoy pensando la posibilidad de mejor usar javascript, ya que no encuentro una manera de hacerlo bien para todos los navegadores solo con css.

A todos de nuevo muchas gracias!!
  #12 (permalink)  
Antiguo 21/01/2011, 17:27
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: maquetacion de una aplicación WEB Un reto

Mmmm... no caigas en javascript, intentalo con CSS, lo conseguiras.
  #13 (permalink)  
Antiguo 21/01/2011, 17:46
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: maquetacion de una aplicación WEB Un reto

Yo veo ese código perfectamente en explorer.
Obviamente sólo responde a la idea de llenar la totalidad de la pantalla. No se tienen en cuenta los márgenes entre cada una de las zonas, aunque es sólo cuestión de modificar las propiedades top, left, etc.
Tampoco incluye los scroll pero parece que ya los tenías resueltos en el código original. Debería aparecer también en el menu lateral, por si se minimiza la pantalla verticalmente.
Si explicas lo que falla, puede que sepamos ayudarte.
Por cierto, asegúrate de estar usando el DOCTYPE, sino Explorer puede no estar mostrando correctamente el contenido.

Última edición por sanxuan; 21/01/2011 a las 17:51
  #14 (permalink)  
Antiguo 22/01/2011, 00:08
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 20 años, 11 meses
Puntos: 24
Respuesta: maquetacion de una aplicación WEB Un reto

Puse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


y funciono en explorer perfectamente

muchas gracias a todos problema resuelto!!

Etiquetas: maquetacion, reto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:08.