Comments on: How To Put a Multi-Line Indent on a Styled Blockquote

By: Best Photoshop, html, javascript and php tutorials » How To Put A Multi-line Indent On A Styled Blackquote

Fri, 12 Mar 2010 21:38:32 +0000

[...] Click here for this Tutorial! Previously Posted Tutorial: Create An Advanced CSS Menu Using The Hover & Position Properties [...]

By: The Right Way to Add Custom List Markers to Unordered Lists | Impressive Webs Toronto

Sat, 13 Feb 2010 09:40:25 +0000

[...] All things considered, I think those drawbacks are small in comparison with the better looking list markers in this solution. You Might Also Like:How To Put a Multi-Line Indent on a Styled Blockquote [...]

By: Leon Amarant

Leon Amarant — Tue, 08 Dec 2009 14:48:48 +0000

Nice and simple. You can also insert the tag within every blockquote dynamically using jquery (or standard javascript for htat matter) in the onLoad event. This way, you would not require the programmer to add the markup manually.

By: Impressive Webs

Impressive Webs — Fri, 09 Oct 2009 13:11:26 +0000

John, that’s a great tip. Definitely a example of practical use for generated content in CSS. Thanks!

By: John J.

John J. — Thu, 08 Oct 2009 13:34:34 +0000

With CSS2 you can do this much easier entirely within CSS. All major browsers including Internet Explorer (IE) 8 now support the :before pseudo-class that makes this all possible.

blockquote
{
border : 1px solid #dcdcdc;
margin : 1em 40px;
padding: 0 5px;
background-color: #faf8e9;
}
blockquote:before {
content:url(‘images/bg_blockquote.png’);
float:left;
display:block;
margin-right:5px;
margin-top:3px;
}

By: Gnossos

Gnossos — Tue, 15 Sep 2009 20:22:06 +0000

I’ve searched the web for the past hour looking for something like this. This is not quite what I need, but it comes closest.

I have a left-float image with text wrapped around it. In the text I have a blockquote, which I want to typeset in the traditional way. According to the Chicago Manual of Style, this is with left and right indentation, perhaps a smaller type, and space above and below. This is much less fancy than your usage, but in some ways harder to implement. The problem is that if the text wraps on the right of the left-floated image, relative indentation doesn’t work with any of the standard html/css markup: blockquote, margin, padding, etc.

Your method works because by floating thin left and right. The only problem is the heights of the depend on how much text is in the block quote, and there is no general way to know this ahead of time.

Wouldn’t it be nice to have a jQuery plugin that figures out the dimensions of the and inserts them automatically before and after the blockquotes?

By: #WDNDL For 5/31/2009 - Weekend Web Update! | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

Sun, 31 May 2009 14:14:47 +0000

[...] How To Put a Multi-Line Indent on a Styled Blockquote | Impressive Webs The ever so tricky multi-lined indent in blockquotes (tags: webdesign html blockquote) [...]

By: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

Sat, 30 May 2009 01:03:18 +0000

[...] How To Put a Multi-Line Indent on a Styled Blockquote | Impressive Webs The ever so tricky multi-lined indent in blockquotes (tags: webdesign html blockquote) [...]

By: How To Put a Multi-Line Indent on a Styled Blockquote | Design Newz

Fri, 29 May 2009 20:01:10 +0000

[...] How To Put a Multi-Line Indent on a Styled Blockquote [...]

By: Impressive Webs

Impressive Webs — Fri, 29 May 2009 16:24:40 +0000

Demo and downloadable files added. Thanks for the suggestion Babu.