Cajas con css

[elfunebrero]

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

[Aresillo]

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

Ares

[Calizman]

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!

[elfunebrero]

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

[Dalvenjha]

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

[elfunebrero]

Iniciado por Dalvenjha

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

[Calizman]

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!

[elfunebrero]

Iniciado por CaLiZzZ

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

[Aresillo]

Pues eso es lo que se pedía desde el post 2, el código...

[javi_cassi]

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.

[kseso?]

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

[Dalvenjha]

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

[juanota]

Impresionante

[elfunebrero]

Que maestro Dalvenjha:

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

Saludos y muchas gracias por todo!

Samuell

[Dalvenjha]

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

Saludos!!