Div con imágenes de borde

Question

¿Cuál es una buena manera de configurar un div de contenedor individual con algunas imágenes de borde que lo rodean (en mi caso solo en los lados izquierdo, inferior y derecho)? Lo tengo centrado en la parte superior de la página, superponiendo todo lo demás (por lo que me gusta ese cuadro de diálogo deslizable estilo OSX).

Aquí está el diseño básico:

alt text http://www.nickawilliams.com/images/misc/layout.jpg

Aquí es lo que he conseguido hasta ahora (puedo evitar una anchura/altura estática para el contenido?):

HTML:

<div class="contentbox"> 
    <div class="contentbox-wrapper" style="width: 400px"> 
     <div class="contentbox-mid" style="height: 200px"> 
      <div class="contentbox-w"></div> 
      <div class="contentbox-content"> 
       Content Box Test 
      </div> 
      <div class="contentbox-e"></div> 
     </div> 
     <div class="contentbox-bottom"> 
      <div class="contentbox-sw"></div> 
      <div class="contentbox-s"></div> 
      <div class="contentbox-se"></div> 
     </div> 
    </div> 
</div> 

CSS:

.contentbox { 
    width: 100%; 
    position: fixed; 
    z-index: 2; 
} 

.contentbox-wrapper { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.contentbox-mid { 
    height: 100px; 
} 

.contentbox-w { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_w.png"); 
    float: left; 
} 

.contentbox-content { 
    width: auto; 
    height: 100%; 
    background: #e8e8e8; 
    float: left; 
} 

.contentbox-e { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_e.png"); 
    float: left; 
} 

.contentbox-bottom { 
    width: 300px; 
    height: 30px; 
} 

.contentbox-sw { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_sw.png"); 
    float: left; 
} 

.contentbox-s { 
    height: 30px; 
    background: transparent url("../../images/contentbox_s.png"); 
    margin-left: 30px; 
    margin-right: 30px; 
} 

.contentbox-se { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_se.png"); 
    float: right; 
    position: relative; 
    bottom: 30px; 
} 

Answer 1

Si bien nada de esto es recomendable (combinación de marcado y diseño), a menudo el integrador no es el que recibe la última palabra. Sin embargo, debes intentar mantener todo lo más limpio posible.

Su estructura es prácticamente el único tipo de estructura que puede usar para sus extremos, aunque si su ancho es estático (300px?), Le aconsejo tener su fondo div como una imagen más grande repetida verticalmente.

Tendría entonces un tipo de pie de página dentro de su div, donde podría colocar las dos esquinas inferiores y la imagen inferior, todo en una sola imagen. En lugar de tener 5 divs dentro de uno, solo tendrías uno. Tenga en cuenta que en entornos más grandes, esto también significa que el usuario puede descargar 2 imágenes más en paralelo (4 como máximo desde un solo host), lo que hace que la descarga general de la página sea más rápida.

Obviamente, esto no funciona si su ancho es relativo al elemento principal o puede cambiar de cualquier manera.

---

EDIT: como es el caso que ha especificado la anchura es variable, no creo que hay una manera más limpia luz para hacerlo HTML se refiere.

Sin embargo, si aún desea maximizar la velocidad de descarga de las imágenes, considere usar sprites: las imágenes del este y oeste pueden colocarse dentro de la misma imagen más grande: lo único que modifica es la posición de fondo:

background-position: 32px 0px; /* this should move the background to the right */ 

La ventaja es que solo necesita una imagen, se necesitan menos conexiones para descargarlas para el cliente (más rápido) y ocupa tanto lugar.

Espero que esto ayude.

Answer 2

Puede lograr esto con un margen de marcación menor utilizando la técnica de "puertas correderas". Básicamente, solo asegúrate de que las imágenes de cada esquina sean lo suficientemente grandes para que se superpongan un poco cuando la caja tenga el tamaño máximo que esperas que sea.Vea este ejemplo para un cuadro con imágenes en los cuatro lados:

<style> 
div.box { float: left; } 
div.tl { background: transparent url('topleft.gif') no-repeat top left; padding-top: 8px; padding-left: 8px; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; height: 8px; padding-left: 8px; } 
div.tr { background: transparent url('topright.gif') no-repeat top right; padding-right: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="tr"> 
     <div class="tl"> 
      Lorem ipsum dolor sit amet... 
     </div> 
    </div>  
    <div class="br"> 
     <div class="bl"></div> 
    </div> 
</div> 

Para un cuadro con imágenes sólo en tres lados el código sería aún más simple, ya que sólo necesitaría dos divs para adjuntar imágenes a:

<style> 
div.box { float: left; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; padding-left: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="br"> 
     <div class="bl"> 
     Lorem ipsum dolor sit amet... 
     </div> 
    </div> 
</div> 

Estos ejemplos le proporcionarán una caja elástica que puede crecer tanto como desee, siempre que el tamaño de las imágenes que contienen las esquinas y los bordes sea suficiente. Tenga en cuenta también que el "relleno" establecido en los divs que lo contienen no debe ser menor que el ancho/radio de la esquina de sus imágenes, aunque ciertamente puede ser mayor si lo desea. A continuación se muestran un par de imágenes para ilustrar el método. Feliz codificación!

The corner/border graphics http://www.mikrogroove.com/stackoverflow/corners.gif

Images overlapping http://www.mikrogroove.com/stackoverflow/overlapping.gif