J
Jeremy Brown
OK, I see the <div> tag referred to allot- What exactly does it do and what
is its usage? Please forgive my tresspass...
Jeremy
is its usage? Please forgive my tresspass...
Jeremy
I
ironcorona
Jeremy said:
It's not a stupid question. You just don't know.
Try this:
http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV
div is just a generic block element that can be used to separate
different structural sections of the page. It doesn't do anything
presentational to the page. It's quite possible [but inadvisable] to
create an entire web page with just <div> and <span> in the <body>.
A
Andy Dingley
Jeremy said:
What does it do? - Not a lot.
What can it do? - A great deal.
It's there as a deliberately anonymous way of structuring your content.
It adds little implicit behaviour (i.e. your browser will barely show
you a difference) but it lets you hook lots of new behaviours onto it,
typically through CSS.
<div> has a closely related element called <span>. They're used in
similar ways, but <div> is a block-level element and <span> is inline
(*). In HTML this means you can put <span> inside <div>, but you
CANNOT put <div> inside <span>. Similarly for other block level
elements like <p> or inlines like <b>. <div> offers a bit extra
though, in that you can put <div> or <p> inside a <div>, even though
you couldn't put either inside <p>. You can't change any of this
stuff - you're stuck with it.
<div> also has some CSS behaviours attached to it. These have implicit
values (in the browser), but you can (and will) easily change them by
writing your own stylesheets. In particular, <div> has the
"display:block;" declaration and <span> has "display:inline;" This
makes <div> render on your page with linebreaks around it, but <span>
flows with the text. These values are usually adequate, but they're
easily changed. Typically you make <div> display:inline; so that you
can have valid HTML that looks like inline text, even though it has
HTML content in it that couldn't be placed into a <span>.
By using the <div class="..." > attribute, you can attach CSS to
specific <div>s on a page. This is how you control presentation and
layout these days.
You _could_ write a whole HTML page using little more than <div> and
CSS. It would even look good. But this wouldn't be a good idea. If you
have "a paragraph" according to the rules of language and grammar, then
still mark it up as <p>. Use <div> when you need to define blocks of
content (for any reason) and they don't fit a more specific HTML
element type (and you can't use <span> instead)
There's also an id attribute that you can attach to elements. This is
mainly used for JavaScript, as a way of "finding" blocks on a page so
that they can either be read or modified. You can also use id to hang
your CSS onto, a bit like class.
(*) Strictly HTML doesn't have such an idea as "block level elements".
It describes this in two separate ways, "Where you can use this
element" and "What else you can put into this element". Generally
though these two are the same and we can talk about "a block element"
or "an inline element". To understand this fully you'll need to learn
about concepts like "DTD" and "validity" -- search this newsgroup, or
c.i.w.a.h
I've also simplified many of the technical details of HTML, so as to
fit an introduction into this short post. Bean counters can sod off!
M
mbstevens
Jeremy said:
It is a generic block element that is often overused ("divitis") by
people who forget that their other block elements can be styled with CSS
just as easily as a div. You often see things like
<div>
<ul>
<li>........
<ul>
</div>
with the div instead of the ul styled when
<ul>
<li>........
</ul>
would do.
N
Neredbojias
It's a "division" for holding content that can be styled and even
positioned in various ways, generally using css.
J
Jeremy Brown
OK, I think I understand. Would this be right?
I have a "compass rose" on each of my pages that moves you around on the
page (top or bottom) or site (previous or next page). To keep the "rose"
separate from the preceding and upcoming sections, I have an empty <p></p>
before the table that creates the "rose".
here is what it looks like:
http://jerem43.home.att.net/pages/9x.html
here is the HTML (truncated for brevity):
<!--Navigation-->
<p>
</p>
<table class="navbox">
<!--blah, blah, blah yackety-schmackety goes here-->
</table>
<!--End Navigation-->
Would this do the same thing, and is it the correct usage?
<!--Navigation-->
<div>
<table class="navbox">
<!--blah, blah, blah yackety-schmackety goes here-->
</table>
</div>
<!--End Navigation-->
I am guessing that I could create a class that would define how far away the
"rose" would appear from the various surrounding elements to further help
structure the page.
Jeremy
I have a "compass rose" on each of my pages that moves you around on the
page (top or bottom) or site (previous or next page). To keep the "rose"
separate from the preceding and upcoming sections, I have an empty <p></p>
before the table that creates the "rose".
here is what it looks like:
http://jerem43.home.att.net/pages/9x.html
here is the HTML (truncated for brevity):
<!--Navigation-->
<p>
</p>
<table class="navbox">
<!--blah, blah, blah yackety-schmackety goes here-->
</table>
<!--End Navigation-->
Would this do the same thing, and is it the correct usage?
<!--Navigation-->
<div>
<table class="navbox">
<!--blah, blah, blah yackety-schmackety goes here-->
</table>
</div>
<!--End Navigation-->
I am guessing that I could create a class that would define how far away the
"rose" would appear from the various surrounding elements to further help
structure the page.
Jeremy
V
verity
Jeremy said:
Good question, I didn't know that & now by reasding answers to your
post, I do
BTW like the cats & dog.
A
Andy Dingley
Jeremy said:
This is (almost) never a good idea. It's the web equivalent of the old
DTP tricks for spacing things out by putting empty whitespace elements
everywhere.
If you want [A} and [C] to be presented with some white space between
them, then use CSS and bigger margins (probably margin-top on [C]) to
set it. Don't create a element just to sit between them - it's
just not needed.
I doubt you need to, nor should, use a table here -- but that's a
separate issue.
This would probably have no effect at all.
Now it's possible that this is what you needed instead
<div class="navbox">
<table>
but in general, without having actually looked at your page, then you
can probably do it perfectly well like this
<table class="navbox">
<table> is already a block element and you have a class attribute on it
so you can attach most CSS that you might want. Unless you're doing
something paticularly complex, that's probably all the HTML you need.
In general, your markup wants an overall make-over. It's pretty much
1997 style, only in XHTML.
Lose the frames.
Lose the HTML 3.2 coding style.
Lose the Transitional doctype.
Lose the <table>s
Lose the rainbow bullets.
Lose the frames.
The XHTML is OK, although many people will proceed to tell you it's
wrong. It's not helping much, but it doesn't actually hurt.
J
Jeremy Brown
Just an informational response:
That is why I wish to do. I have eliminated a ton of older styles in the
markup. I have elimanted almost all of the depreciated tags on all of the
pages on my site. I have switched just about all formatting to my style
sheet.
This is the kind of information I need. Sometimes the simple solution often
eludes us. I honestly would not have thought to use the margin functions in
my CSS since I am still learning how to utilize it to its full potential.
The artwork is 5 separate elements, not one. I know you can do that using a
single image with coordinate mapping and there are other ways, but that is
not how I wish to do so. The table works rather well in doing what I wish to
do.
1. I am going to dump the frames as soon as I learn how to layout the site
fully in CSS. (see #3)
2. Please read my home page in regards to my HTML skills- I am still
learning how to do it, hence it isn't beautifully typed up. I am typing all
of this out in Notepad, and the way I type lets me read it and know what I
looking at while I work on it.
3. I actually have a version of my site that is Strict, but it does not look
the way I want it to yet. (see #1)
4. The frames do what I want, they validate in Transitional & Strict and I
like the look.
5. How I design may page is not really the point here, I simply want to
learn HTML and have some fun doing so. I like the way my site looks. It is
amateurish because that what it is- an amateur HTML coder presenting his
amateur automotive skills on a personal web page. I am sure that some time
in the future I will bring the site into the 21st century, maybe 2002 or
2003, until then the layout stays- rainbow icons and all.
6. See #1 & #3
All this said, why did you need to critique my whole site when I only asked
a question about an XHTML tag?
Jeremy
That is why I wish to do. I have eliminated a ton of older styles in the
markup. I have elimanted almost all of the depreciated tags on all of the
pages on my site. I have switched just about all formatting to my style
sheet.
This is the kind of information I need. Sometimes the simple solution often
eludes us. I honestly would not have thought to use the margin functions in
my CSS since I am still learning how to utilize it to its full potential.
The artwork is 5 separate elements, not one. I know you can do that using a
single image with coordinate mapping and there are other ways, but that is
not how I wish to do so. The table works rather well in doing what I wish to
do.
1. I am going to dump the frames as soon as I learn how to layout the site
fully in CSS. (see #3)
2. Please read my home page in regards to my HTML skills- I am still
learning how to do it, hence it isn't beautifully typed up. I am typing all
of this out in Notepad, and the way I type lets me read it and know what I
looking at while I work on it.
3. I actually have a version of my site that is Strict, but it does not look
the way I want it to yet. (see #1)
4. The frames do what I want, they validate in Transitional & Strict and I
like the look.
5. How I design may page is not really the point here, I simply want to
learn HTML and have some fun doing so. I like the way my site looks. It is
amateurish because that what it is- an amateur HTML coder presenting his
amateur automotive skills on a personal web page. I am sure that some time
in the future I will bring the site into the 21st century, maybe 2002 or
2003, until then the layout stays- rainbow icons and all.
6. See #1 & #3
All this said, why did you need to critique my whole site when I only asked
a question about an XHTML tag?
Jeremy
J
Jeremy Brown
Number four should read :
4. The tables do what I want, they validate in Transitional & Strict and I
like the look.
4. The tables do what I want, they validate in Transitional & Strict and I
like the look.
A
Andy Dingley
No problem, I see no reason to ever visit your site
or read any of your postings ever again.
B
Blinky the Shark
Jeremy said:
Kudos for tackling this with a text editor and not some WYSINWYG crutch.
But you might want to consider using a text editor with syntax
highlighting; it'll make your job easier.
You got some bonus input. That's not uncommon here. Don't bitch about it.
D
dorayme
Blinky the Shark said:
Dingley's remarks were pretty mild and he did earn a right by
being so forthcoming in his lesson on the div. Plus, my feeling
from the very start of this thread, - am I too cynical? - given
the general competence of the functionality of the OPs site, the
question was altogether too innocent. How the hell do you think a
feller that types up his code, controls his frames, makes the css
with - why, hell's bells - a different coloured image to class
different list item markers and on and on, would have learnt all
this without a clue at how to look up what a <div> is? There may
well have been a more sophisticated question.
We are not talking a country bumkin stuck out in the middle of
goddamn nowhere with a tattered old '97 html book that has
nothing of divs in it - he drives and loves BMWs for God's sake,
mark of the wiseguy city slicker big time.
Let me just be wildly bold as I am thoroughly enjoying the start
to my day: he was really wanting nice things to be said about his
site. And he did not get it.
I know, I am horrible, but it is just a helpless dynamic in the
brain...
V
verity
dorayme said:
Interesting comment, didn't occur to me.
M
mbstevens
I didn't like the way it took about a minute and a half to suddenlydorayme said:
color itself (over dialup). Serious optimization problems. Nothing I
can think of with divs will do that. It's got to be something else.
The images are mostly small, but there are a lot of them. The
navigation shudders when you mouse over it. For all the talk on it
about w3c, it doesn't validate. Divs are the least of his worries.
D
dorayme
mbstevens said:
Now I have moved to broadband, this sort of thing is a bit of a
worry. Have to be careful not to make the same mistake. 90 sec is
far too long. Need to remember that if it takes more than 101
secs on my broadband it is probably too slow for dialup...
It was interesting looking at that guy's site and it illustrates
something that should be a lesson to all. At first I thought, ah
that's nice... but then each page had a different colour gradient
background and it started to irritate. The lesson is that what
seems a good idea for a moment's stop at a site is very often a
very bad idea on the whole.
Oy OP... we are commenting and discussing things that have
nothing to do with your "innocent" question! What do you think
about that? Eh? If you wanna come over and take a ride in a
rusting 1971 Ford XY, you are welcome... You might see your BMWs
in a completely new light ...
D
dorayme
dorayme said:
I don't know how 101 got into this? Read 10 secs
J
Jeremy Brown
Which page did not validate?
Jeremy
Jeremy
C
Chaddy2222
http://validator.w3.org/check?uri=http://jerem43.home.att.net/&ss=1&outline=1Jeremy said:
Oh and while I am at it: Get rid of the this page is best viewed with
BS, and make your site work at all screen widths.
J
Jeremy Brown
The "best viewed at" is because of the pictures in the gallery. They are all
500 to 640 px wide. You will need a laregr screen area to view them in the
entirety. They are presented in a format that is akin to the other pages.
(backgrounds and such)
I am told that this can be done in PHP, but I am not at that point in
learning.
JB
500 to 640 px wide. You will need a laregr screen area to view them in the
entirety. They are presented in a format that is akin to the other pages.
(backgrounds and such)
I am told that this can be done in PHP, but I am not at that point in
learning.
JB