Utilizing a fancy JQuery plugin called Quovolver, I integrated quotes and short messages into my web-based application without any issues. However, I encountered a problem with the quote display area, as I aim to set a fixed height for it rather than allowing it to expand dynamically.
How can I achieve this?
Here is the HTML structure:
<div id="wrapper">
<div id="article">
<blockquote>
<p>Accidents hurt – safety doesn’t.</p>
<cite>– Unknown Author</cite>
</blockquote>
</div>
</div>
Corresponding CSS code:
#wrapper { width: 300px; margin: 1px auto; }
blockquote p { margin-bottom: 10px; font-style: italic; }
blockquote cite { font-style: normal; display: block; text-align: right; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }
/*
| Setting the width for the blockquotes is required
| to accurately adjust it's contianer
*/
blockquote {
font-family: Georgia, Times, serif;
width: 250px; /* required */
margin: 0 auto;
}
/*
| The #quote_wrap div is created
| by Quovolver to wrap the quotes
*/
#quote_wrap {
background: #fbffec 20px 20px;
margin: 13px 0 0 0;
padding: 20px;
border: 1px solid #edffaf;
}
JavaScript implementation:
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<!-- JavaScript Test Zone -->
<script type="text/javascript">
$(document).ready(function () {
$('blockquote').quovolver();
});
</script>
UPDATE: In an attempt to address the expandable quote area issue, I added the following CSS property:
height:100px!important;
However, this adjustment affects the quote alignment within the box. I prefer the message to always be centered, regardless of its length. How can I achieve this?