Foros del Web » Creando para Internet » CSS »

Cajas con css

Estas en el tema de Cajas con css en el foro de CSS en Foros del Web. Hola amigos tengo una pregunta es posible hacer una caja como la de la imagen abajo, todo con stylos css: Alguién me podria ayudar con ...
  #1 (permalink)  
Antiguo 26/01/2009, 17:29
Avatar de elfunebrero  
Fecha de Ingreso: julio-2005
Ubicación: Quito
Mensajes: 262
Antigüedad: 12 años, 4 meses
Puntos: 3
De acuerdo Cajas con css

Hola amigos tengo una pregunta es posible hacer una caja como la de la imagen abajo, todo con stylos css:



Alguién me podria ayudar con esto?

Saludos
__________________
Sinmiedos!
Hosting Empresas
  #2 (permalink)  
Antiguo 26/01/2009, 17:47
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Cajas con css

Pues sí, si que se puede...
¿Cómo quieres que te ayudemos si no nos pones un código en el que basarnos...?

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 26/01/2009, 19:27
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Cajas con css

Aresillo
Creo que lo que elfunebrero quiere es que le digamos como hacerlo.

elfunebrero:
Creo que es demasiado! al final de cuentas posiblemente no lo uses, asi que mejor si tienes algun codigo que estas creando y quieres hacerlo similar a esa imagen, entonces asi sera mas facil para nosotros ayudarte!

De lo contrario, no creo que alguien se ponga a hacer ese cuadro solo para darte el codigo.

Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 26/01/2009, 20:12
Avatar de elfunebrero  
Fecha de Ingreso: julio-2005
Ubicación: Quito
Mensajes: 262
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: Cajas con css

Hola lo siento si puse una imagen, lo que esta arriba todo lo tengo en HTML con TABLAS, pero para optimizar tamaño en la pagina web, pense hacerlo con CSS.

Saludos
__________________
Sinmiedos!
Hosting Empresas
  #5 (permalink)  
Antiguo 26/01/2009, 20:51
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Cajas con css

Medidas chino, cuanto mide tu div y tus imágenes, pero medidas definitivas please. Si puedes pasate lás imagenes y vemos que se hace.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #6 (permalink)  
Antiguo 26/01/2009, 21:35
Avatar de elfunebrero  
Fecha de Ingreso: julio-2005
Ubicación: Quito
Mensajes: 262
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: Cajas con css

Cita:
Iniciado por Dalvenjha Ver Mensaje
Medidas chino, cuanto mide tu div y tus imágenes, pero medidas definitivas please. Si puedes pasate lás imagenes y vemos que se hace.

Saludos!!
Hola amigo gracias por responder, mira las medidas como te pongo en la imagen:



El div tiene 575 px de ancho y tiene 2 bloque de 290px y 285 px

Me imagino que en el bloque 1 podria poner con listas: ul y li, pero el otro bloque si no sabria como hacerlo.

Ahh y la altura como se podria hacer para que cuando haya mas datos se haga para abajo tambièn todo.

Saludos
__________________
Sinmiedos!
Hosting Empresas

Última edición por elfunebrero; 26/01/2009 a las 22:58
  #7 (permalink)  
Antiguo 26/01/2009, 22:02
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Cajas con css

Imagino que se te fue un 7 de mas... y que el div es de 575 de ancho... porque un div de 5775 ni en 3 pantallas de 800*600 cabe...

Creo que lo que necesitas, es un curso de CSS, porque luego de hacer ese cuadro, que haras? seguiras tu web con tablas?? o diciendonos si te hacemos los divs??

Es solo mi opinion! nada mas... si te sirve de algo Como hacer divs con CSS te dejo este tutorial para que, no solo hagas tu web, sino que aprendas a hacerlo!

Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #8 (permalink)  
Antiguo 26/01/2009, 23:02
Avatar de elfunebrero  
Fecha de Ingreso: julio-2005
Ubicación: Quito
Mensajes: 262
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: Cajas con css

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Imagino que se te fue un 7 de mas... y que el div es de 575 de ancho... porque un div de 5775 ni en 3 pantallas de 800*600 cabe...

