HTML: qué está creando un borde en esta página web

Estoy tratando de entender esta página web: http://www.canadianliving.com/food/slow_cooker_beef_stew.php

Está dividido en varias secciones donde cada sección tiene un borde a su alrededor. Por ejemplo, a la derecha del título "Estofado de ternera en olla de cocción lenta" hay una imagen que dice "probado hasta la perfección". Inmediatamente a la derecha de esto hay un borde que lo separa de un anuncio. Este borde se extiende hacia abajo y separa la sección de la sección "Contenido relacionado" a continuación.

Pero, ¿qué es hacer la frontera? Estoy usando Inspect Element, Computed Style de Chrome, pero ninguna de las etiquetas parece tener un estilo de borde. ¿Qué más puede crear un borde?

(No estoy buscando la mejor manera de hacer un borde; necesito entender cómo lo hacen otras páginas).

EDITAR: según las respuestas de las personas, probé el html a continuación, que no funciona. No entiendo cómo una imagen en un div principal se repite en cada div secundario de tal manera que encaje exactamente a lo largo del borde.

<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >

  <div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>

  <div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>

</div>

preguntado el 12 de junio de 12 a las 13:06

Se trata de un imagen de fondo on #content_container. -

Se hizo a través de una imagen de fondo: #content_container { background: url("http://www.canadianliving.com/media/images/background_02.png?201206051535") 605px 0px repeat-y transparent; } -

3 Respuestas

http://www.canadianliving.com/media/images/background_02.png?201206051535

Es una imagen, no un borde, elimina la imagen para deshacerte del 'borde'.

Deduje esto seleccionando el elemento contenedor y revisando la propiedad de fondo css, para futuras referencias.

Aquí un ejemplo:

<style>

    div#test {

        height:800px;
        width:800px;
        background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
    }
</style>

<div id="test">TestDiv<div>

Tenga en cuenta que este es un boceto aproximado de cómo debería verse. No planeo aprenderte esto sin un poco de esfuerzo. Pruebe w3schools para obtener un tutorial de html/css.

Apuesto a que todos hicimos este tipo de investigación y muchos intentos antes de intentar presentarnos a este tipo de foros.

¡Feliz codificación, buena suerte!

D.

Respondido el 12 de junio de 12 a las 15:06

¿La imagen se ajusta exactamente para que el contenido esté dentro de la imagen que muestra el borde? - user984003

Está en mosaico para lograr esto. CSS: fondo:url([imagen-url])repetir-y; - Digital

No estoy haciendo que eso funcione. Edité la pregunta con lo que probé. - user984003

Gracias por eso, pero no entiendo cómo una imagen en un div principal se repite en cada div secundario de tal manera que encaje exactamente a lo largo del borde. Esto es lo que probé en la edición de mi pregunta anterior. Puedo hacer un solo div y hacer que aparezca la imagen, como lo hiciste tú. ¡Probé bastante y me fue bien con otros CSS! - user984003

El fondo se establece en el div#right_col donde estan los anuncios Ellos tienen un padding-left de 8px (ancho de la imagen de fondo de la sombra) y un background encender content-container con url('/media/images/background_02.png') 0 630px repeat-y.

Respondido el 12 de junio de 12 a las 13:06

Esto no funciona para mí. Estoy editando la pregunta con lo que probé. - user984003

básicamente, es una URL de fondo que se usa como borde sombreado. Por favor, mire el CSS de #content_container en firebug/chrome inspeccionar elemento.

No es un borde sino que se usa como separador.

Respondido el 12 de junio de 12 a las 13:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.