Website Layout

2»

Comments

  • remiremi remedy [blu.knight] Join Date: 2003-11-18 Member: 23112Members, Super Administrators, Forum Admins, NS2 Developer, NS2 Playtester
    edited April 2005
    I like tables though. Using CSS makes it rely too much on the person's resolution and text size, and if you change those, it screws up everything. Tables are confusing as hell to set up, but I definitely prefer them.

    edit: Looks like your site could have easily been done with tables, and the way it is now, it screws up if you hit ctrl+ twice. Mine takes three times because I didn't actually make the link box stretchable horizontally. (otherwise the only thing that gets screwed up is the line under the date, which I did with CSS)
  • antifreezeantifreeze The guy with the goods! Join Date: 2003-05-12 Member: 16232Members, Constellation
    Div's are used because they are far more accessible than tables, and being in the UK you can be sued if your site isn't accessible. CSS isn't dependant on screen resolution at all if it is done right. The lowest resolution that site is aimed to support is 800x600.

    If you aim to have any career in web design you must learn to use CSS to layout your site.
  • remiremi remedy [blu.knight] Join Date: 2003-11-18 Member: 23112Members, Super Administrators, Forum Admins, NS2 Developer, NS2 Playtester
    edited April 2005
    Why are tables not accessible?
    (and looking at your source, you do have one table! <!--emo&:0--><img src='http://www.unknownworlds.com/forums/html/emoticons/wow.gif' border='0' style='vertical-align:middle' alt='wow.gif' /><!--endemo--> )

    I also don't plan to have a future in web design.
    I also spent something like 2 to 4 hours making those stupid tables, I don't want to spend another huge amount of time to learn CSS and remake them.

    edit: That bar under your headings also wouldn't get screwed up by differnet text sizes if you had made it using a table.
    edit2: (also looking at your source makes it apparent that it is much easier to update your page then mine.
  • antifreezeantifreeze The guy with the goods&#33; Join Date: 2003-05-12 Member: 16232Members, Constellation
    Thing thing with tables is that they are designed to show tabular data, this may not be a problem on most browsers such as IE and Firefox, but to others it can be a problem. Browsers which convert the page into speach for example get really confused by this and sometimes don't know how to describe the page. This prompted W3.org to set up WAI. Info can be found here:
    <a href='http://www.w3.org/WAI/' target='_blank'>http://www.w3.org/WAI/</a>

    When i get in from the pub i might have a quick go at de-tabling you page and give it some CSS.

    There are no tables on my pages. View my source and do a find for anytable element "table", "tr", "td" and you wont find them. The easy to update feature is just something which happens when you use CSS.
  • MedHeadMedHead Join Date: 2002-12-19 Member: 11115Members, Constellation
    <!--QuoteBegin-Psyke+Apr 17 2005, 06:45 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (Psyke @ Apr 17 2005, 06:45 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Why are tables not accessible?
    (and looking at your source, you do have one table! <!--emo&:0--><img src='http://www.unknownworlds.com/forums/html/emoticons/wow.gif' border='0' style='vertical-align:middle' alt='wow.gif' /><!--endemo--> )

    I also don't plan to have a future in web design.
    I also spent something like 2 to 4 hours making those stupid tables, I don't want to spend another huge amount of time to learn CSS and remake them.

    edit: That bar under your headings also wouldn't get screwed up by differnet text sizes if you had made it using a table.
    edit2: (also looking at your source makes it apparent that it is much easier to update your page then mine. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
    Tables aren't bad entirely: using them for tabular data is quite acceptable, as that is the intended purpose of tables. While using something contrary to its purpose isn't terribly wrong, the other negative factors involved in using tables for layout makes their use a poor choice.

    As it was said earlier, there are some problems with screen readers reading sites made with tables. There is also the issue with readability and file size in comparison with much easier to read XHTML using CSS. Upgrading the site is easier, believe me. An XHTML site is quite modular, and pieces can be cut and pasted around much easier than a site that uses tables. There aren't any misplaced <tr> and <td>s! Also, because an XHTML site is often designed with CSS, it degrades much easier. If an old browser can't render the CSS file, a perfectly legible HTML base can still be seen. If you want to know what I mean, fire up Mozilla Firefox and visit a site with XHTML/CSS, and then go to View>Page Style>No Style and see how the site looks in comparison to a table-based site. The simple text of an XHTML site is better because it ensures everyone - even those on bad, old browsers - can see the site if they choose to do so.

    As you can do with tables, you can choose in CSS whether your site is a fixed width or dependent upon the size of the screen on which it is being viewed. antifreeze could have decided to set his navigation to a fixed width and the font to a pixel size, but he didn't. His site, even when scrunched up, will still be usable, buttons and all. If he were to set it with a fixed width, people would have to scroll side to side to be able to get all the buttons, and while that may look good aesthetically, the accessibility would be risked. He could avoid the frequency of the folding of the site by making the words a little shorter in the navigation.

    Learning XHTML/CSS now will save you a lot of time updating your site. It may seem daunting, but if you know HTML, you'll be able to easily update your skills to XHTML/CSS. It's logically laid out, uses most of all the same elements of HTML, but takes a step forward in design and content layout.
  • remiremi remedy [blu.knight] Join Date: 2003-11-18 Member: 23112Members, Super Administrators, Forum Admins, NS2 Developer, NS2 Playtester
    I agree that it probably is better, but for now I don't really want to go to the effort. I'll save it for another day... But anyways, I'm working on another site, and I have this table here that isn't working properly:

    <table border=0 bgcolor="#FFFFFF" cellpadding=0 cellspacing=0>
    <tr hieght=3>
    <td width=3><img src="Text_TL.png"></td>
    <td background="Text_horizontal.png"></td>
    <td colspan=2 rowspan=2><img src="Text_Top.png"></td>
    </tr>
    <tr height=12>
    <td width=3 background="Text_vertical.png"></td>
    <td></td>
    </tr>
    <tr>
    <td width=3 background="Text_vertical.png"></td>
    <td colspan=2>TExt goes here and such. Really.


    Yup.</td>
    <td width=3 background="Text_vertical.png"></td>
    </tr>
    <tr height=3>
    <td width=3><img src="Text_BL.png"></td>
    <td colspan=2 background="Text_horizontal.png"></td>
    <td width=3><img src="Text_BR.png"></td>
    </tr>
    </table>

    Stupid thing...
    <td colspan=2 rowspan=2><img src="Text_Top.png"></td>
    That's the command that is screwing it up, I don't think it likes having colspan and rowspan being used in th same place. everything else works fine, but I can't seem to get that image there. There are other ways I could do it, but I would prefer to just do it this way so I don't need to create any more gfx.
  • MedHeadMedHead Join Date: 2002-12-19 Member: 11115Members, Constellation
    Can you provide the graphics you are using now?
  • remiremi remedy [blu.knight] Join Date: 2003-11-18 Member: 23112Members, Super Administrators, Forum Admins, NS2 Developer, NS2 Playtester
    edited April 2005
    I changed the way the tables worked and added a few more gfx. The design isn't nearly as good as my last though. I may try again later. If you'd like to see it, here it is:

    <a href='http://home.comcast.net/~sky3987/HatrOS/' target='_blank'>http://home.comcast.net/~sky3987/HatrOS/</a>

    edit: Fixed Link.
Sign In or Register to comment.