/    Sign up×
Community /Pin to ProfileBookmark

How DO I Create HTML Quotes

Copy linkTweet thisAlerts:
Mar 19.2007

I am trying to create some kind of html code that will allow me to insert quotes into articles I post on my site. Here is an example of a site that is doing this.

[url]http://www.onlinedatingsites.info/Dating_Articles/Relationship_Magazine/THE_INSIDE_%26_OUTSIDE_OF_MALE-FEMALE_FRIENDSHIPS/[/url]

I would prefer not to use any kind of table or frame as I want the content to flow steady for search bots and yet appear to visitors of site as an obvious quote.

Does anyone know how I the html would look for this.

Zorro………….
[url]http://www.garysnotebook.com/[/url]

to post a comment
HTML

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMar 19.2007 — <i>
</i>article text....&lt;/p&gt;
&lt;div style="float: right; width: 230px; margin-left: 30px;"&gt;
&lt;p&gt;&lt;span style="color: #990000; font-size: 2em;"&gt;“&lt;/span&gt;Your quote information...&lt;span style="color: #990000;font-size: 2em;"&gt;”&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;more article text....


You'll need to use the character codes for your quote marks.

& # 8220;

& # 8221;
Copy linkTweet thisAlerts:
@ray326Mar 19.2007 — Although they use a div on that page I think a blockquote would be a better mark up.
Copy linkTweet thisAlerts:
@KDLAMar 19.2007 — Although they use a div on that page I think a blockquote would be a better mark up.[/QUOTE]
Don't you have to provide a source in the blockquote mark-up for it to be valid? Would that be a problem with personal quotes, not referencing a particular work?
Copy linkTweet thisAlerts:
@WebJoelMar 19.2007 — Don't you have to provide a source in the blockquote mark-up for it to be valid? Would that be a problem with personal quotes, not referencing a particular work?[/QUOTE] -I thought that was "<cite>" where you have to provide source. :eek: Wouldn't be the first time I was doin' it wrong. Anyway... ?
Copy linkTweet thisAlerts:
@zorro56authorMar 19.2007 — Thanks for the help,

This is what I ahve so far as I made a few changes to get rid of the P returns and put in DEV's instead.

<div style="float: right; width: 230px; margin-left: 30px;">

<div><span style="color: #990000; font-size: 2em;">“</span>Your quote information...<span style="color: #990000;font-size: 2em;">”</span></div>

</div>[/QUOTE]

Although I need the quotes to stand out a bit and becasue I have a site that is CSS I need to try and call a given class to make this work. Can you give me an idea of how the code woudl then look as I am close just not all the way there yet.


Zorro………….

http://www.garysnotebook.com/
Copy linkTweet thisAlerts:
@ray326Mar 19.2007 — The cite is #IMPLIED rather than #REQUIRED so, no, you don't have to include a source.
Copy linkTweet thisAlerts:
@zorro56authorMar 19.2007 — Thanks..!

This is what I have so far.

<div style="float: right; width: 230px; margin-left: 30px;">

<div><span class="mainlevel-sidenav">“</span>Your quote information...<span style="color: #990000;font-size: 2em;">”</span></div>

</div>[/QUOTE]

Anyone have any ideas how to take this one step further so I can call CSS classes for the test so I can make the text stand out better in the quote.
Copy linkTweet thisAlerts:
@ray326Mar 20.2007 — <blockquote>Your quote information...</blockquote>
Copy linkTweet thisAlerts:
@Major_PayneMar 20.2007 — Here is an example of a site that is doing this.

http://www.onlinedatingsites.info/Dating_Articles/Relationship_Magazine/THE_INSIDE_%26_OUTSIDE_OF_MALE-FEMALE_FRIENDSHIPS/

Zorro[/QUOTE]

The page referenced is using 4 div tags with classes for each as well as two images for the top/bottom quotes. You could check the styling code for each class and get an idea on how to apply it to your own page.

Ron
Copy linkTweet thisAlerts:
@WebJoelMar 21.2007 — CSS:

p {font-size:1.0em;}

.quoteMark {font-size:2.0em; margin: 0 3px 0 3px;}[/QUOTE]


HTML
<blockquote>

<span class="quoteMark">"</span>

<p>It was a tale told by an idiot, full of sound and fury, signifying nothing</p>

<span class="quoteMark">"</span>

</blockquote>[/QUOTE]

is how I would do this, with adjustments to the right-left margin of the CSS' .quoteMark, as necessary...

If this doesn't make you ecstaticaly happy, Google "pullquotes, CSS". ?
Copy linkTweet thisAlerts:
@Major_PayneMar 21.2007 — Hey, thanks WebJoel. That was good info. I liked the one here: Pullquotes. Simple and easy to use. Added this to "Things I Didn't Know or Forgot". :p

Ron
Copy linkTweet thisAlerts:
@WebJoelMar 23.2007 — You can do some fun things that minic magazine layout using pullquotes. Here is something I started for a client:

http://www.cristinamaggi.styles.org/
Copy linkTweet thisAlerts:
@Major_PayneMar 24.2007 — Very nicely done. A good clean layout. Thanks for sharing your work.

Ron
×

Success!

Help @zorro56 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...