SitePoint Sponsor

User Tag List

Page 3 of 6 FirstFirst 123456 LastLast
Results 51 to 75 of 139
  1. #51
    SitePoint Enthusiast agrable's Avatar
    Join Date
    Nov 2009
    Location
    California, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jennifer:

    I know EXACTLY where you're coming from. I've read the other posts, read your responses, and I've felt the EXACT same frustration you're feeling right now. There is a HUGE push to make everything CSS because of the way it's supposed to make things more user-friendly, how it's supposed to look better on cell phones and how it's supposed to make the job of revising your site easier down the line.

    I did NOT want to take the plunge into CSS because, let's face it, it's literally like learning a new language. I design my sites in Photoshop, slice 'em up and put them in a table in Dreamweaver. It's how I've done it for the last 10 years, and I don't see a need to change it.

    However, Dreamweaver has seamlessly integrated CSS commands and functionality into their interface, so working with CSS has become a little more tolerable. Here's my $0.02 for everyone: why not do both? Why not use CSS for the style elements (fonts, placement of pictures, etc.) and use tables to contain your sliced images?

    I've worked on websites that were fully CSS and while it might have taken a second less to load, the format was (yawn) boring and the site was crippled when it came to customizing the layout.

    (By the way, I have taken to learning CSS because I understand the value of it, and I've found some great classes at W3 Schools.)

  2. #52
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by agrable View Post
    (By the way, I have taken to learning CSS because I understand the value of it, and I've found some great classes at W3 Schools.)
    W3Schools is great if you want to learn how things were done back in the 20th century but the two guys who created that site haven't kept it up to date and so much of what you can learn there either already is or already is as outdated as using tables for layout.

    The biggest benefits to separating content and appearance is that it can take a few minutes to make an appearance change by altering one CSS file that would have taken months of time to update the thousands of HTML files impacted by the change. Once Netscape 4 died there was no longer any reason to keep the two jumbled together and the sensible thing to do the next time you made a two month update to your layout was to also convert it so that any subsequent changes could be done a lot more quickly by having all the pages share CSS files to define their common layout rather than having it hard coded into each of the thousands of pages by using tables in the HTML.

    Admittedly at the moment the float and positioning options in CSS work very differently to the way tables worked for layout but as soon as IE7 dies you'll be able to start using CSS tables to define your layout just as easily as you could do it with HTML ones with the added advantage of still having the layout separate in just a few files where it will be much quicker to update the next time you want to refresh the way your pages look.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #53
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by agrable View Post
    I did NOT want to take the plunge into CSS because, let's face it, it's literally like learning a new language. I design my sites in Photoshop, slice 'em up and put them in a table in Dreamweaver. It's how I've done it for the last 10 years, and I don't see a need to change it.
    Sure, if you don't have a problem with slicing and dicing a PSD then you won't understand why you shouldn't use tables for layout either. But when you decide to join the 21st century, you're going to find a learning curve so steep it's practically vertical.

    Websites designed as PSDs may look pretty at first glance, but they are almost universally awful to use, and woefully inaccessible. And I would much rather build a site that is easy for everyone to use, regardless of what computer setup they've got, than one that allows them to admire its beauty for a couple of seconds until they get stuck because the layout fails miserably on their machine.

    I've worked on websites that were fully CSS and while it might have taken a second less to load, the format was (yawn) boring and the site was crippled when it came to customizing the layout.
    A lot of people made cruddy CSS layouts, I won't deny that. Most of the time, that's because they're either not natural designers (so wouldn't come up with anything fancier whatever method they used) or because they're approaching the design from a table-based perspective, which is never going to work. Designing with CSS is a completely different process to designing with tables, so if you try to shoehorn your table-based slice-and-dice into a tabular grid CSS framework then it's no wonder you're going to get the worst of all worlds.

    Have you ever looked at CSS Zen Garden? I thought it was old hat by now, but it sounds like it's completely passed you by for the last 7 years. It has a vast array of different designs and layouts that all use the same HTML code. And if you think that the range of designs there represents "(yawn) boring and ... crippled when it comes to customizing the layout" then I can't even begin to imagine what kind of designs you need to keep your attention span.

  4. #54
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Atlanta, GA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the web moving very much to mobile devices as well, you'd never be able to pull this off with tables.

    http://www.alistapart.com/articles/r...ve-web-design/

  5. #55
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Paul! Thank you sooooo much. I really appreciate the time you took to SHOW me rather than tell me. Being the visual person I am, I learn by looking at examples. Consequently the sites that just talk about CSS properties I don't find very useful.

    I'm going to be studing what you did and try to figure it out. I have some questions.

    It seems there are lots of different ways to accomplish the same task using CSS. Is there a "best practices" guide, or doesn't it matter?

    Is it okay if I get stuck on something to come here and get somet help?

    I'm going to convert all the sites I've done to CSS. How bout I come here and have you guys do the CSS for me? JUST KIDDING!

  6. #56
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post

    It seems there are lots of different ways to accomplish the same task using CSS. Is there a "best practices" guide, or doesn't it matter?
    When I moved to CSS a few years back I got copies of Beginning CSS Web Development and Pro CSS techniques both from Apress. It took about a week or two to go through both books and I would suggest them to anyone coming from an html background.

    The books I mentioned will feel like greek at first, but, taken in pace they really teach you a solid understanding of CSS. Sitepoint is a great place to ask questions too.

    I usually suggest to anyone trying to learning something new to get a good book(s) and stick to it vs jumping all over the web into tutorials -- doing this usually causes brain overload and confusion. Sorta like trying to rebuild an engine by reading instructions on a forum before you learn to change the oil.

    Good luck on your studies and be sure to ask questions here at SP, there are many great folks eager to help.
    intragenesis, llc professional web & graphic design

  7. #57
    SitePoint Evangelist Unit7285's Avatar
    Join Date
    Dec 2003
    Location
    UK
    Posts
    514
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Earlier posters have explained very clearly the advantages of taking the plunge and moving to css-based layouts, so I won't go there.

    But, leaving aside technical and design considerations, there is a very important Business Reason to make the change.

    One day, one of your new clients is going to contact you and say: "Hey, I've just found out the website you finished for me last week is laid out with tables. My friend told me this is obsolete and no one uses this method anymore. He gave me a whole list of reasons. I've looked this up on the web and everything I read says that websites should be laid out using CSS. Tables have been obsolete for years, apparently. It seems like you've sold me old, obsolete technology at a state of the art new price! If I had known you were going to do this I would never have gone ahead! I'm very disappointed that you've let me down like this. I need you to change my site to a CSS layout. When can you have it ready?"

    This is a disaster waiting to happen, and it's lose-lose all the way.

    Progress is not always convenient! But you need a very good reason to fall behind the times in the web industry, and there quite simply isn't a good reason in the tables/css argument.


    Paul

  8. #58
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    This is something that often comes up when someone hasn't embraced semantics; Is the content tabular data? No? Then why is it in a TD...

    Though I can understand where you are coming from as a lot of the "hate" on tables is 100% bullcookies -- either manufactured by those who just irrationally hate them, propagated by those who never learned there are tags other than TR and TD that can go into them, and mimicked like second rate parrots by people who don't actually understand the subject .

    Even the 'it's not tabular data' arguement doesn't exactly hold up under scrutiny when one of the the American Heritage dictionary definitions of TABLE is:

    An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form. Columns and rows? Sounds like a website to me. So much for it being non-semantic or a 'hack'.

    But let's look at some of the other 'myths'

    "It's less code avoiding tables" -- no, it's only less code to not ABUSE tables slapping them around every element! You see this all the time where people nest table in a table in a table in a table for something that as a tabular layout should only need ONE table, not twenty.

    Try making a content first hack-free (as in REAL hacks like * html or that markup bloating IE conditional bull) three column 100% min-height layout that's as small and clean source-wise and as bulletproof cross browser as this:
    http://battletech.hopto.org/html_tut...3coltable.html

    So much for smaller code.

    "Tables are deprecated" -- Uhm, no... since when? Complete nonsense yet we STILL have people making this claim, which is just ignorant. They exist for tabular data - end of story.

    "Tables take too long to load" -- If written properly they take no more or less bandwidth (and often take less!) then they do not take longer to load -- PERIOD! Typically the people making this claim are actually talking about rendering time, which combined with this "fastest browser" obsession being some of the biggest online idiocy of the past decade and a half... Bandwidth is still in most every case slower than the machine that's receiving it for rendering -- quite frankly if an am386/40 running the "abysmally slow" IE3 under windows 3.1 was able to render a table in a reasonable amount of time for the end user, this particular claim is 100% manure when you can get a 1ghz HANDHELD. So much for load time.

    "They should be avoided at all costs" -- WHY? If you HAVE tabular data it's the right tag set to use... This has been reaching ridiculous proportions of late in forum skins (see the bloated mess that is vBull4), where we have people abusing definition lists and nested unordered lists on OBVIOUSLY TABULAR DATA... like a board index. Take this page for example:

    http://forums.digitalpoint.com/forumdisplay.php?f=39

    That is OBVIOUSLY tabular data - the columns are related, the rows are related -- and yet if we look at the code for what should be a CAPTION and THEAD of TH we find this idiotic train wreck:

    Code:
    <div id="threadlist" class="threadlist">
    <form id="thread_inlinemod_form" action="inlinemod.php?forumid=39" method="post">
    <h2 class="hidden">Threads in This Forum</h2>
    
    <div>
    <div class="threadlisthead table">
    <div>
    <span class="threadinfo">
    <span class="threadtitle">
    <a href="forumdisplay.php?f=39&amp;sort=title&amp;order=asc" rel="nofollow">Title</a> /
    <a href="forumdisplay.php?f=39&amp;sort=postusername&amp;order=asc" rel="nofollow">Thread Starter</a>
    </span>
    </span>
    
    
    <span class="threadstats td"><a href="forumdisplay.php?f=39&amp;sort=replycount&amp;order=desc" rel="nofollow">Replies</a> / <a href="forumdisplay.php?f=39&amp;sort=views&amp;order=desc" rel="nofollow">Views</a></span>
    <span class="threadlastpost td"><a href="forumdisplay.php?f=39&amp;sort=lastpost&amp;order=asc" rel="nofollow">Last Post By<img class="sortarrow" src="http://b.dpstatic.com/buttons/sortarrow-white-asc.png" alt="Reverse Sort Order" border="0" /> </a></span>
    
    
    </div>
    </div>
    Endless div for nothing, h2 for caption's job, (of text that's not even shown on the page, so that's content cloaking!), semantically neutral tags around elements that should have meanings applied to them... it's 991 bytes of whitespace stripped markup doing the job of 939 bytes of formatted table element's!

    Code:
    <form id="topicList" action="inlinemod.php?forumid=39" method="post">
    	<table>
    		<caption>Threads in This Forum</caption>
    		<thead>
    			<tr>
    				<th colspan="2">
    					<a href="forumdisplay.php?f=39&amp;sort=title&amp;order=asc" rel="nofollow">Title</a> /
    					<a href="forumdisplay.php?f=39&amp;sort=postusername&amp;order=asc" rel="nofollow">Thread Starter</a>
    				</th>
    				<th class="replies">
    					<a href="forumdisplay.php?f=39&amp;sort=replycount&amp;order=desc" rel="nofollow">Replies</a>
    				</th>
    				<th class="views">
    					<a href="forumdisplay.php?f=39&amp;sort=views&amp;order=desc" rel="nofollow">Views</a>
    				</th>
    				<th class="lastPost">
    					<a href="forumdisplay.php?f=39&amp;sort=lastpost&amp;order=asc" rel="nofollow">
    						Last Post By
    						<img src="http://b.dpstatic.com/buttons/sortarrow-white-asc.png"
    							alt="Reverse Sort Order"
    						/>
    					</a>
    				</th>
    			</tr>
    		</thead>
    It gets worse when you get to the actual entries where it abuses OL, UL, and stuffs it full of 'hidden' text for javascripted garbage. "Oh but the scripting enhances the user experience and not using tables makes it more accessibile" -- yeah, turn CSS off and say that. (I particularly like how the javascript is thrown into an endless loop when CSS is disabled in Opera). It's hardly surprising that it ends up an unbelievable 242k of markup to deliver 6k of visible content and 20k total content -- proof of ineptitude of the highest magnitude. It's no wonder Sitepoint still hasn't upgraded to vBull 4 -- four is such a disaster I'd not be surprised for them to be giving SMF or phpBB a serious look instead! They got balls o' thunder charging $200 a pop for that rubbish!)

    Really the problem with tables for layout was NEVER actually the use of tables for layout itself no matter what some people say. The problem was people continuing to use fat bloated rubbish markup in building their tables, nesting them endlessly for no fathomable reason and not using ALL the tags available to us. A great example of this I use a good deal is this example -- which you'll see people do all the blasted time:

    Code:
    <table cellspacing="0" cellpadding="0" border="0" class="myTable">
    	<tr>
    		<td colspan="4" class="bigTitle"><b>Table Title</b></td>
    	</tr><tr>
    		<td>&nbsp;</td>
    		<td class="heading"><b>Col 1</b></td>
    		<td class="heading"><b>Col 2</b></td>
    		<td class="heading"><b>Col 3</b></td>
    	</tr><tr>
    		<td class="rowHeading"><b>Row 1</b></td>
    		<td class="rowData">Data 1-1</td>
    		<td class="rowData">Data 1-2</td>
    		<td class="rowData">Data 1-3</td>
    	</tr><tr>
    		<td class="rowHeading"><b>Row 2</b></td>
    		<td class="rowData">Data 2-1</td>
    		<td class="rowData">Data 2-2</td>
    		<td class="rowData">Data 2-3</td>
    	</tr><tr>
    		<td class="rowHeading"><b>Row 3</b></td>
    		<td class="rowData">Data 3-1</td>
    		<td class="rowData">Data 3-2</td>
    		<td class="rowData">Data 3-3</td>
    	</tr>
    </table>
    Unneccessary attributes on the TABLE -- COLSPAN, CLASS and B doing CAPTION's job -- class="heading" and B doing TH's job, &nbsp doing empty-cells:show; 's job, .rowheading and .rowdata doing TBODY, TH and TD's job. There's ZERO excuse for the markup to do that same job to be more than:

    Code:
    <table cellspacing="4" class="myTable">
    	<caption>Table Title</caption>
    	<thead>
    		<tr>
    			<td></td>
    			<th>Col 1</th>
    			<th>Col 2</th>
    			<th>Col 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>Row1</th>
    			<td>Data 1-1</td>
    			<td>Data 1-2</td>
    			<td>Data 1-3</td>
    		</tr>
    		<tr>
    			<th>Row2</th>
    			<td>Data 2-1</td>
    			<td>Data 2-2</td>
    			<td>Data 2-3</td>
    		</tr>
    		<tr>
    			<th>Row3</th>
    			<td>Data 3-1</td>
    			<td>Data 3-2</td>
    			<td>Data 3-3</td>
    		</tr>
    	</tbody>
    </table>
    Which provides JUST as many CSS hooks for styling thanks to the use of *SHOCK* semantic markup... and it's a 40% reduction in code.

    Bottom line, tables exist for a reason, so use them when you have good reason to. The key is NOT to use them when they are unneccessary... As I've said a dozen times:

    When to use a table:

    1) When the rows and columns are related, and typically have headings that apply to the ENTIRE row and/or column. Again, forum indexes come to mind where you have obvious fields of data, each row all the same type of data inside a row, each column being information for a record.

    2) When the faux-column effect just won't cut it.

    3) When you require RELIABLE vertical positioning of dynamic height content in a fixed height or sibling related height element.

    When NOT to use a table:

    1) When the content is unrelated elements that should not be semantically grouped.

    2) When you would only have one column or worse, just one TD inside the TABLE

    3) When you do not want rows and columns when CSS is disabled.

    There's plenty of good reasons to not use tables for layout, we don't need to be making up fictional excuses... There are plenty of good reasons to USE tables such as when the data is *SHOCK* tabular, so this "don't use tables at any cost" mentality of abusing things like definition lists and ordered lists in a NON-SEMANTIC manner is some of the biggest idiocy this side of the White House lawn.

    But of course when people are still doing garbage like clearfix, spacer.gif's and px metric fonts on content, you really can't expect them to do anything properly.

  9. #59
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post

    What is the benefit of separation of document content from document presentation?
    I cringed when I saw this. Content, Behavior, and Presentation separation is VERY IMPORTANT. Sorry to troll, but it's essential to do so because it helps the site development in the long run. Say a style is breaking the site. Instead of going back to the content and screwing that up, guess what you get to do? you can make the change on the CSS or revert via SVN without losing any content changes. Or changing the layout. It should be standard to separate these for error trapping and further customization.

    And kudos to DeathShadow60. Good demystification there!
    Kevin(vs.net) Kelly
    http://kevinvs.net

  10. #60
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I have to <strong>disagree</strong> with ds60.

    He was not actually making a correct case, he was just gaving bad examples to help turn discussion a certain way.

    Tables for layout: a big no-no.

  11. #61
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Tables for layout: a big no-no.
    ... and if the data being laid out is TABULAR?

    Which is really all I was trying to say. It goes with my philosophy that the content should dictate the base markup, as opposed to the layout dictating the markup -- and part of why the whole 'draw a goof assed picture in photoshop' first approach is completely back-assward.

    Are you saying don't use tables when the data is in fact tabular? You'll notice I list "unrelated data" as a reason NOT to use tables -- as I said there are good reasons NOT to use tables for layout.

    I was just arguing against the extreme of people nowadays saying "Never use tables" -- which is SO common and SO ignorant. Right now so many people, ESPECIALLY forum skinners are abusing other tags far beyond their semantic meaning to mark up TABULAR DATA; the view has shifted too far to the opposite extreme. There is NOTHING wrong with tables for layout if the data is TABULAR -- which is why saying "tables for layout: a big no-no" is the wrong thing to say.

    Even if when doing something simple like a three column center dynamic layout it is in fact the wrong markup semantically, because the content of each column may be organized together, but is not necessarily related and sharing the same column heading.... that's when you use DIV.

    But if it has obvious rows and columns you have no business using anything BUT a TABLE and yet you see people doing the exact opposite -- all because of the entire "anti-table mafia" and it's repeated lies -- and the people DUMB ENOUGH to buy the lie.

  12. #62
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    like i said in my early post as does deathshadow that data should be laying basis of what markup to use. someone might have a handful of skills and time if they put tabular data in css still they will runing into many problem. as i work on a project wich has large tabular forms.95% is controlled by css (everything expect tables) and just 5 % r of tables. and its a massive app for like 5000 pages. i love semnatic markup and css though i m still clumsy but it gets better as you
    All those who wander aren't lost.

  13. #63
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In a way, I see here the same little vocabulary battle we had over the "empty element", that made me adopt the "void element" collocation instead, when referring to elements like <meta>, <input>, <br>, <hr> etcetera.



    Quote Originally Posted by deathshadow60 View Post
    [...] the content should dictate the base markup, as opposed to the layout dictating the markup [...].
    Tables for layout, in this thread, and as a general web dev phrase, means exactly this: that the layout dictates the markup. It depicts using tables for presentation.





    Quote Originally Posted by deathshadow60 View Post
    Are you saying don't use tables when the data is in fact tabular? You'll notice I list "unrelated data" as a reason NOT to use tables -- as I said there are good reasons NOT to use tables for layout.
    No Tables are to be used whenever there is a right use for them. This thread was never about finding ways to make tables deprecated.





    Quote Originally Posted by deathshadow60 View Post
    I was just arguing against the extreme of people nowadays saying "Never use tables"
    A reason for which the OP probably started this thread in the first place. But there was a little nuance there: Never use tables for layout. Just for layout. Only for layout. Especially when there is no tabular data involved.






    Quote Originally Posted by deathshadow60 View Post
    Even if when doing something simple like a three column center dynamic layout it is in fact the wrong markup semantically, because the content of each column may be organized together, but is not necessarily related and sharing the same column heading.... that's when you use DIV.
    That was what the OP was questioning and this is where my answer fitted: tables for layout are not the better, smarter choice.

  14. #64
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jennifer,

    Today, there should be no such thing as a designer or a developer. They must be both. To do things well, and things should be done well, taking advantage of the progress of the technology is paramount. I started with stealing code into notepad.exe and making .jpg images in Photoshop 5.5. Since, I learned the beauty and power of CSS and jQuery, dropping tables long ago.

    I vaguely understand your trepidation and reticence towards moving to CSS, but, simply stated, you should.

    Keep in mind, you may not always be the person who works on your site. Delving through nested tables is a pain. CSS is easy.

  15. #65
    Non-Member buzzerchat's Avatar
    Join Date
    Aug 2010
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    always optimize website for IE,FIREFOX,CHROME and you will have no problems.

    I suggest to use css instead of tables as css is used on most popular websites.

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post

    It seems there are lots of different ways to accomplish the same task using CSS. Is there a "best practices" guide, or doesn't it matter?
    That's a very good question because CSS is very flexible and you can often achieve layouts in many different way. It's possibly because that CSS is so flexible that it causes problems to those that are starting CSS because they find one way of doing something and think that because it works in a limited example that it must be the right and only way to do something.

    In all cases the methods you use depend very much on what the layout needs to achieve and how it will react in certain circumstances. There is no simple one method approach but a variety of techniques that you should use depending on the situation.

    Most beginners latch on to absolute positioning because it is relatively easy to understand (i.e.you just place the element where you want it). However, constructing the main structure of a site using absolute positioning is not the best approach unless you have a very simple layout because it is too rigid a structure and for example you cannot place a footer under 2 absolute columns

    In most layouts you would use static content (positioned with margins) and then use floats when you want horizontal columns. Floats have all sorts of quirks and foibles to learn but they are the most flexible and useful element in the css toolbox (don't let anyone tell you that floats were never meant for layout because the first examples from the W3c site show examples of css to layout columns way back at the the origins of css (the page has how been deleted because it was so old so I can't link to it) ).

    In the future (CSS3) we have the flexible layout model to look forward to and a lot of the awkward problems will not be so much of an issue.

    Absolute positioning is mainly used in small doses within a parent that has position:relative applied so as to create a stacking context for the absolute element. Usually the relative parent would have a height (or intrinsic height) defined to maintain the flow of the document and then the absolute element doesn't impact on the flow of the document but will sit in position (e.g. placing an icon to the side of a header banner/logo).

    So, in answer to your question "yes it does matter" what you use to achieve the layout you want and the methods you use depend on what you want to achieve.

    Is it okay if I get stuck on something to come here and get somet help?
    This is what we are here for and we much prefer people to try first and then shout for help when they get stuck rather than just asking for a whole solution.

    I gave you a full example of your table layout just to show that it was only 30 minutes work to do similar in css once you know what you are doing. A lot of people who use tables say that it is quicker to work in tables but that just isn't the case once you know what you are doing.

    As mentioned above there are a number of things that css are bad at and it's best to avoid these types of layouts is possible (equal columns, vertical-alignment etc) although there are fixes for these I wouldn't attempt them (apart from faux columns) until you understand how they work.

    If IE6 and IE7 support isn't required you can use the display table properties for the effects mentioned above but if ie6 and 7 support is required then a simple table for that element only isn't really that big a crime when there is no better method available. The W3c actually state that tables should not be used for layout but also say something like "Until such time" that the effect can be achieved in CSS.

  17. #67
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigsilk View Post
    Delving through nested tables is a pain. CSS is easy.
    Quote Originally Posted by Paul O'B View Post
    I gave you a full example of your table layout just to show that it was only 30 minutes work to do similar in css once you know what you are doing. A lot of people who use tables say that it is quicker to work in tables but that just isn't the case once you know what you are doing.

    I recently had a client who just wanted some updates to their existing site, which was made a few years ago and was tables-based (including nested tables). These updates involved adding new pages and rearranging the content to make things easier for the visitor to find. While some CSS was used for styling, there was excessive use of classes rather than heading, paragraph and list tags, which probably wasn't helping their search engine rankings, which were also a concern I was asked to consider when making the updates.

    I recoded the whole thing in CSS because trying to not break the layout, add menu items etc was just annoying, and I was able to replicate the base layout in CSS very quickly. Since there's a chance any further updates needed in the future might be done by me also, I decided it was a worthwhile investment of my time.

    Quote Originally Posted by JenniferBigBlue View Post
    It seems there are lots of different ways to accomplish the same task using CSS. Is there a "best practices" guide, or doesn't it matter?
    I have a few books on the subject, off the top of my head my favourite would have to be CSS Mastery by Andy Budd. As a Dreamweaver fan you might like Mastering CSS with Dreamweaver CS4 by Stephanie Sullivan and Greg Rewis (there is also a CS3 version).

    And then there's of course the several books SitePoint has published on the subject, I think the CSS Anthology and the Ultimate CSS Reference would be near the top of my list also.

  18. #68
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by doubleedesign View Post
    I have a few books on the subject, off the top of my head my favourite would have to be CSS Mastery by Andy Budd. As a Dreamweaver fan you might like Mastering CSS with Dreamweaver CS4 by Stephanie Sullivan and Greg Rewis (there is also a CS3 version).

    And then there's of course the several books SitePoint has published on the subject, I think the CSS Anthology and the Ultimate CSS Reference would be near the top of my list also.
    +1 to CSS Mastery, I quite like that book. I also own the Ultimate CSS Reference, which was indeed co-authored by the one and only Paul O'B here. Another good one is Handcrafted CSS, by Dan Cederholm.

    Even those of us who have been using CSS for years and years like reading these kinds of books to hone our craft

  19. #69
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karpie View Post
    +1 to CSS Mastery,
    If someone is starting out in CSS, then the two books Beginng and Pro CSS Techniques by Apress would be my suggestion. When I was diving into CSS (coming from a table based background) the CSS Mastery book was too condensed for my taste.

    However, once I completed the Beginning book and hit the Pro CSS Techniques book, I would crack open the Mastery book as an added source of understanding a specific topic.

    I still have all of them on my bookshelf and refer back to them every now and again.

    my 2 cents anyways.
    intragenesis, llc professional web & graphic design

  20. #70
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,030
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well, the topic has been beat to death again but I thought I would add one or two more compelling reasons why CSS is a good choice for layout.

    1) Tables will not show you what's inside them until the table markup has been loaded. This means that while the outer table is loading, the visitors don't see anything.

    I recently ported a catalogue website from a proprietary CMS that used tables for layout to an Open Source platform using html/css for layout and in the process I was able to see how quickly the pages rendered in the non-table website. The design didn't change and the page weight was similar because there was a lot of content and markup making the pages but the non-table pages loaded almost immediately whereas the table pages appeared to take a few seconds.

    2) CSS will provide more options for layering graphical elements, even semi-opaque elements on top of other semi-opaque elements which will lead to more sophisticated designs.

    3) As has been mentioned CSS and Dreamweaver play very well with each other.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  21. #71
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all the people who were patient with me and helped me understand the value of CSS. I started converting one of the largest sites I manage into CSS. It was actually quite fun to do. Working with CSS is like solving a gigantic word, number and logic problem! When I would get something to look the way I wanted after struggling to figure it out, it felt like I had climbed Mount Everest and made it!!

    I have only created one page on the site. I notice I'm hesitant to then use that template to all the pages until I feel sure that my code is halfway decent. Would you mind looking at what I did and see if there are any claring errors?

    http://goldcoastyachts.com/GCYnew/testing.htm

    I get an "Error on page" in the bottom of my browser. Not sure why.

    You talked about some validator? How do I run this through a validator and even more importantly am I likely to understand the information it gives me? (Remember, I don't know any programming languages!)

    So how did I do? Any feedback would be welcome! (assuming you're kind about it

  22. #72
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    The validator is at http://validator.w3.org/ and you simply enter the URL you want to check and it will give you the errors and a short explanation.

    You've currently got 20 errors, which isn't a ton of errors - I've had many, many more (I won't embarass myself with specifying a number). In reality, you've got one error - extra closing </p> tag.

    Eleven of them are missing an alt attribute on all images (the alt attribute is used by screen readers to identify what an image is), so adding an alt attribute for each image with perhaps the name of the boat would solve all of those. Then you got two errors for the script tag because you need to add type="text/javascript" to the element definition. And one for the target attribute which was removed but a lot of people still use because there's no better replacement - though it's arguably a usability issue. The rest are attributes which should be specified in your css instead of in the html because they are presentational and not content-related.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  23. #73
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Looks pretty good!
    As Paul says, the validator will pick up a range of problems - but 20 errors is less than most of the pages on the original version of the site, so you've improved already!

    One thing I would suggest is that you use proper subheading elements (eg <h2>) for the subheadings, rather than <p><b>. Apart from that, the real test will be when you roll it out to other pages (even if only on the test site at first!), but judging by this page, hopefully you won't have too many nasty surprises when you try that.

  24. #74
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave and Stevie!!

    I used the validator you gave and fixed all the errors. Yeah!

    I know what you mean Steve. When I tested the page with really short content, my footer sat on top of my side image. Arggh! I fixed that but I'm sure there will be other things as I put in new content.

    I just ordered 2 books on CSS. I guess I'm officially a table to CSS convert. I will NOT drink the koolaid!

    Thanks again!

  25. #75
    SitePoint Evangelist Unit7285's Avatar
    Join Date
    Dec 2003
    Location
    UK
    Posts
    514
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    At the time of writing (ie now!) I'm seeing a huge horizontal scroll for the testing page. I think you need to tweak the widths of the menu and footer divs to get rid of this.


    Paul


Tags for this Thread

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
  •