Retour à Forum de site web

Comment faire une image avec DIV frontières

  • Drake
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Avr 27, 2006
  • Messages: 47
  • Loc: Canada
  • Status: Offline

Message Juillet 24th, 2008, 4:03 am

Est-il possible de faire une DIV que, indépendamment des dimensions, a toujours une "frontière" autour de ce composé d'images?

Comme de dire que je veux faire un DIV apparaissent encadrés, et 4 images:

- Cadre supérieur
- Cadre en bas
- Cadre de gauche
- Cadre de droite

Existe-t-il un moyen de faire de chacun comme une image de fond, et flottent à sa juste corner? Ou une autre solution à ce problème?

Les images seront d'une nature où la longueur des côtés de la DIV ne sera pas tenu de la matière, il n'y pas de soucis.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 24th, 2008, 4:03 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Juillet 24th, 2008, 4:37 am

Cela peut être fait avec un peu de balisage étrangères. Ce qui suit est ma solution à coins arrondis, mais je pense que vous pouvez appliquer des stratégies analogues.

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

Code: [ 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

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 137 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC