Bild

Exempel på en bild

 

Med innehållstypen bild kan redaktörer lägga ut bilder i sektioner.

Det är inte mycket du behöver tänka på som utvecklare för att komma igång med denna innehållstyp.

Det finns lite olika style-klasser som man anger för olika justeringar. Detta för att text få en snygg marginal runt bilder.

  • dxImageMiddle (display:block;margin-left:auto;margin-right:auto;text-align:center)

  • dxImageLeftInText (float:left)

  • dxImageLeft (float:left) + <br clear="all" />

  • dxImageRightInText (float:right)

  • dxImageRight (float:right) + <br clear="all" />

  • dxImageNoAlign

Exempel på styles för bild.

  1. C#
  1. .dxImageLeftInText,
  2. .dxImageLeftInTextWrapper
  3. {
  4. margin-right:0.8em;
  5. margin-bottom:0.8em;
  6. }
  8. .dxImageRightInText,
  9. .dxImageRightInTextWrapper
  10. {
  11. margin-left:0.8em;
  12. margin-bottom:0.8em;
  13. }
  15. .dxImageMiddle,
  16. .dxImageLeft,
  17. .dxImageRight,
  18. .dxImageNoAlign,
  19. .dxImageLeftWrapper,
  20. .dxImageRightWrapper,
  21. .dxImageLeftInTextWrapper,
  22. .dxImageRightInTextWrapper,
  23. .dxImageImageMiddleWrapper,
  24. .dxImageNoAlignWrapper
  25. {
  26. margin-bottom:0.8em;
  27. }
  29. .dxImageLeftWrapper .dxImageLeft,
  30. .dxImageRightWrapper .dxImageRight,
  31. .dxImageLeftInTextWrapper .dxImageLeftInText,
  32. .dxImageRightInTextWrapper .dxImageRightInText,
  33. .dxImageMiddleWrapper .dxImageMiddle,
  34. .dxImageNoAlignWrapper .dxImageNoAlign
  35. {
  36. margin:0px;
  37. }
  39. .dxImageText
  40. {
  41. font-family:Verdana, Sans-Serif;
  42. font-size:60%;
  43. margin:0em 0em 0em 0em;
  44. padding:0em 0em 0.1 0em;
  45. line-height:1.2em;
  46. }

Exempel-styles för bilder i tabell-layout och bildspel:

  1. C#
  1. .dxImagesGridItemText,
  2. .dxPageNav,
  3. .dxImageSlideShowStatus
  4. {
  5. font-family: Verdana, Sans-Serif;
  6. font-size:0.65em;
  7. padding-bottom:5px;
  8. margin-bottom: 0px;
  9. }
  11. .dxImagesGridItemInner
  12. {
  13. background-color:#eeeeee;
  14. margin:4px;
  15. }
  18. .dxPageNav a
  19. {
  20. font-family:verdana;
  21. font-weight:bold;
  22. text-decoration:none;
  23. color:#3177d6;
  24. }
  26. .dxImageSlideShowStatus
  27. {
  28. text-align:right;
  29. margin-top:12px;
  30. }
  32. .dxImagesSlideShowControlPanel
  33. {
  34. height:24px;
  35. }