7 Replies - 9570 Views - Last Post: 04 March 2006 - 02:17 AM

#1 TechE   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 02-March 06

using<div> with css without any table! Pls help me

Posted 02 March 2006 - 10:47 PM

I m a newbie in css working with <div>. i will be very appreciate to those who lend a hand to me.

Hope that you all can give me some guides or references.

Thank you very much
Is This A Good Question/Topic? 0
  • +

Replies To: using<div> with css without any table! Pls help me

#2 bug   User is offline

  • Got Bug?
  • member icon

Reputation: 0
  • View blog
  • Posts: 1,010
  • Joined: 24-April 05

Re: using<div> with css without any table! Pls help me

Posted 02 March 2006 - 11:04 PM

Specifically what are you having problems with?
Was This Post Helpful? 0
  • +
  • -

#3 snoj   User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: using<div> with css without any table! Pls help me

Posted 02 March 2006 - 11:12 PM

My website makes almost complete use of Div's and span's (there are some tables in there). You can check that out for a reference. (Maybe not a very good one though.)
Was This Post Helpful? 0
  • +
  • -

#4 TechE   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 02-March 06

Re: using<div> with css without any table! Pls help me

Posted 03 March 2006 - 12:44 AM

Josh, your html is linked to too many css files. Cant you make it into 1 css file?
Was This Post Helpful? 0
  • +
  • -

#5 snoj   User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: using<div> with css without any table! Pls help me

Posted 03 March 2006 - 01:04 AM

I could, but then I'd loose my awesome system of modularization. Besides, the main CSS you're looking for are located in only two of the three files, blog.css and new.css.
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: using<div> with css without any table! Pls help me

Posted 03 March 2006 - 06:59 PM

Basic things to know (concerning the general use of <div>s):

A. CSS "vertical-align" doesn't work in <div> like in <td>.
Edit: See my next post for more information regarding <div>-CSS vertical alignment.
B. Use CSS "margin-left: auto; margin-right: auto" to center a <div> in standards-compliant browsers (you'll have to use a work-around for Internet Explorer).
C. Use CSS "float" and "clear" to change whether or not <div> containers appear on the same line or not.
D. You can move a <div> relative to where it would normally be by setting "position: relative;" and specifying how it should move with CSS "top", "bottom", "left", and "right".
E. Using the same method as D you can move a <div> to anywhere on the page using "position: absolute;" and the same CSS commands.
F. If you set a position of relative or absolute you can set a "z-index" to control layers and put things on top of one another (such as half of one <div> over the top of another <div>).
G. Since <div> containers aren't attached together like they are in tables you have freedom to move them all around the page; this also makes positioning less predictable and more difficult though.

Oh yes, and <div> stands for "division" as someone mentioned recently.

You can easily look these concepts up on a search engine like Google or ask around to get more information. Dream.in.Code and hotsnoj's pages are clear examples of the use of <div>s at work. I've also attached a page I made demonstrating layering. You can clearly see the image overlap.

Attached File(s)


This post has been edited by Arbitrator: 04 March 2006 - 02:24 AM

Was This Post Helpful? 0
  • +
  • -

#7 snoj   User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: using<div> with css without any table! Pls help me

Posted 03 March 2006 - 09:33 PM

Quote

A. CSS "vertical-align" doesn't work in <div> like in <td>
How is that? I've never had or know any differences.
Was This Post Helpful? 0
  • +
  • -

#8 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: using<div> with css without any table! Pls help me

Posted 04 March 2006 - 02:17 AM

hotsnoj said:

Arbitrator said:

A. CSS "vertical-align" doesn't work in <div> like in <td>.
How is that? I've never had or know any differences.

Learn something new every day, heh. There ARE differences but it seems that you can turn a <div> container into a <td> cell:

I just did a bit of research and you can use "vertical-align" on a <div> in standards-compliant browsers BUT, as usual, it won't work in Internet Explorer unless you use some tricks. To do it you have to, of course, exploit some bugs in Internet Explorer. The explanation is here.

Still, based on the explanation and examples, there are some problems with the cross-browser implementation since the width attribute doesn't seem to work in IE once you've taken advantage of the exploit (which means the <div> consumes the entire width of the page) and it also relies on absolute positioning which is generally a bad thing for pages with a dynamic layout. Considering the exploit, I prefer not to use those since Internet Explorer 7 is reportly breaking a large number of them by adding support for various CSS selectors (but without fixing other important issues, possibly including "display: table-cell;").

Anyway, in order to use "vertical-align" in standards browsers, you have to set "display: table-cell;" on the <div>. Apparently, I only tried "display: table;" and not the correct property and that's why I gave up on trying to do so after otherwise getting no results. Might try to implement it on something in the future and see if I can get an equal cross-browser appearance. At any rate, I think I can at least safely say that "vertical-align" in <div> containers is currently unreliable and not really something for newbies to CSS.

The test code:
<div style="background: #f00; display: table-cell; height: 500px; vertical-align: middle; width: 500px;">

CONTENT<br/>
CONTENT<br/>
CONTENT<br/>

</div>

Tested with XHTML 1.1 in Firefox 1.5 and Internet Explorer 6 SP2.

This post has been edited by Arbitrator: 04 March 2006 - 02:28 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1