Creo que lo que necesitas, es un curso de CSS, porque luego de hacer ese cuadro, que haras? seguiras tu web con tablas?? o diciendonos si te hacemos los divs??

Es solo mi opinion! nada mas... si te sirve de algo Como hacer divs con CSS te dejo este tutorial para que, no solo hagas tu web, sino que aprendas a hacerlo!

Saludos!

Hola gracias por responder, ya arregle ese 7 demas que se me fue, pero no quiero que me den haciendo algo, sino que me ayuden.

Tengo ya hecho algo:

http://www.surtrek.com/alta_galapagos.html

Pueden verlo en esa web, el recuadro pero alli tambièn tengo una falla, cuando se hace para abajo la caja se monta sobre el texto y se pone encima como puedes verlo:



Aca esta mi codigo:

Código:
}/*MARCO-BARCOS*/
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 575px;
}

.curlycontainer .innerdiv{
background: transparent url(brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
height: 70px;
}
#gal_1 {
   COLOR: #ffffff;
   width: 100%;
   FONT-WEIGHT: bold;
   FONT-SIZE: 11px;
   FONT-FAMILY: tahoma;
   TEXT-DECORATION: none;
   background-color: #009BC9;
   padding-top:2px;
   padding-bottom:2px;
   
}#bloques {width: 100%;
margin: 0 auto;
margin-bottom:50px;
}
#caja1, #caja2, /*#caja3*/ {
text-align:left;
float: left;
}
#caja2 a{
text-align: right;
text-decoration: underline;
COLOR: #004990; 
}
#caja2 a:hover{
text-align: right;
text-decoration: underline;
COLOR: #000000; 
}
#caja1 {
text-align:left;
width:280px;
background-color: #ffffff;
margin-left: 2px!important;
margin-left: 1px;
}
#caja2 {background-color: #ffffff; width: 265px; text-align:left;}
/*#caja3 {background-color: #ffffff; width: 200px;}
/*menu interno*/
.salto {clear: both;}
#centro {
text-align:center;
Estoy mal, re mal o que debo hacer...

Perdon pero por algo pregunto... para aprender!

Saludos
__________________
Sinmiedos!
Hosting Empresas
  #9 (permalink)  
Antiguo 27/01/2009, 02:21
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Cajas con css

Pues eso es lo que se pedía desde el post 2, el código...
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #10 (permalink)  
Antiguo 27/01/2009, 05:46
 
Fecha de Ingreso: enero-2008
Mensajes: 268
Antigüedad: 9 años, 11 meses
Puntos: 11
Respuesta: Cajas con css

anda que como sois.
Mira elfunebrero, échel un ojo a est http://www.araudi.net/migracion/migr...sin_dolor.html
Es un tutorial que hizo Mikmoro para la migracion de tablas a css. A lo emjor te puede ayudar en tu tarea.
  #11 (permalink)  
Antiguo 27/01/2009, 06:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cajas con css

Pues yo lo veo como dos lista desordenadas (dl)
Información importante dentro de un "span" para el fondo de color y demás propiedades.
lista de precios es el típico "dt" y los precios son "dd".

Y con las imágenes igual. Otra lista con imágenes en línea y flotadas a la derecha, algo de margen y poco más.

Es sólo otra forma de hacerlo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 27/01/2009, 09:16
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Cajas con css

Hola, sorry por la demora, he estado en reunión con el equipo de trabajo aqui, asi que no he estado fijandome, a ver te iría bien esta?:



El código para esta sería:

Puedes verla en funcionamiento aqui: Caja.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Enlightenment - creando una caja para el amigo ecuatoriano</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
font-family: verdana,arial;
font-size:12px;
}

div.caja{
position:relative;
left:0;
top:200px;
width:575px;
min-height:50px;
margin:auto;
overflow:hidden;
padding-bottom:7px;
border:1px solid #056d96;
}

*html div.caja{
height:50px;
overflow:visible;
}

