General question about DIV usability

Hello, I am a self-taught home developer:

Question:

As it seems, most CSS people like to use DIVs as a division between styles.
So, they would have a style for a div tag that would hold some other styles
and other tags...

One thing I fail to understand about people being so addicted to DIV is that
it this tag is similar to <P> tag; it creates a new paragraph whenever you
use DIV. What is a difference then between P and DIV?

I tend to use SPAN because it does not generate any line break.

Am I missing something? Why people like DIV so much? Please explain because
I do struggle for understanding of this topic.

Thank you.

re: General question about DIV usability

In our last episode,
<YYQXd.6099$cN6.5041@newsread1.news.pas.earthlink. net>,
the lovely and talented Hello
broadcast on comp.infosystems.www.authoring.stylesheets:
[color=blue]
> Hello, I am a self-taught home developer:[/color]

Unfortunately, in this case it shows.

The fist step is to learn to write valid HTML. I don't think
you have done that, but your questions indicate that you do not
know what valid HTML is. If you do not begin with a valid
document, you only dig yourself in deeper and deeper by trying
to style your document.
[color=blue]
> Question:[/color]
[color=blue]
> As it seems, most CSS people like to use DIVs as a division between styles.
> So, they would have a style for a div tag that would hold some other styles
> and other tags...[/color]
[color=blue]
> One thing I fail to understand about people being so addicted to DIV is that
> it this tag is similar to <P> tag; it creates a new paragraph whenever you
> use DIV. What is a difference then between P and DIV?[/color]

DIV is an arbitrary *block* element. It can contain other block
elements (including other DIVs). P is block element for
paragraphs. P cannot contain other block elements; it cannot
contain other Ps; it cannot contain DIVs. DIV does not create a
new P. But DIV will close any P that is open.
[color=blue]
> I tend to use SPAN because it does not generate any line break.[/color]

SPAN is an *inline* element. It cannot contain a block element.
SPAN is closed whenever the block containing it is closed.
[color=blue]
> Am I missing something?[/color]

Yes, you seem to be missing even the most basic grasp of what
HTML is all about. There are many free tutorials on HTML
available on the web. Google for them, and work through a few.
[color=blue]
> Why people like DIV so much? Please
> explain because I do struggle for understanding of this topic.[/color]


--
Lars Eighner eighner@io.com http://www.io.com/~eighner/
War on Terrorism: History a Mystery
"He's busy making history, but doesn't look back at his own, or the
world's.... Bush would rather look forward than backward." --_Newsweek_

re: General question about DIV usability

Lars Eighner <eighner@io.com> wrote:
[color=blue]
>The fist step is to learn to write valid HTML.[/color]

The first step is to mark up a document so that it's correctly
structured and semantically marked up, validity is far less important.
[color=blue]
>But DIV will close any P that is open.[/color]

Under transitional rules, under strict rules the element needs to be
closed before a preceding open block element closes.
[color=blue]
>SPAN is an *inline* element. It cannot contain a block element.[/color]

Span is an inline element in the html sense, it can be set to a block
level element with css, and it can contain other html inline elements
that have been set to block.
[color=blue]
>SPAN is closed whenever the block containing it is closed.[/color]

Span should always be closed
http://homepage.ntlworld.com/spartanicus/lars.htm

--
Spartanicus

re: General question about DIV usability

Spartanicus wrote:[color=blue]
> Lars Eighner <eighner@io.com> wrote:[color=green]
>>But DIV will close any P that is open.[/color]
>
> Under transitional rules, under strict rules the element needs to be
> closed before a preceding open block element closes.[/color]

div will close any p element that is open in HTML, not in XHTML. There
is no difference between Strict and Transitional versions.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

re: General question about DIV usability

On Thu, 10 Mar 2005, Lars Eighner wrote:
[color=blue]
> There are many free tutorials on HTML available on the web.[/color]

Indeed there are, but relatively few of them are much good. All too
many of them are aimed at promoting some particular author's
(misguided) concept of HTML as "commands" for designing a visual
layout, for example.

I've been at this for too long to know what would be best for a
beginner, but the WDG (htmlhelp) site has some reliable material
IMHO.

