• Inline image quotes

  I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images.

  To be a valid blockquote there must be an inner block level containing element such as a paragraph or div. You can use this to your advantage in order to apply the two background images. The top one you can apply to the block quote itself using a text indent to make space for the image.

  blockquote {
  	text-indent: 25px;
  	background: url(quotes1.png);
  	background-position: 0 2px;
  	background-repeat: no-repeat;
  }
  

  For the second image on the bottom right, you are going to be doing something a bit clever with the containing paragraph. Set it to be display inline, set padding on the right to be a bit more than the width of your image, then put the background image of the end quote mark on the bottom right of the paragraph.

  blockquote p {
  	display: inline;
  	margin: 0;
  	padding-right: 24px;
  	background: url(quotes2.png);
  	background-position: bottom right;
  	background-repeat: no-repeat;
  }
  

  And there you have it, inline image quotes.

  [… 204 words]

  Posted at 12:28 am 35 Comments

  • charity
  • tech

• trough_1.7.gif (GIF Image, 420x1695 pixels)

  trough_1.7.gif (GIF Image, 420x1695 pixels) — icons.

  Posted at 11:18 am 0 Comments

  • design
  • icons

• MILK&TWO

  MILK&TWO — .

  Posted at 3:40 pm 0 Comments

  • entertainment
  • fortorchbox

• Twidget - Twitter.com Dashboard Widget

  Twidget - Twitter.com Dashboard Widget — .

  Posted at 5:31 pm 0 Comments

  • community
  • fortorchbox
  • tools
  • twidget
  • twitter

Wednesday, 22nd November 2006

2006 » November » Wednesday, 22nd

Tag cloud

charity community design entertainment fortorchbox icons tech tools twidget twitter