div.caja h5{
margin:0;
padding:0;
display:block;
width:100%;
height:19px;
padding-top:3px;
text-align:center;
color:#fff;
font-size:12px;
background:#056d96;
text-transform:capitalize;
}

div.caja div.izquierda{
display:block;
position:relative;
width:290px;
float:left;
min-height:50px;
overflow:hidden;
padding-bottom:5px;
}

*html div.caja div.izquierda{
height:50px;
overflow:visible;
}


div.caja div.derecha{
display:block;
position:relative;
width:285px;
float:left;
min-height:50px;
overflow:hidden;
padding-bottom:5px;
}

*html div.caja div.derecha{
height:50px;
overflow:visible;
}

div.caja div.izquierda ul{
margin:0;
padding:0;
list-style:none;
color:#5b5b5b;
margin-top:17px;
margin-left:10px;
}

div.caja div.izquierda ul li{
margin-top:8px;
}

strong{
color:#056d96;
}
div.caja div.izquierda ul li span{
font-weight:bold;
}

div.caja div.izquierda ul li.link{
margin-top:15px;
}

div.caja div.izquierda ul li a{
display:block;
text-decoration:none;
color:#cfcfcf;
background:#056d96;
width:100px;
text-align:center;
padding-top:1px;
padding-bottom:1px;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

div.caja div.izquierda ul li a:hover{
background:#5493ac;
color:#fff;
border:1px solid #9b9b9b;
}


div.caja div.derecha p{
margin:0;
padding:0;
width:100%;
text-align:left;
text-indent:10px;
margin-top:8px;
padding-top:2px;
padding-bottom:4px;
color:#6b6b6b;
}

div.caja div.derecha ul{
margin:0;
padding:0;
list-style:none;
width:200px;
height:75px;
padding:1px;
overflow:hidden;
margin-left:10px;
}

div.caja div.derecha ul li{
display:block;
width:33px;
height:33px;
margin-right:5px;
margin-bottom:5px;
float:left;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow:hidden;
}

div.caja div.derecha a{
display:block;
text-decoration:none;
color:#cfcfcf;
background:#056d96;
width:100px;
text-align:center;
margin-top:5px;
padding-top:1px;
padding-bottom:1px;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left:110px;
}

div.caja div.derecha a:hover{
background:#5493ac;
color:#fff;
border:1px solid #9b9b9b;
}

</style>
</head>
<body>
<div class="caja">
<h5>important information</h5>
<div class="izquierda">
<ul>
<li><strong>Number of rooms:</strong> 10 rooms</li>
<li><strong>Prices</strong></li>
<li><span>Double Room:</span> USD XXXX</li>
<li><span>Single Room:</span> USD XXXX</li>
<li class="link"><a href="#">More prices</a></li>
</ul>
</div>
<div class="derecha">
<p><strong>Maximun Capacity:</strong> 20 people</p>
<ul>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
</ul>
<a href="#">Ask our agents</a>
</div>
</div>
</body>
</html>
He metido bordes redondeados alas imágenes y también a los links, pero no se verán en ie ni ópera, los puedes sacar si quieres, y cambia las imágenes que esas son mías para probar, tus imágenes pasalas de 35 x 35 a 33 x 33, te he puesto el código de manera que se pueda entender, separando las propiedades lo más que se podía.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #13 (permalink)  
Antiguo 28/01/2009, 17:34
 
Fecha de Ingreso: febrero-2008
Mensajes: 109
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Cajas con css

Impresionante
__________________
diseño web
posicionamiento web
  #14 (permalink)  
Antiguo 28/01/2009, 19:31
Avatar de elfunebrero  
Fecha de Ingreso: julio-2005
Ubicación: Quito
Mensajes: 262
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: Cajas con css

Que maestro Dalvenjha:

Mis sinceros agradecimientos por ayudarme con este código que lo neceitaba de urgencia!

Saludos y muchas gracias por todo!

Samuell
__________________
Sinmiedos!
Hosting Empresas
  #15 (permalink)  
Antiguo 29/01/2009, 11:56
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Cajas con css

Recién lo veo, de nada tío, mientras se pueda dar una mano todo bien.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
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 12:28.