SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting the width of a quote <q> tag

    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.

    Code:
    <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

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I believe q is an inline element so try this:

    HTML Code:
    <q style='display:inline-block; background-color:#cfc; width:50px'>
       To me the most important thing is that everything is nearby
    </q>
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great! Thanks for clarifying for me

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you don't want to use BLOCKQUOTE since Q is for short inline "quotation" that don't require paragraph breaks.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    ^ 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

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by samanime View Post
    ^ 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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/homepag...oursehome.html

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...so wouldn't a <q> tag be more appropriate?

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JonnoW View Post
    ...so wouldn't a <q> tag be more appropriate?
    John's alteration fix does work, so use it that if you want.

    I'd use blockquote:

    Code:
    <blockquote>To me the most important thing is that everything is nearby</<blockquote>
    Code:
    blockquote {
     border : 1px solid #000;
     width: 50px;
     margin: 0px;
     padding: 5px;
     background-color: #cfc;
    }

  11. #11
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @JonnoW ,

    I had a look and modified your #testid:

    HTML Code:
            <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&#39; 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:

    pros-200x125.pngquote-284x125.pngvideo-134x125.jpgpartial-screen-dump.jpg
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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).

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for all the feedback

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JonnoW View Post
    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?
    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.

    Quote Originally Posted by JonnoW View Post
    Slightly confused with what you mean about the broken float drop though, could you clarify please.
    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.

  17. #17
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    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.

  19. #19
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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:
    Code:
    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;
    }

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) Blockquote MUST have a block level child around inline level or cdata elements...

    2) I meant the CITE tag, though the CITE attribute isn't a bad idea either.

    3) that last one probably shouldn't have a div around it -- though that depends on where in the code it ends up.

    4) 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.

    5) if you have to say ../ or even / from your markup or CSS, there's probably something wrong with your directory structure...

    6) 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.

    7) 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.

    8) 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:

    Code:
    <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>
    Code:
    #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'.

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oops, double posted?

  22. #22
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @DeathShadow

    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.
    The idea of the inline-level elements was debug script to show the exact position of the text. Once it was exactly where required (so as not to over write the background image quotation marks) then the "outline dotted 1px #f00" can be omitted. The text will remain in the same place or replace the margin with padding for hopefully the same effect. I have had problems with padding not achieving the same results in different browsers

    PHP Code:

    <div id="XXXtestim" 
           
    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 meis that everything is in one place on campus
       
    </blockquote>
       ...
       ...
    </
    div
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    The idea of the inline-level elements was debug script to show the exact position of the text. Once it was exactly where required (so as not to over write the background image quotation marks) then the "outline dotted 1px #f00" can be omitted. The text will remain in the same place or replace the margin with padding for hopefully the same effect. I have had problems with padding not achieving the same results in different browsers
    I'm not sure what that even means or how it's relevant to what I said -- if you're going to style content you should mark it up properly first, and this:

    <blockquote>The best thing for me, is that everything is in one place on campus</blockquote>

    Is invalid markup in modern (aka STRICT) documents... you need a P or DIV or other block level container INSIDE the blockquote.

    Makes no sense to waste time styling markup that isn't valid or what's going to be deployed.... that's why I advocate writing as much of your content and markup as possible semantically before even THINKING about applying CSS to it.

  24. #24
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @DeathShasow60,

    I didn't realise that BLOCKQUOTE required a P or a DIV and also removed the default margins. Maybe it should have been called QUOTE_ENCLOSURE or QUOTE_SECTION

    The idea of "outline:dotted 1px #f00" style script was to suggest a position for the enclosed text so that @JonnoW could easily position the text himself.

    Check out the "partial-screen-dump.jpg" in this thread's post #11
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Maybe it should have been called QUOTE_ENCLOSURE or QUOTE_SECTION
    There's a LOT of places in the HTML and CSS specification where they use words in a general sense or they re-use the same word for entirely different purposes. One of the classic examples of this is 'block' and 'inline'.

    Blockquote is meant to encapsulate several block-level elements in a single block.... block-level just means the type of tag structurally, which is entirely different from display:block from CSS, even though display:block is the default value for block-level. Inline is similarly confusing.

    It gets worse when you get into concepts like 'empty' where it can REALLY drive you crazy as an empty element in the HTML specification isn't one that has no CDATA content -- like <div></div>, but is one that CANNOT have CDATA or other tags as content like IMG, BR, HR, etc... It's why every time people sipping the XML kool-aid a bit too heavily chime in with "the implementation is broken because <div /> doesn't work" its a big laugh -- since the only 'empty' elements can use the short form close.... and while <div></div> might be empty, the tag itself is not considered an 'empty element'.

    Heading-levels are another example of poor wording in the specification leading to confusion -- "structurally important" doesn't mean "most important on the page", but everyone seems to misread it as such which is where your SEO scam artists start abusing/mis-using heading tags any-old-way instead of using them for what they are for -- providing structure to the document.

    It's the details like that which I think account for so much of the confusion and bad code out there -- the specification is VERY poorly written from an engineering and literary standpoint; it borders on being legalese -- problem being I can't see most developers taking the time to learn enough law to pass the bar. But then, I spent two years writing technical manuals for bar-code scanners in the early 90's, so I have a bit different view on how a specification and explanation of said specification should be handled.

    Also why I'm not a fan of HTML 5, it takes something simple (markup) with a badly written specification (4 strict or worse, 3.2) and makes it bigger, fatter, and still doesn't actually explain ANYTHING in useful plain-folks language. It's so bad even the people who wrote it can't agree on what some of the new elements (SECTION and ASIDE come to mind) are even FOR!

    It's why the old WDG reference:
    http://htmlhelp.com/reference/html40/

    .. is still my go-to when I need to understand a tag's real purpose -- it took the 4.01 spec and turned it into something normal people can understand.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •