box css

quiero hacer un rectangulo con los bordes redondeados, donde ira contenida información.... la pregunta es.... como podria hacerla de la forma mas optimizada posible?... la forma que a mi se me ocurre necesita 3 div

http://www.infinisedesign.net/contact/

no soy capaz de entender su codigo fuente... pero creo que esta optimizado agradeceria si alguien me ayuda a entender el concepto, gracias de antemano.

Puedes empezar por buscar en google "bordes redondeados".

Mucha suerte

Hace un par de días, resolvíamos una duda similar a otro compañero.
Aquí hay otro código, que aunque usa algún <div> mas, es más sencillo (a mi ver) de entender.

rizome escribió:

NOTA: Hay código más "pulcro" que este, que probablemente sea el que has encontrado.
- Pongo en rojo, el código que se ha de personalizar.


Creo que si no entiendes esto, mejor revísa algún manual de CSS, para empezar desde el principio.
Suerte.

, oki por pasos xDDDDDDDDD...

<div id="cdialago1">
<div id="top_borde"></div>
<div id="icon">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td><img src="images/icon/photoshop.jpg" title="Photoshop" alt="Photoshop"/></td>
<td><img src="images/icon/dreamweaver.jpg" title="Dreamweaver" alt="Dreamweaver"/></td>
<td><img src="images/icon/flash.jpg" title="Flash" alt="Flash"/></td>
<td><img src="images/icon/windows.jpg" title="Windows" alt="Windows"/></td>
<td><img src="images/icon/mac.jpg" title="Mac" alt="Mac"/></td>
<td><img src="images/icon/office.jpg" title="Office" alt="Office"/></td>
</tr>
</table>
</div>
<div id="bottom_borde"></div>
</div>

este es el codigo que uso y funciona perfectamente.... la cosa es si se puede optimizar mas... es decir limitar lo maximo posible el uso de div....

Lo q importa, es el CSS.
PD: ¿para qué tanta tabla?

es la forma que tengo para ordenar todos los iconos que apareceran.... el css es este...

Código :

.top_borde {
   height: 5px;
   width: 530px;
   background-image: url(../images/top_dialogo.jpg);
   background-repeat: no-repeat;
   background-position: left center;
}
#cdialago1 #icon1 {
   background-color: #F3F3EB;
   width: 530px;
   background-image: url(../images/title_formimpartida.jpg);
   background-repeat: no-repeat;
   background-position: 15px center;
   padding-top: 14px;
   padding-bottom: 14px;
}
#cdialago1 {
   width: 530px;
}
#cdialago2 #funcion1 {
   background-color: #F3F3EB;
   width: 530px;
   padding-top: 14px;
   padding-bottom: 14px;
}


#cdialago1 #icon1 table {
   margin-left: 108px;
}

.bottom_borde {
   background-image: url(../images/bottom_dialogo.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   height: 5px;
   width: 530px;
}

Te he planteado (y explicado) una manera de hacerlo.
Si no la ves suficiente... o apropiada...

Lunatic Lycanthrop escribió:

Suerte

rizome si la veo apropiada, no es algo que valla a utilizar ahora... el topic, el proposito del topic era llegar a un modo de que sea lo mas optimizado posible.... de cara a cargar mas rapido, usar menos codigo etc... no quiero que en ningun momento sientas que no valoro que respondieses... y tampoco opino que tu respuesta sea incorrecta... de todos modos muchas gracias y si se te ocurre algun modo de que en 1 div se haga todo jajajaja seras mi idolo.

Se necesitan tantos elementos, como imágenes quieras introducir.
Se puede hacer con un div, y otros tres elementos, o con cuatro div.
Al final, la sustancia es la misma: poner cada imagen, en la esquina de un contenedor, con lo que pueden cambiar los elementos, y un poco el sistema, pero al final, resulta siendo parecido.