Ok.. I have been confused about this for a while..so I will ask..
If a tag is styled in the head section... #tag { style...Then..If the "styles" conform to a "div" styling..the resulting "box" or "effect" will be div..
If a tag (any name) is styled as a "span" then it will act like a "span"... yes or no?
For example
Blockquote is depreciated..which I understand to mean that if a person places the command as a one word.. "blockquote" ..as a inline html comand, the browsers will eventually not be ready able or willing to execute that "blockquote" specifications
However...if a person places a style section .....#blockquote {style.. in the CSS portion.. Then the browser will render the blockquote id "style and subsequent blockquote.p class styles when written in the HTML portion as <blockquote class=
The reason I ask is because...What is in a Name? I hesitate to use the H1, H2, H3, header designations because with html tabled data, the H1,2,3 were very specifically set to certain specs..and I wanted more control over the size and weight of the font..but does it matter anymore if a person uses the "names" ..such as "blockquote" and H1 since those are styled in the header/linked relative section?
What is in a name or do the names...H1, Blockquote...or Div, Span have specific actions related to them, separate from the Style Set in the css/head/linked relative section?
ALSO...
Does "span" replace blockquote?
First, blockquote is not deprecated. You can use it, even though I personally never felt it was an useful tag.
It should only contain block elements in xhtml though.
I don't understand what you meant after that, I'll leave that to native English speakers.
Oh and span is not a replacement of blockquote. Span is not a block element, and is typically used to add style to portions of texts within a block element.
Paragraph1 will behave like a block element, Paragraph2 like a an in-line element.
- You can name your classes or ids whatever you want*
* Well almost, I think you need more than 1 character, and you cannot start with "_ " or have special characters. Check with the W3C CSS specification for this.
- body, p, div, H1, H2, H3 (etc.) a:link, a:hover (etc.) ul, li (etc.) and more are selectors, which means you can "select" them and style them, but you can of course attribute a class name to them as well, and style them independently to one another.
quote: skyetyger said:
Does "span" replace blockquote?
"span" do not replace anything, but you can decide that all your paragraphs with the class"blockquote" attributed to them are styled to look like a blockquote, like in the example below:
First, blockquote is not deprecated. It's still very much in use, and very useful. I use it often. The reason it is not deprecated is because it fulfills a very specific purpose: In the semantic web, 'blockquote' means something that cannot be defined by 'p' or 'h1' or any other html tag. It is, by definition, quoting something in a block of text. It means something when even just reading the rendered code. Think of looking at semantic XHTML as if you are reading a newspaper article.
quote:
Headline: The Great and Powerful Wizard of Oz
Sub-headline: February 14 2007
Sub-sub-headline: Written by twItch^
Content: I just met the Wizard of Oz, and he isn't nearly as powerful as people thought he was. In fact, not only did I miss out on being attacked by flying monkeys to keep me from seeing him (the presence of which would imply that someone else thinks he's important), but when I did finally meet him, this is what he said:
Multi-line quotation: I'm sorry, who are you? I've been awfully busy these past few months. Working on my memoirs, you know. I've got this fabulous bowl of cherries back behind this here curtain that I believe sums up my work pretty effectively. Do you want a cherry?
That's what your rendered XHTML can say. Headers. Content. Block quotations. Emphasis (even in text- & speech-browsers these are rendered). The semantic format of XHTML exists to make the information *easily* retrievable, and *available*.
The reason that the font tag, for example, is deprecated is because it has no semantic value. The same with the b and i tags. They are merely for style, all of which can be defined in stylesheets, which seperate the style metaphor from the content (content must remain semantic).
I hope that gives you a little more broad reasoning behind XHTML and CSS, and the relationship between them. I could write more, but I fear I'd lose my focus and end up talking about bunny rabbits.
Thanks Kimson
OK
I thought I understood what you are saying and it wasn't an issue because I always use <div" as div and blockquote as blockquote no matter how the names were styled....so far so good.... until I tried to align images on two sides of a paragraph...and wanted the images to stay somewhere in the vicinity of that paragraph no matter what resize, resolution..text size the user might choose..
Now ...I didn't want to clutter up the page with div..the vertical-aligns wouldn't hold....and span..I don't understand how to span an image into a header yet ....so I used "blockquote"
But..I wondered if I am just rewriting "blockquote" into a "p" or "div" wrapper style or is there really a spec that the browser executes when the "command" blockquote..or div or span is read by the browser? It really puzzles me when I am using the H1,H2 headers because those were Specific..in old HTML..but now that those are Styled..everyone says to sue them..which I avoid..because of the old "hardwired" mode..
That is the question...are there default specs the browser reads for certain specs or code words or is it all "styling"?
Here is the page I was working on..with the blockquotes so you see what I am saying..Are those divs, paragraphs or blockquotes
THANKS TWITCH..I
Blockquote is ..blockquote
IT does have specific function and hard coding in the browsers?
I see the same function written as "span" .....which is written as .....<span (change this block of text/images)..</span..with span specs in the style sheet....but I don't really know or maybe don't care to do that "span" when blockquote ..is more familiar..
I am just not certain I am using blockquote correctly when I use it to format images..
It seems ..a stretch ..and maybe there is a better way..
Well, don't equate span with blockquote, because they're two completely different beasts.
Span is more akin to div in that it doesn't have any specific style attributed to itself at any given time. The difference between span and div is that div breaks paragraphs on its own. It's a block element. Which means if you throw a div into a paragraph without closing the paragraph, your paragraph will still break at that point. Spans do not have this behavior. Blockquote, on its own, is a block-level element (in that it will break your paragraphs if you put one inside of a paragraph) and puts a browser-determined amount of whitespace on both sides of the enclosed text.
So don't think of blockquotes as style elements. They, like paragraphs and headers, are semantic tags of XHTML that block out the document. If you want to re-style these elements, I highly encourage that, but don't use them as replacements for creating new CSS classes.
And if you have more specific questions, I'd have to look at the code you're currently using so I can give you more concrete examples.
{{EDIT: 2 posts were slipped in while I was typing this, so forgive me if anything was covered already...
I think I'm a little dizzy after reading all of this....
Ok, let me try to clarify what I think I got from your posts
1) evey element in HTML has default styling. There is default styling specified by the w3c, and there is also default styling defined by the browsers themselves (so an h1, with no CSS defned, will not necessarily look the same in different browsers).
2) any styles you define for those elements over ride the default settings.
3) the proper tag should always be used for you element - not because of hardwired styles, but because the tag gives meaning to the structure of your document. When it comes down to it, you could code your entire site as a series of <font> tags, and with the appropriate CSS make it behave and look however you wanted.
The tag used should reflect the prupose of the element, so that without the CSS present (or without a browser even) the document make sense.
quote: skyetyger said:
It really puzzles me when I am using the H1,H2 headers because those were Specific..in old HTML..but now that those are Styled..everyone says to sue them..which I avoid..because of the old "hardwired" mode..
Again, I am unclear on your meaning exactly, but basically look at it like this:
An h1 is always an h1 - it is very specific in regard to what it is, what its purpose is, and the meaning that it lends to the structure of your document.
How it looks is entirely dependent on your CSS, and should be thought of in completely seperate terms from what it *is*.
In other words: don't worry about what the default stylings of an element are when you are coding your HTML - code your HTML using the appropriate tag for job, and work in all of your style related issues after the fact.
Okay, I'm an idiot, I didn't see that you referenced the page in question.
As for the layout of that, you are, indeed, using blockquote incorrectly. You can look at that page as essentially a reduplication of one basic layout: Two images surrounding a block of text. At a simplistic level, that means you've got a row with three columns. We know how we'd display that using tables, but take a look at http://bluerobot.com/web/layouts/layout3.html to see how it can easily be done with compliant XHTML and stylesheets. Here's what I've come up with real quicklike.
Stylesheet:
code:
#container {
position : relative;
margin : 0 160px; 0 160px;
}
#leftSide {
width : 150px; /* width of widest image */
position : absolute;
left : 5px;
top : 5px;
}
#rightSide {
width : 150px;
position : absolute;
right : 5px;
top : 5px;
}
And here's the XHTML:
code:
<div id="container">
<p>Chords are the lines that segment the circle. All of the regular polygons can be drawn from a fixed point
with a piece of string. A piece of string is a cord. This is a journal of one method of finding the Chords
or the perimeter length of each segment of the regular polygons.</p>
<p>There is nothing mystical about these symbols. The magic is the geometry itself, for within these simple
figures is the power to shape the world.</p>
</div>
<div id="leftSide"><img src="http://hartake.com/comrose3.png"></div>
<div id="rightSide"><img src="http://hartake.com/comrose3.png"></div>
For the purposes of demonstrating what it looks like, I've thrown it up on my office server to show it. I hope this helps out.
Thanks Twitch..It looked to me as if I were using blockquote for divs..
I have tried variations of your solution...BUT the images may move independant of the text..just like the nav/side div images don't move down with the content text ..Is there a way to get the menu items to stay even with the text of the content div on a page?
I will try it again and see...just to make sure I did it correctly the first time..but..I seem to remember..when the images wouldn't move..just stayed as a column of images on the side..
Then ...I tried using "div...id" for each block of image/text...stacking divs in blocks..but the validator returned an error message..
It states only one "div" unique "id" on a page..
Now, on second thought..."div.image" and class = image...that might work..
I will try that again..div.content (style sheet)....and <div class=" (html) and make each paragraph text/image combo a separate div..Stack the divs..
I need the images to flow with the text and stay in the same vicinity..more or less..
Any other solutions appreciated..
It must be a common problem in Headers.."image..text ..image" formatting..so must have a common solution..
Thank You DL-44...If I understand you correctly..you said:
1) The commands are default but can be overwritten with Style (that was my understanding..so I am glad you agree)
2) The command names must be used for the "functions" they represent for grammatical reasons....Therefore "div" is not a name that can be used for "span" simply because it confuses..everyone..(the validator doesn't like using "div" as a name for <p ..for instance)
So I think I understand that part better..thanks again!
You don't need to wrap your images in a div - just set the style for the images themselves. The more divs that you can eliminate from your code (and the more nesting of elements, the more extra elements) the happier you will be when it comes to solving problems and updating your pages.
As for ID's: an ID is a unique indentifier, and only one element (no matter what tag is used) can have that ID on a page. A class is what you want to use when the styles will be used in multiple places. Keep in mind also that an element can have more than one class, and it can have an id and one or more classes as well.
I must disagree with twitch's solution to some extent, in that it usually best to avoid absolute positioning IMO, and make use of float property - in your case it seems especially true.
DL-44
You state it plainly.. yes..only one div..id on a page
But .class might work..
Twitch was doing something really quick. I think Twitch is basically correct...and You are correct...the image must float..but float relative to what? The image default aligns the image as a "header" type position, above the text..So how to get it to move over and flow with the text..I tried vertical align but it didn't work to the right..works fine to the left
I tried div.class.. but being lazy..I didn't finish testing it
I will try that..div.class..as stacks of divs..Using Divs rather than "Blockquote" as the container...
Is there a problem with using divs that way..YES..too many divs..messy..
There must be a correct solution..or a best way..
I like absolute positioning, and I'll strike down anyone, with a month-old loaf of French bread, who stands against me.
No, I'll be fair, I wanted a quick markup that would do precisely what I wanted with minimal work. Since I'm at work. Still.
The reason I used that particular markup was because it looked to me that the page in question had a paragraph or two of text related specifically to two images, one on the left, one on the right. I didn't take the time to read it for crying out loud. I'm not Superman.
It's also important to note how much simpler my markup was than your original html. Were I do to a pageload comparison, I'm sure it'd be at least 50% smaller. Which is good. But toying with the markup is also good.
You can definitely make use of float:left and float:right when it comes to this setup, which would work quite well, except that if the text gets too long you're likely to get that ugly text wrap-around on the image, which I think looks horrendous when it could be a clean three-column setup.
Nonetheless, it seems skyetyger is getting the hang of it: blockquote should not be used as a container for layout. I reiterate my claim that <blockquote> is semantically useful, and doesn't relate at all to the page in question.
I like absolute positioning, and I'll strike down anyone, with a month-old loaf of French bread, who stands against me.
Don't tempt me
Skyetyger, I don't have the time at the moment to look closely at your code, but from what I have seen you can easily reproduce your layout with that 3 column technique :
Aside from the nav lists at the top left and right, which don't seem to be an issue, a 3-column model isn't really applicable to this. We're talking about paragraphs with illustrations - breaking that into columns breaks the correlation between the text and the illustrations, which is semantically very bad...
Of course, the semantics are *VERY* far out of whack with the current set up, and should be nudged closer and closer to proper...
Things like -
- using header tags for the very many headers on this page
- using list tags for the lists on the page
- getting rid of the blockquotes (as we've covered and then some here)
- using your paragraph tags correctly - get rid of all those <br> tags!
- using classnames that add to the meaning of the content rather than odd and ambiguous ones like "xxx"
- and a small but important one: using the proper HTML for entities, such as ° rather than <sup>o</sup>...
and so on.
You will find, skytyger, that if you get rid of all these bizarre approaches which ignore the built in purpose of HTML, and get back to basics (using the right tag for the job, and as few elements as possible), you will have a much simpler time getting things to work the way they should.
I know we've covered that in various ways, but I think it is extremely important that the concept really sink in...
1) Header tags format the text within the tags..and I don't want the bold look or the size set to the default..I am using header tags on the smear page and it looks awful..I can't get ahead of the default settings.. I don't like "h" on other peoples pages..It is a "canned look..I could replace the headers with graphics..in time but that is a Fir Header replacement ..also not...validator approved
2) I am getting to the list ..for the diagrams..That is ..next ..as you correctly pointed out..
3) <br is not a depreciated tag and sometimes saves coding a paragraph to solve a small spacing problem..The lists solved most of the <br..I am still working on the page
4) Blockquotes are used to wrap images on many sites..I don't like it or I wouldn't be here asking this question but I see tutorial sites that use Blockquote wraps to align images...
5) I understand my own naming system..xxx for paragraph or p1 for images is a system of descending order that informs me of where and on which page that..xxx or p1 is used...It is my file system...xxx is the main paragraph of the site..and unlikely to get confused with "pretty" "red" or a more poetical nomenclature..What would you name your paragraphs..Curly and Mo? I use x1, x2, or p1 p2..It tells me which page and in what order it was used..That CSS page has multiple pages..
6) The <sup> is listed on the internet as the way to de that..and I used a standard character from my html editor..The validator rejects the ampersand as Uncoded in °
Now ..thank you DL-44
But I have a feeling you are being snide..which is cool..but I still haven't seen any correct solution to that problem
That problem can be solved..more or less..by adding an "align" in the image tag in the HTML..but that is not allowed..if I remember correctly..except if you are a professor at a major university..
I might use "img..src "whaterever.img" width height alt...align: left or right
But I don't think the "align" is supposed to be used that way anymore..
Until someone shows me how to align this..the blockquotes are the only solution
Twitch..I like relative and absolute..and use both...
In fact..I don't browse much but I have only seen one site where the images are aligned left right..without using the inline html align..<img src..height width alt border...align=left/right> ..And that one site that was not doing "inline" used blockquote
I can't even find "examples" unless it is in the header sections and I just can't "see it."
DL-44
I put that ° in the page and it wouldn't validate..states it is an uncoded ampersand..so maybe I copied it incorrectly..will try again..
I updated the lists..to correct OL and still am being mulish about the headers..I will make graphic replacements in time..and fir header the darn things and that will get rid of almost all the <br
1) Header tags format the text within the tags..and I don't want the bold look or the size set to the default
That is why CSS exists.
This is exactly what half of this conversation has been about.
You can format a header to look *however* you want. But a header is still a header and needs to be coded as such.
quote: skyetyger said:
<br is not a depreciated tag and sometimes saves coding a paragraph to solve a small spacing problem..
Of course it is not deprecated, and it has many uses.
But again:
1) CSS exists to take care of such things as "small spacing problems". That's why we have margin and padding settings.
2) You code a paragraph when you have...........a paragraph. A <br> should not be used for these things - period.
quote: skyetyger said:
Blockquotes are used to wrap images on many sites
I don't recall ever seeing such a thing, and regardless whether it's on other sites, it is still very very wrong.
quote: skyetyger said:
What would you name your paragraphs..Curly and Mo? I use x1, x2, or p1 p2..It tells me which page and in what order it was used.
Well, for starters, I would not name my paragraphs simply to have an order....there is no need. If there is a need for a paragraph - or any other element - to have special treatment, then a class or id is in order. But otherwise, such a class is unecessary clutter in both your mark-up and your css.
A classname or id should impart something meaningful - if your scheme is meaningful to you I guess that's a start, but I can't fathom any reason that justifies naming everything on your page. FWIW
quote: skyetyger said:
The <sup> is listed on the internet as the way to de that..
Where? "on the internet" is a bit broad
Either way, the degree symbol is not a lower case o, it is a specific symbol. Perhaps the code I gave from memory is incorrect - a simple google search should turn up the correct code...
quote: skyetyger said:
Now ..thank you DL-44
But I have a feeling you are being snide
Snide???
You ask questions. I attempt to provide answers. Not sure what else to tell you...
quote:
but I still haven't seen any correct solution to that problem
Which problem are we talking about exactly? A big part of the problem here is 1) you have not been at all clear in your questions and 2) you really haven't been accepting any of the answers you get.
What you want to do is clearly up to you, but keep in mind many of us here *do* in fact know what we're doing with this stuff. FWIW.
quote:
Until someone shows me how to align this..the blockquotes are the only solution
If I have time I'll put together an example using proper markup and float.
I get the distinct feeling you haven't actually tried much that has been suggested to you though, or listened to anything that has been said.
There is absolutely nothing a blockquote will do for you that can't be accomplished with a simple div, and there is absolutely nothing about a blockquote that makes it good for wrapping images... I truly cannot fathom why you have chosen blockquotes as your tag, or why you are fixated on sticking with them.
I mean.....truly: have you read the replies to you here? You really couldn;t blame people if they did start get snide, given the information that you have completely ignored so far.
FWIW.
(keep in mind also: people are in fact here to help. help can only help if you do your part though....)
posted 02-14-2007 15:57
