Volver al Foro de Diseño de páginas Web

¿Cómo hacer un DIV con la imagen de las fronteras

  • Drake
  • Beginner
  • Beginner
  • Avatar de Usuario
  • Registrado: Abr 27, 2006
  • Mensajes: 47
  • Loc: Canada
  • Status: Offline

Nota Julio 24th, 2008, 4:03 am

¿Es posible hacer un DIV que, independientemente de las dimensiones, siempre tiene una "frontera" en torno a ella que consiste en imágenes?

Al igual que decir que quiero hacer una DIV aparecen enmarcadas, y disponemos de 4 imágenes:

-- Marco superior
-- Cuadro inferior
-- Borde izquierdo
-- Derecho marco

¿Hay una manera de hacer cada uno de ellos actuará como una imagen de fondo, flotan y proceda a su esquina? O alguna otra solución a este problema?

Las imágenes será de una naturaleza donde la longitud de los lados del dado DIV no importa, por lo que no se preocupe.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 24th, 2008, 4:03 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de Usuario
  • Registrado: Dic 29, 2003
  • Mensajes: 5169
  • Loc: SC-USA
  • Status: Offline

Nota Julio 24th, 2008, 4:37 am

Esto se puede hacer con un poco de marcado extraños. El siguiente es mi solución a las esquinas redondeadas, pero creo que se pueden aplicar estrategias similares.

http://www.myirmo.com/stretchDiv/

Código: [ Select ]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stretchy DIV</title>
<style>
div{margin:0;padding:0;}
p{margin:0;padding:15px;}
h1{margin:0;padding:15px;}</style>
</head>

<body>
<div style="width:50%;margin:0 auto;">
<div style="height:10px;background:url(top-rail.gif) no-repeat;overflow:hidden;">
    <div style="float:right;height:10px;width:10px;background:url(top-cap.gif) no-repeat;"></div></div>
<div style="border-left:1px solid #000;border-right:1px solid #000;clear:both;">
    <h1>Now is the time for all good men to come to the aid of their country.</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
    <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
    <p>Curabitur dui lectus, gravida sed, tincidunt et, elementum a, felis. Donec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pellentesque tincidunt leo. Etiam sed velit. Aenean ligula. Curabitur magna turpis, fermentum ut, imperdiet nec, accumsan id, ligula. Proin et nunc. Fusce vel felis eget nisl porta sodales. Integer sed ante id justo porta imperdiet. Nam placerat ligula non sem. Donec nunc enim, faucibus quis, porttitor et, dictum a, neque. Curabitur interdum felis id nisi. Aliquam eleifend auctor purus. Duis quis nisi. Mauris ac sapien vitae augue tempor vulputate. Mauris accumsan erat vitae lectus. Mauris hendrerit consequat nibh. Donec congue. Aliquam dolor. </p></div>
<div style="height:10px;background:url(bot-rail.gif) no-repeat;">
    <div style="float:right;height:10px;width:10px;background:url(bot-cap.gif) no-repeat;overflow:hidden;"></div></div></div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Stretchy DIV</title>
  6. <style>
  7. div{margin:0;padding:0;}
  8. p{margin:0;padding:15px;}
  9. h1{margin:0;padding:15px;}</style>
  10. </head>
  12. <body>
  13. <div style="width:50%;margin:0 auto;">
  14. <div style="height:10px;background:url(top-rail.gif) no-repeat;overflow:hidden;">
  15.     <div style="float:right;height:10px;width:10px;background:url(top-cap.gif) no-repeat;"></div></div>
  16. <div style="border-left:1px solid #000;border-right:1px solid #000;clear:both;">
  17.     <h1>Now is the time for all good men to come to the aid of their country.</h1>
  18.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
  19.     <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
  20.     <p>Curabitur dui lectus, gravida sed, tincidunt et, elementum a, felis. Donec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pellentesque tincidunt leo. Etiam sed velit. Aenean ligula. Curabitur magna turpis, fermentum ut, imperdiet nec, accumsan id, ligula. Proin et nunc. Fusce vel felis eget nisl porta sodales. Integer sed ante id justo porta imperdiet. Nam placerat ligula non sem. Donec nunc enim, faucibus quis, porttitor et, dictum a, neque. Curabitur interdum felis id nisi. Aliquam eleifend auctor purus. Duis quis nisi. Mauris ac sapien vitae augue tempor vulputate. Mauris accumsan erat vitae lectus. Mauris hendrerit consequat nibh. Donec congue. Aliquam dolor. </p></div>
  21. <div style="height:10px;background:url(bot-rail.gif) no-repeat;">
  22.     <div style="float:right;height:10px;width:10px;background:url(bot-cap.gif) no-repeat;overflow:hidden;"></div></div></div>
  23. </body>
  24. </html>
- dM

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 163 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC