473,804 Members | 2,201 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.
Jul 21 '05 #1
11 4826
In our last episode,
<YY************ *****@newsread1 .news.pas.earth link.net>,
the lovely and talented Hello
broadcast on comp.infosystem s.www.authoring.stylesheets:
Hello, I am a self-taught home developer:
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.
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?
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.
I tend to use SPAN because it does not generate any line break.
SPAN is an *inline* element. It cannot contain a block element.
SPAN is closed whenever the block containing it is closed.
Am I missing something?
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.
Why people like DIV so much? Please
explain because I do struggle for understanding of this topic.

--
Lars Eighner ei*****@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_
Jul 21 '05 #2
Lars Eighner <ei*****@io.com > wrote:
The fist step is to learn to write valid HTML.
The first step is to mark up a document so that it's correctly
structured and semantically marked up, validity is far less important.
But DIV will close any P that is open.
Under transitional rules, under strict rules the element needs to be
closed before a preceding open block element closes.
SPAN is an *inline* element. It cannot contain a block element.
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.
SPAN is closed whenever the block containing it is closed.


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

--
Spartanicus
Jul 21 '05 #3
Spartanicus wrote:
Lars Eighner <ei*****@io.com > wrote:
But DIV will close any P that is open.


Under transitional rules, under strict rules the element needs to be
closed before a preceding open block element closes.


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.)
Jul 21 '05 #4
On Thu, 10 Mar 2005, Lars Eighner wrote:
There are many free tutorials on HTML available on the web.


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.
Jul 21 '05 #5
Johannes Koch <ko**@w3develop ment.de> wrote:
But DIV will close any P that is open.


Under transitional rules, under strict rules the element needs to be
closed before a preceding open block element closes.


div will close any p element that is open in HTML, not in XHTML. There
is no difference between Strict and Transitional versions.


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

--
Spartanicus
Jul 21 '05 #6
>>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 >>youuse DIV. What is a difference then between P and DIV?


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

Jul 21 '05 #7
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" <th*****@gmail. com> wrote in message
news:11******** ************@o1 3g2000cwo.googl egroups.com...
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 >>youuse DIV. What is a difference then between P and DIV?


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

Jul 21 '05 #8
Hello wrote:

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


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.
Jul 21 '05 #9
>
One more question:
Is it possible to use DIV but to force it not to produce a line break withCSS style?

I need a line break on the bottom but not on the top of some code block, Iused 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; orelse? Padding?


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.

Jul 21 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

111
14436
by: Retlak | last post by:
The recommended (on dozens of websites) and effective (works in Netscape, MSIE, Mozilla, probably others) way to detect if a browser has Javascript turned off is to put this in the <head>: <noscript> <meta http-equiv="refresh" content="1;url=http://yourURL/nojscript.html"> </noscript> This redirects to a doc which typically says "You need to enable
9
2305
by: Barbara de Zoete | last post by:
I am getting more and more confused as to the meaning of the words 'accessibility' and 'usability' *in the context of the world wide web*. What do these two words mean? How do they differ from one another? Where does the meaning overlap, if it does? Where do they perhaps conflict with one another, if they do? Can anyone please explain to someone who is not native speaking, nor fluent in English? TIA
4
2290
by: bissatch | last post by:
Hi, I am a web designer and have just recently took up the position of web marketer for a company managing their intranet and external website. I was interested in a book that provided good tips on a wide variety of usability and accessibility issues. I looked at Jakob Nielsons book which, from the toc, covered an excellent variety of web usability issues. It also touched on intranets which was very handy for myself. However, I did...
10
1962
by: Steven T. Hatton | last post by:
# -- "If our hypothesis is about anything and not about some one or more particular things, then our deductions constitute mathematics. Thus mathematics may be defined as the subject in which we never know what we are talking about, nor whether what we are saying is true." - Bertrand Russell
0
1247
by: usable_us | last post by:
Hello, Oracle's Usability group will be conducting an incentive-based two hour usability activity. (This is not a job posting but an invitation to a two hour activity) This email was not intended to spam your mail boxes, so please ignore if its inappropriate. We are looking for Jr. Level DBAs to participate in a usability activity. Qualifications of participants should include: * Experience working as a DBA or System...
11
1972
by: Simon Shutter | last post by:
Forgive me if I am posting to wrong newsgroup and for a couple of loaded questions. First, from what I understand, one of the advantages of XHTML/CSS is the ability of screen readers/braille agents to provide an improved experience than HTML with table layout. Notwithstanding the leadership of Chevrolet, Amnesty International and others, at what point do you think XHTML/CSS will become the preferred approach? Will it be when the number...
9
2536
by: Gomaw Beoyr | last post by:
Two question about the "partial classes" (in the next wersion of ..NET). Question 1 ========== Will partial classes (in the next version of C#) have to be declared "partial" in ALL places. I.e. do we have to need to write:
65
4250
by: Steven Watanabe | last post by:
I know that the standard idioms for clearing a list are: (1) mylist = (2) del mylist I guess I'm not in the "slicing frame of mind", as someone put it, but can someone explain what the difference is between these and: (3) mylist =
60
4794
by: deko | last post by:
As I understand it, most browser manufacturers have agreed on 16px for their default font size. So, this should be an accurate conversion for percentages: px % 16 = 100 14 = 87.5 13 = 81.25
0
10595
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10343
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10335
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9169
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7633
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5529
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5668
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3831
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3001
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.