SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tables or css positioning?

    which is better?
    Free Science Homework Help
    http://www.physicsforums.com

  2. #2
    Old Fogey mancroft's Avatar
    Join Date
    Oct 2002
    Location
    lost
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, i recommend css. it gives you far more control and you can get different effects.
    :

    :

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mancroft
    Personally, i recommend css. it gives you far more control and you can get different effects.

    I agree but it also depends on the audence, and what browsers they use (i.e NN 4.x). Also if the data are from a database then tables work much better.
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  4. #4
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas why this doesn't work? Don't pay any attention to what the text says. The positioning just doesn't work and the width doesn't make the text into a box.

    Code:
    <style type="text/css">
    
    .right {position:absolute; left=500px; top=200px; width=200px}
    .left {position:abosolute; left=30px; top=200px; width=200px}
    .top {position:absolute; left=200; top=20px; width=200px}
    
    </style>
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
    <LINK href="test.css" rel="stylesheet" type="text/css">
    <title>XHTML and CSS test</title>
    </head>
    
    <body>
    
    <div class="left">
    The heading is placed 100px down from the top of the document, and 100px to the right from the left side of the document. The paragraph is placed 200px down from the top of the document, and 100px to the right from the left side of the document. 
    </div>
    
    <div class="right">
    The heading is placed 100px down from the top of the document, and 100px to the right from the left side of the document. The paragraph is placed 200px down from the top of the document, and 100px to the right from the left side of the document. 
    </div>
    
    <div class="top">
    This is the heading
    </div>
    
    
    </body>
    
    </html>
    Free Science Homework Help
    http://www.physicsforums.com

  5. #5
    SitePoint Enthusiast vischo's Avatar
    Join Date
    Mar 2003
    Location
    Chicago, IL
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the first section of code is your external stylesheet, you'll need to take out the <style> tags.

  6. #6
    Old Fogey mancroft's Avatar
    Join Date
    Oct 2002
    Location
    lost
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .top {position:absolute; left=200; top=20px; width=200px} should have left:200px; ie no = and px after the number

    check all the other css entries for the same errors.
    :

    :

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Your <link> tag should be lowercased in XHTML; actually, all elements and quoted attributes should be lower-cased (well, enumerated sets of attributes with limited values, i.e. input type="text").

    Also, chalk up another vote for CSS layout. More flexibility than table-based layouts if you ask me .

    Quote Originally Posted by Chuckie
    Also if the data are from a database then tables work much better.
    How so? If the data needs to be represented in a tabular format then yes, tables will work better. However, if your database record is a block of text, how would a table be a better match than a <p> tag?

  8. #8
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    goto http://physicspost.com/temp/index.html

    for some reason my left div isn't responding to the 200px top position

    also is css positioning alot of trial and error, how can I find out the dimensions I need?
    Free Science Homework Help
    http://www.physicsforums.com

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have a typo. It's "position: absolute;", not "abosolute".

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Your <link> tag should be lowercased in XHTML
    and it should be self-closing, with a slash at the end.

    Code:
    <link href="test.css" rel="stylesheet" type="text/css" />
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dethfire
    how can I find out the dimensions I need?
    you work out the layout first, doing a rough sketch on paper or in a graphics app, to get all your measurement...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  12. #12
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why doesn't xhtml give me an error when I mess up like that? whats the use of xhtml if it doesn't care if I do something wrong?
    Free Science Homework Help
    http://www.physicsforums.com

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dethfire
    why doesn't xhtml give me an error when I mess up like that? whats the use of xhtml if it doesn't care if I do something wrong?
    The error was in the CSS, not the XHTML. Also, your CSS did generate an error: namely, your positioning wasn't correct!

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by redux
    and it should be self-closing, with a slash at the end.

    Code:
    <link href="test.css" rel="stylesheet" type="text/css" />
    D'oh! I missed that! Good thing we have eagle-eyes like redux on the forums !

  15. #15
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and if you do mess up your xhtml, many browsers will exhibit weird behaviour...mostly going into quirks mode...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  16. #16
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    D'oh! I missed that! Good thing we have eagle-eyes like redux on the forums !
    well, i've got 4 eyes, so that helps
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  17. #17
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by redux
    well, i've got 4 eyes, so that helps
    Me too, sorta (contact lenses ).

  18. #18
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and if you do mess up your xhtml, many browsers will exhibit weird behaviour...mostly going into quirks mode
    lol quiks mode? wtf, this seems like poor standards to me if the only way to express an error is to go into quiks mode, my god, lol
    Free Science Homework Help
    http://www.physicsforums.com

  19. #19
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dethfire
    lol quiks mode? wtf, this seems like poor standards to me if the only way to express an error is to go into quiks mode, my god, lol
    Quirks mode is how most table-based layouts are rendered, since the browser doesn't know how else to render non-standard content. If you can't create valid content, why/how can the browser know how to render it? It's a web browser, not a mind reader .

  20. #20
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a web browser, not a mind reader
    Thats not what the sales guy told me!!!
    Free Science Homework Help
    http://www.physicsforums.com

  21. #21
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as a sidenote: the browser's job is to do the best it can to interpret and display a page. it would be a sad world if, every time it hit a page of someone trying to do standards-compliant code, and failing miserably, it would come up with a popup dialog saying "the author had no idea what standards are. proceed anyway ? yes | no | whatever".

    the burden is on the page authors to test their creations in the appropriate tools. with the easy availability of online validators, and tools such as tidy http://www.w3.org/People/Raggett/tidy/ , it's really not rocket surgery....
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  22. #22
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's really not rocket surgery....
    is that a flame??
    Free Science Homework Help
    http://www.physicsforums.com

  23. #23
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not really, no...my flames are usually quite recognisable as such
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •