Hey,
I’m having some problems with setting a width on <q> tags. Is it possible to set a width for a quote?
E.g.
<q style="width:50px;">To me the most important thing is that everything is nearby</q>
(Having the same issue with styling using an external CSS sheet).
Cheers!
Jonno
I believe q is an inline element so try this:
<q style='display:inline-block; background-color:#cfc; width:50px'>
To me the most important thing is that everything is nearby
</q>
That’s great! Thanks for clarifying for me 
Are you sure you don’t want to use BLOCKQUOTE since Q is for short inline “quotation” that don’t require paragraph breaks.
^ what he said. =p
<q> (quote) is an inline element. The fix John gave you, which works, terms the inline quote into a block quote.
<blockquote> (block quote) is a block element. =p
I don’t mean to be pedantic, honest 
Actually the supplied fix turns <q> into an inline-block element which has width but does not have default margins, padding, line feeds, etc.
But I want a one sentence quote that will fit in a certain sized area. Here’s a link (work in progress (but if you can give any feedback I’m all ears ))
http://www2.hull.ac.uk/files/homepageBuildFeb/css/coursehome.html
…so wouldn’t a <q> tag be more appropriate?
That looks more like a BLOCKQUOTE to me rather than Q the latter are typically used within a containing sentence hence why “default semantics” of the element are defined as inline and not enhanced, Q only uses delimiting quotation marks “independent of language” to define itself.
John’s alteration fix does work, so use it that if you want.
I’d use blockquote:
<blockquote>To me the most important thing is that everything is nearby</<blockquote>
blockquote {
border : 1px solid #000;
width: 50px;
margin: 0px;
padding: 5px;
background-color: #cfc;
}
@JonnoW ,
I had a look and modified your #testid:
<div id="XXXtestid"
style='
float:left; margin-top:20px;
background:#eee url("./quote-284x125.png") no-repeat 0px 0px;
outline:dotted 1px #f00;
'><!-- testim -->
<blockquote
style='
float:left; width:264px;
font:italic 130% Georgia, "Times New Roman", Times, serif;
margin:30px 30px 0 60px;
outline:dotted 1px #f00
'
>
The best thing for me, is that everything is in one place on campus
</blockquote>
<a href="#" id="XXXvidThm">
<img
alt="Video thumbnail"
title="Click to play James' interview"
style='width:132px; height:125px; margin:0 0 0 12px'
src="./video-133x125.jpg">
</a>
<a href="./index_files/index.php" id="XXXordrPrs">
<img
src="./pros-200x125.png"
style='width:200px; height:125px'
alt="Order a Prospectus"
title="Learn more about the University, student life, courses and more; Order a prospectus today"
>
</a>
</div>
The original file sizes were huge so I modified those as well:
Doh, you are correct John. I just glanced at your suggestion too quickly. It is indeed inline-block (which could be appropriate for a q). Though I think the author was hinting at blockquote (a little late to this party =p).
Cheers for all the feedback
Doesn’t even look like a quote to me, since there’s nothing being cited… That’s just a sentence, not a quote. You might “know” it’s a quote, but if you’re not citing a source, what’s the point of making it a quote.
Though yeah, between blockquote and q, I’d lean towards the former… and float it.
With the layout broken from a float drop though, q, blockquote, p or a h2 (I’m thinking H2) are the LEAST of your problems there.
That’s a good point regarding the quotes DeathShadow, however surely with the related image alt/title tags that will show the two are related?
Slightly confused with what you mean about the broken float drop though, could you clarify please.
Kind regards,
How? Did you place them INSIDE the Q or BLOCKQUOTE? No, they’re just sibling elements with zero relationship. Though honestly ‘on-site’ I’d NEVER have guessed those were links unless I paid real attention to the cursor… They look more like stock images than links (A problem that plagues a LOT of websites).
IF I were to treat that as a quote, I’d wrap the text and the first anchor/image in a div, that same anchor/image in a CITE, and then both in a blockquote. The final anchor/image seems to have nothing to do with either, so it doesn’t belong in the same wrapper regardless of where you’re placing it for screen users. I’d probably also get REAL citation text in there so it’s clear you have a quote, alter it so you can have DYNAMIC text placement since you’ve painted yourself into a corner on content there (unless you plan on only ever showing that one quote, and even then + dynamic fonts == POOF, broken layout) and so there’s something to clearly show as a link since having the picture of a person being the link to a video interview is, well… not all that intuitive without something MORE around it.
Your layout is broken here, you’re content column is being pushed down past the sidebar leaving a massive blank white area at the top. This is probably caused by EM metric fonts inside a fixed width container, or all that stuff in the general area of your ‘quote’ that’s really not viable for web deployment and smells slightly of ‘but I can do it in photoshop’.
Could also be the use of overflow:auto since I’m also seeing scrollbars on your #container, though I suspect that’s more symptom than cause.
Oh, and @John_Betong, you do know it’s invalid to put cdata/textnodes or inline-level elements as direct descendants of BLOCKQUOTE, right? (It’s just like NOSCRIPT in that regard). Immediate children of blockquote must be block-level like P or DIV.
DS will probably hurt me for suggesting this, but if you wanted to be semantically correct you could use the HTML5 figure and figcaption. =p
Actually it’s one of the few things from HTML 5 that makes any sense… Though I’m not convinced that it’s semantically correct here either. Honestly, for what’s there for content I’d be tempted to leave it to semantically neutral tags because there’s nothing in the spec that fits what’s being done here.
Since wrapping a semantic tag with the WRONG meaning around something is WORSE than not using semantics at all.
Oki, I’ve taken on board what you said and have made some changes.
I checked out W3Schools HTML5 entry about blockquote and I THINK this is nearly there now.
I’ve altered the image to include a play button on it, this could be extended further to change something on rollover to further indicate that it is a link, but including a play button along with alt tags should be enough for users to realise this is a link to a video?
If you get a chance to look over this I’d be grateful.
HTML:
<div id="testim">
<blockquote cite="#"><!--Address of video or interviews section-->
The best thing for me, is that everything is in one place on campus
<!-- - Doesn't seem to need any <p> tags around it, however this means that I can't include the video thumbnail within the blockquote as it won't lay up correctly...any ideas how this can be fixed? -->
</blockquote>
<a href="#" id="vidThm">
<img alt="Video testimonial thumbnail" title="Click to play James' interview" src="../images/video-thumbnail.png" />
</a>
</div>
<!--End testimonial-->
<div id="ordrPrs">
<a href="#" id="ordrPrs">
<img src="../images/pros.png" alt="Order a prospectus" title="Learn more about the University, student life, courses and more; Order a prospectus" />
</a>
</div><!--End order a prospectus-->
CSS:
div#testim {
clear:left;
float:left;
margin-top:20px;
background:#eee url("../images/quote.png") no-repeat 0 0;
}
div#testim blockquote {
font:italic 130% Georgia, "Times New Roman", Times, serif;
padding:10px;
width:260px;
float:left;
}
Blockquote MUST have a block level child around inline level or cdata elements…
I meant the CITE tag, though the CITE attribute isn’t a bad idea either.
that last one probably shouldn’t have a div around it – though that depends on where in the code it ends up.
You’re attempting to use the same ID more than once – remember ID’s are supposed to be unique on a page… NOT that there’s any reason for those inner ID’s.
if you have to say …/ or even / from your markup or CSS, there’s probably something wrong with your directory structure…
You could REALLY do yourself a favor and forget that HTML 5 garbage even exists. It is NOT ready for real world deployment and does NOT offer any real improvements over what came before it, while it DOES loosen the structural rules and introduce redundancies to the point of undoing ALL of the progress STRICT (4 or X 1.0) had given us the past decade.
might ‘suck’ from an accessibility standpoint, but EM’s auto-enlargement means you can’t predict how many lines OR how tall your text will end up – I hate to say it but a switch to PX would be more predictable (though broken for geckotards who still use it’s broken/outdated text-only resize). Besides, 24px (150% of a default 16px “small fonts/96dpi”) is big enough it’s unlikely anyone will plotz over it.
TITLE should probably go on the Anchor to say where the A goes, not the image where it serves no purpose.
thinking on it I’d probably wrap a div around the groups, use a P inside the blockquote around both the image and the text (since that’s all one ‘thought’), the CITE tag around the inner anchor… well, here:
<div id="testimonialAndProspectus">
<blockquote cite="#videoAddress">
<p>
<span>The best thing for me, is that everything is in one place on campus</span>
<cite>
<a
href="#videoAddress"
title="Interview with James"
>
<img
src="../images/video-thumbnail.png"
width="204" height="125"
alt="James"
/>
</a>
</cite>
</p>
</blockquote>
<a
href="#"
class="order"
title="Learn more about the University, student life, courses and more; Order a prospectus"
>
<img
src="../images/pros.png"
width="200" height="125"
alt="Order a prospectus"
/>
</a>
<!-- #testimonialAndProspectus --></div>
#testimonialAndProspectus * {
margin:0; padding:0; /* in case you're not using a reset */
}
#testimonialAndProspectus {
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats legacy IE */
padding-left:22px;
font:italic 24px/27px Georgia, "Times New Roman", Times, serif;
background:url(images/quote.png) 0 0 no-repeat;
}
#testimonialAndProspectus span {
float:left;
display:inline; /* prevent IE margin doubling */
width:236px;
padding-top:22px;
margin-right:22px;
}
#testimonialAndProspectus img {
display:block; /* kill any alignment */
}
#testimonialAndProspectus .order {
float:right;
}
The ‘need’ for the dummy span is annoying, but only way to predictably keep that from blowing out of it’s container. Notice the inclusions of width/height on the IMG tags, this lets the browser size their boxes before they load, so you don’t have an extra “reflow” of the page. I also avoid declaring padding the same time as width to increase the likelihood of this working in older browsers.
Remember, blockquote must have a BLOCK LEVEL children ONLY if you’re writing proper/modern (aka STRICT) code. You can’t put an A, or a SPAN, or CDATA as it’s direct descendant… Unless you’re writing transitional code like it’s 1998. Given that HTML 5 seems to be all about rolling the clock back to 1998, wonder where it stands on that – LIKE IT MATTERS - that’s something else I’d suggest, skip jumping the gun on the HTML 5 bandwagon and roll back to an actual recommendation specification like HTML 4.01 STRICT or XHTML 1.0 STRICT – you’re just causing more headaches for yourself ESPECIALLY with the stupid shim and total lack of anything resembling rules to make validation meaningful.
It might also help to get the FORM and FIELDSET in place for your inputs up top, since when you add those they’ll do all sorts of funky things to your style. There’s a reason I always recommend writing ALL your content up semantically BEFORE even THINKING about your media=“screen” appearance – especially since if you’re thinking on taking this into “responsive design” (New name for the entire POINT of using HTML in the first place) your desktop “screen” appearance will NOT be your only target.
Oh, and if that “order a prospectus” image is the ‘final’ appearance, I’d kill using a image for that and use text instead… Likewise I’d REALLY try to fit some text with that image on the vid link inside the CITE. Even images off and with TITLE it’s still a ‘unlabelled quote’.