re: General question about DIV usability

Johannes Koch <koch@w3development.de> wrote:
[color=blue][color=green][color=darkred]
>>>But DIV will close any P that is open.[/color]
>>
>> Under transitional rules, under strict rules the element needs to be
>> closed before a preceding open block element closes.[/color]
>
>div will close any p element that is open in HTML, not in XHTML. There
>is no difference between Strict and Transitional versions.[/color]

Ah yes, I'm accustomed to the rules of my custom DTD :-)

--
Spartanicus

re: General question about DIV usability

>>One thing I fail to understand about people being so addicted to DIV[color=blue][color=green]
>>is that
>>it this tag is similar to <P> tag; it creates a new paragraph[/color][/color]
whenever >>you[color=blue][color=green]
>>use DIV. What is a difference then between P and DIV?[/color][/color]

What you're missing here is that <p> tags and <div> tags create a new
line because they are both "block" level elements (i.e., they create a
new 'block' in the flow of the html). this is different from <span>,
<li>, and other elements that are "inline" or create no new line.

There are several different block-level tags that could be used, for
example any list tag (<ul> or <ol> for example) or even tables.

You use what fits your needs, or the semantics of what it is you're
trying to do with the markup. Use <p> when you have a paragraph, use
<span> when you have a line (a span of text, if you will).

<div> has become the workhorse of css based layouts much the way <td>
was the workhorse of table based layouts. It doesn't create any
special replaced elements on the page, and basically is perfect for
giving every tag contained within it a skeleton with which to drape all
the styles you want on it (by giving it a class or id, for example)
since css 'cascades' and styles are inherited.

However, depending on your situation, you may be better off using
<span> if you have a situation where you don't want a line break. It's
not necessary to litter <div> tags all over the place, as you could
probably just apply the styles to other block level elements that you
have in your markup anyway. It's considered good practice to apply
styles to elements you already have, instead of creating 'empty tags'
that have no business in your documents.

Sometimes, you just need a <div>, though. It is a great container
element.

Hope that helps.

Travis

re: General question about DIV usability

Thank you for your detailed answer.

One more question:
Is it possible to use DIV but to force it not to produce a line break with
CSS style?
I need a line break on the bottom but not on the top of some code block, I
used SPAN and <BR> after the SPAN. Is there a better way to derive with CSS
the same results like having DIV where top break somehow is suppressed; or
else? Padding?

"thulsey" <thulsey@gmail.com> wrote in message
news:1110452974.509989.7780@o13g2000cwo.googlegrou ps.com...[color=blue][color=green][color=darkred]
>>>One thing I fail to understand about people being so addicted to DIV
>>>is that
>>>it this tag is similar to <P> tag; it creates a new paragraph[/color][/color]
> whenever >>you[color=green][color=darkred]
>>>use DIV. What is a difference then between P and DIV?[/color][/color]
>
> What you're missing here is that <p> tags and <div> tags create a new
> line because they are both "block" level elements (i.e., they create a
> new 'block' in the flow of the html). this is different from <span>,
> <li>, and other elements that are "inline" or create no new line.
>
> There are several different block-level tags that could be used, for
> example any list tag (<ul> or <ol> for example) or even tables.
>
> You use what fits your needs, or the semantics of what it is you're
> trying to do with the markup. Use <p> when you have a paragraph, use
> <span> when you have a line (a span of text, if you will).
>
> <div> has become the workhorse of css based layouts much the way <td>
> was the workhorse of table based layouts. It doesn't create any
> special replaced elements on the page, and basically is perfect for
> giving every tag contained within it a skeleton with which to drape all
> the styles you want on it (by giving it a class or id, for example)
> since css 'cascades' and styles are inherited.
>
> However, depending on your situation, you may be better off using
> <span> if you have a situation where you don't want a line break. It's
> not necessary to litter <div> tags all over the place, as you could
> probably just apply the styles to other block level elements that you
> have in your markup anyway. It's considered good practice to apply
> styles to elements you already have, instead of creating 'empty tags'
> that have no business in your documents.
>
> Sometimes, you just need a <div>, though. It is a great container
> element.
>
> Hope that helps.
>
> Travis
>[/color]

