CODEWITHSUNDEEP
htmlcssquotes
Royi Namir
Royi Namir

Reputation: 148544

Align ending quotes to left?

I've created this simple example which yields this html :

enter image description here

But I have a problem trying to align the right closing " to the end of the text(after the "posted" word)

alert(''); How can I align it ? ( currently it has float:left)

(please notice this question is not tagged as javascript.)

Upvotes: 1

Views: 241

Answers (4)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

If you want

enter image description here

then the following 

blockquote {
  line-height: 130%;
  margin-bottom: 10px;
  padding: 10px 10px 1px 10px;
  background-color: #eeeeee;
  quotes: '\201C' '\201D';
}
blockquote p{
  display:inline-block;
  padding: 0px 10px 14px 10px;
  margin:0;
}
blockquote p:before {
  content: open-quote;
}

blockquote p:after {
  content: close-quote;
  bottom:-0.25em;
}

blockquote p:before, blockquote p:after {
  font-family: 'Times New Roman';
  display: inline-block;
  font-weight: bold;
  color: #cccccc;
  font-size: 4em;
  vertical-align:text-top;
  position:relative;
}

will suffice..

Demo at http://jsbin.com/eheyok/29/edit

Upvotes: 1

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Have a look: http://jsbin.com/eheyok/20/edit

Here is the trick:

blockquote :last-child{
  display:inline;
}

blockquote:after {
  content: close-quote;
  font-family: 'Times New Roman';
  display: inline-block;
  top:20px;
  position: relative;
}

Upvotes: 1

Bucthree
Bucthree

Reputation: 271

Try this:

CSS

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,    pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;font-size: 14px;
 }


body 
{ 
background-color: White;
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
font-size: 14px;
}
blockquote { quotes: '\201C' '\201D'; }


blockquote:before {
float:left;
font-family: 'Times New Roman';
content: open-quote;
}

blockquote:after {
content: close-quote;
font-family: 'Times New Roman';
float: right;
}
blockquote:before, blockquote:after {
font-weight: bold;
color: #cccccc;
font-size: 4em;
}


blockquote {line-height: 120%;
padding: 10px 0px 1px 10px;
background-color: #eeeeee;
}

Source:

http://jsbin.com/eheyok/19/edit

Upvotes: 0

Baelix
Baelix

Reputation: 261

I edited the CSS to make the quote align with the text. I don't recommend doing it like this, unless you know for sure that your text is going to be this length every time.

blockquote:after {
  margin-right: auto;
  margin-left: 170px;
content: close-quote;
font-family: 'Times New Roman';
  position: relative;
  top: -20px;
}

http://jsbin.com/eheyok/9/edit

But just to expand on my answer: the margin-right/margin-left styles above help set the margins on either side (aka how far over this particular item is going to start/end before it can no longer be on that line). I added the position so that the quotes would jump to the line above it. And then subtracted some of the length off to get it just right (the "top" property), since the size of the quote and the size of the text are different.

Upvotes: 0

Related Questions