re: General question about DIV usability

Hello wrote:[color=blue]
>
> I need a line break on the bottom but not on the top of some code block, I
> used SPAN and <BR> after the SPAN. Is there a better way to derive with CSS[/color]

There is absolutely a better way, but please post a URL showing what you
have so far.

CSS layouts work best on well-structured, semantic (and validated) HTML.
Chances are, your code has turned into a pile of "div soup" that would
benefit from more appropriate markup.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

re: General question about DIV usability

>[color=blue]
>One more question:
>Is it possible to use DIV but to force it not to produce a line break[/color]
with[color=blue]
>CSS style?
>
>I need a line break on the bottom but not on the top of some code[/color]
block, I[color=blue]
>used SPAN and <BR> after the SPAN. Is there a better way to derive[/color]
with CSS[color=blue]
>
>the same results like having DIV where top break somehow is[/color]
suppressed; or[color=blue]
>else? Padding?[/color]

Actually, as someone mentioned, it's easier if you can post an example
of what you've got/what you need and your current method.

There is definitely a way to do it in CSS, but it'd be guess-work at
the moment as to what exactly you require.

If I *do* understand you correctly, you could try padding-bottom: 1em;
or something to that affect.

Post more, we'll have a look.

re: General question about DIV usability

How to pack the menu? I used SPAN tags + BR for a line break. What would you
do?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Blah</title>
<style type="text/css">
<!--
body {font: x-small Georgia, Tahoma, Helvetica, sans-serif;}
span.rollover { padding: 0 0 0 226px;}
span.rollover a {color: #0000FF;}
span.rollover a:hover {color: blue;}
span.rollover a:link span {color: #C0C0C0;}
span.rollover a:visited span {color: #C0C0C0;}
span.rollover a:hover span {color: blue;}
a:hover.roll, a:link.roll, a:visited.roll {text-decoration: none;}
a:hover.nroll, a:link.nroll, a:visited.nroll {text-decoration: none; color:
blue;}
span.nonroll {font: Georgia; padding: 0 0 0 220px; color: blue;}
-->
</style>
</head>
<body bgcolor="#C0C0C0">
<span class="rollover"><a class="roll" href="#"><span>●</span>Menu
Option1</a></span><br>
<span class="nonroll"><a class="nroll" href="#"><span style="font-family:
Helvetica; color: red;">►</span>Menu Current Page</a></span><br>
<span class="rollover"><a class="roll" href="#"><span>●</span>Menu
Option3</a></span><br>
<span class="rollover"><a class="roll" href="#"><span>●</span>Menu
Option4</a></span><br>
<span class="rollover"><a class="roll" href="#"><span>●</span>Menu
Option5</a></span><br>
</body>
</html>


"thulsey" <thulsey@gmail.com> wrote in message
news:1110513645.087877.323410@l41g2000cwc.googlegr oups.com...[color=blue][color=green]
> >
>>One more question:
>>Is it possible to use DIV but to force it not to produce a line break[/color]
> with[color=green]
>>CSS style?
>>
>>I need a line break on the bottom but not on the top of some code[/color]
> block, I[color=green]
>>used SPAN and <BR> after the SPAN. Is there a better way to derive[/color]
> with CSS[color=green]
>>
>>the same results like having DIV where top break somehow is[/color]
> suppressed; or[color=green]
>>else? Padding?[/color]
>
> Actually, as someone mentioned, it's easier if you can post an example
> of what you've got/what you need and your current method.
>
> There is definitely a way to do it in CSS, but it'd be guess-work at
> the moment as to what exactly you require.
>
> If I *do* understand you correctly, you could try padding-bottom: 1em;
> or something to that affect.
>
> Post more, we'll have a look.
>[/color]

re: General question about DIV usability

>How to pack the menu? I used SPAN tags + BR for a line break. What
would you
do?

Have you taken a look at using lists for the menu? Semantically,
that's what it is: a list of links. You can set list-style to none and
get rid of any default list decoration.
..rollover {
list-style: none;
}

<ul class="rollover">
<li><span>●</span>Menu
Option1</a></li>
</ul>