Quantcast
Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
    1. Welcome to GTAForums!

    1. GTANet.com

    1. GTA Online

      1. The Cayo Perico Heist
      2. Find Lobbies & Players
      3. Guides & Strategies
      4. Vehicles
      5. Content Creator
      6. Help & Support
    2. Red Dead Online

      1. Frontier Pursuits
      2. Find Lobbies & Outlaws
      3. Help & Support
    3. Crews

    1. Red Dead Redemption 2

      1. PC
      2. Help & Support
    2. Red Dead Redemption

    1. Grand Theft Auto Series

      1. St. Andrews Cathedral
    2. GTA VI

    3. GTA V

      1. Guides & Strategies
      2. Help & Support
    4. GTA IV

      1. The Lost and Damned
      2. The Ballad of Gay Tony
      3. Guides & Strategies
      4. Help & Support
    5. GTA San Andreas

      1. Guides & Strategies
      2. Help & Support
    6. GTA Vice City

      1. Guides & Strategies
      2. Help & Support
    7. GTA III

      1. Guides & Strategies
      2. Help & Support
    8. Portable Games

      1. GTA Chinatown Wars
      2. GTA Vice City Stories
      3. GTA Liberty City Stories
    9. Top-Down Games

      1. GTA Advance
      2. GTA 2
      3. GTA
    1. GTA Mods

      1. GTA V
      2. GTA IV
      3. GTA III, VC & SA
      4. Tutorials
    2. Red Dead Mods

      1. Documentation
    3. Mod Showroom

      1. Scripts & Plugins
      2. Maps
      3. Total Conversions
      4. Vehicles
      5. Textures
      6. Characters
      7. Tools
      8. Other
      9. Workshop
    4. Featured Mods

      1. Design Your Own Mission
      2. OpenIV
      3. GTA: Underground
      4. GTA: Liberty City
      5. GTA: State of Liberty
    1. Rockstar Games

    2. Rockstar Collectors

    1. Off-Topic

      1. General Chat
      2. Gaming
      3. Technology
      4. Movies & TV
      5. Music
      6. Sports
      7. Vehicles
    2. Expression

      1. Graphics / Visual Arts
      2. GFX Requests & Tutorials
      3. Writers' Discussion
      4. Debates & Discussion
    1. Announcements

      1. GTANet 20th Anniversary
    2. Support

      1. Court House
    3. Suggestions

[TUT] From frames/tables to div tags


Recommended Posts

From frames and tables to div tags

Notice: clicking the links throughout the guide will allow you to see how the site would look with the code we have made until now.

 

This guide is to tell you how to get from tables and frames to <div> tags.

 

Questions

Why go over to <div> tags? Tables and frames are very easy to use.

 

Yes, tables and frames are basically easy to use. But frames has a lot of problems, mostly it cause it can mess up any design, either by the user being allowed to move the borders or the wrong stuff opens in a frame. Also frames is not supported by many browsers, and it requires browsers to download a lot of useless stuff.

 

Secondly, tables is without doubt an better option than frames, but tables still have a lot of useless tags that you can have saved, and tables was originaly meant for data and not content.

 

So why is <div> tags so much better?

 

I can't even start to desribe how annoying making frames is, and tables has rows and cells and all sorts of stuff you need to take care of. While <div> tags only have their own <div> </div> tags to ensure the matter with, which means that each part of your content does not have to be in cells which are controlled by the table, while <div> tags can easily be set different towards each other, in fact none of the other <div> tags having some to say about the other tag.

 

The Guide

Let's first start out with something you might already know;

 

Tables;

 

<table><tr>	<td colspan="2">		Here is a logo.	</td></tr><tr>	<td>		A navigation list.	</td>	<td>		The content	</td></tr></table>

 

See how this page looks here.

 

While the exact same code could be resovled this way;

 

 

<div id="logo">Here is a logo.</div><div id="navi">A navigation list.</div><div id="main">The content</div>

 

See how this page looks here.

 

Now you may think that the page with the table tags looks better than the one with the div tags.

 

Perhaps, but we need CSS to make this work. Since we are not going to work with the tables again, this is the last time you see that code.

 

So let's start with the CSS code. First of all, we assume that the logo is hovering above both the navigation and the content, while the content and the navigation are side by side. So we make the navigation float left.

 

CSS:

 

div#navi {float: left;}

 

See the page now.

 

Much better aye?

 

Okay, let's move on, in order to give it a bit of sense, let's add a border to the logo, a border that is on either side and on the bottom, just not the top, just to make some graphical stuff.

 

CSS:

 

div#logo {border-width: 0px 1px 1px;border-style: none solid solid;border-color: #545454;}

 

See the page now.

 

Remember; if we were doing this with tables the size of the cell would not have been that width. But let's go on by adding borders to each of the bottom parts.

 

CSS:

 

div#navi {float: left;border-width: 0px 1px 1px 0px;border-style: none solid solid none;border-color: #545454;}div#main {border-bottom: 1px solid #545454;}

 

See the page now.

 

Not the world's most beautiful page, but at least we are getting somewhere. Now it could annoy someone that the div tags doesn't have any padding yet, so we'll add that for the looks.

 

CSS:

 

div {padding: 3px;}

 

See the page now.

 

Great, now we should make the whole site centred, so it only fills 90% of the screen, while it will always be kept centred. But because IE doesn't support you to do it with the body tag, I have to add a container div tag first.

 

HTML:

 

<div id="container">...</div>

 

 

CSS:

 

div#container {width: 90%;margin: 10px auto;padding: 0px;}

 

See the page now.

 

So let's add some background to the logo, like something gray, while we make the logo larger, in case an image should be added.

 

CSS:

 

div#logo {height: 10%;background-color: #B1B1B1;...}

 

See the page now.

 

In order to give a better sense of the content, we'll add a lot of it:

 

HTML:

 

<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

 

See the page now.

 

Okay, you will quickly notice that the navigation is now for it self, but remember, the larger the navigation gets, the more it will push the content text. But, we must be warned. Cause if we add too much it will just push the content to the right, and not just flip down as we want it to.

 

So we need to give it a width. 15% is good for a navigation.

 

CSS:

 

div#navi {width: 15%;...}

 

See the page now.

 

 

And there you have it. In a later tutorial, I will tell you how to make a navigation thingie. But now you should be able to do this by your own, right?

 

To all the hardcore webdesigners; please notice me if I have done something "wrong", which I assume I haven't.

Edited by Svip
Link to post
Share on other sites

I'd just like to add that tables are fine for adding tabular data to a page, but not for the design side of things.

 

On another note, well done Svip. I love you.

Link to post
Share on other sites

The layout isn't centered in IE6 for Windows XP. Also, the header is only a single line high in that browser. It works as intended in Netscape 7.2 apart from the font is sans-serif. This is because I set FireFox to default to sans-serif fonts but browsers normally default to serif fonts, which are hard to read on computer screens. You should always have font-family: sans-serif applied to the body element so that this behaviour is avoided. I can't be bothered testing other browsers. tounge.gif

 

None of the example pages have a doctype or any meta-tags indicating the character encoding...they don't even specify the MIME-type. This means that they are examples of ASCII text files, not of HTML. They will also be putting any browser that visits into "Quirks Mode" and this could make the pages behave inconsistantly across devices.

 

Paragraphs should be enclosed in <p> [...] </p> elements so that search engines (and other user agents) can easily see what parts of the page are actual content. Apart from that, why would anyone want the content to flow around the navigation bar? That isn't the way a tabular layout works and it isn't the sort of layout that any sites would use because it confuses the navigation area with the content area. It also looks plain messy.

 

The table example doesn't have any borders and has very little content, so you cannot really see the structure of the page.

 

 

That said, a step-by-step introduction to floated columnar layouts is a great idea. Just needs some refinement, imho. smile.gif

Link to post
Share on other sites

I am well aware of the IE problem, however, it's not the most important issue in this case.

 

Secondly, I could have set the font, true. But it wasn't that important either for this example.

 

And I really think that a meta tag and a doctype is useless in this example. We are just going to show people how to make the page, not going to all the encoding, and doctypes.

 

True about the <p> thing, but it's not that important in this guide.

 

The guide's real porpuse was to show that <div> tags can be used instead of tables and frames.

Link to post
Share on other sites

What this tutorial shows is that using <div> elements gives you a weird layout that is inconsistant across browsers and has the content going all over the page, while the <table> is orderly and neat. That's exactly the wrong message you should be trying to convey. Your should show that using <div> tags with CSS for is actually better than <table> tags but your examples show the opposite.

 

If the examples in your tutorials don't work across different browsers, what is the point in them? People will have to go find tutorials from other places to find out how to fix the code you have supplied. A complete waste of their time.

Link to post
Share on other sites
What this tutorial shows is that using <div> elements gives you a weird layout that is inconsistant across browsers and has the content going all over the page, while the <table> is orderly and neat. That's exactly the wrong message you should be trying to convey. Your should show that using <div> tags with CSS for is actually better than <table> tags but your examples show the opposite.

 

If the examples in your tutorials don't work across different browsers, what is the point in them? People will have to go find tutorials from other places to find out how to fix the code you have supplied. A complete waste of their time.

Cerb... I can't believe I'm going to say this... but...

 

I love you.

 

For that post.

 

So very much. inlove.gif

Link to post
Share on other sites

When I first saw the pages I thought it was Opera displaying the "weird" design, but it was similar in IE and FF.

 

Odd.

 

Another odd thing is I totally agree with Cerb.

Link to post
Share on other sites
What this tutorial shows is that using <div> elements gives you a weird layout that is inconsistant across browsers and has the content going all over the page, while the <table> is orderly and neat. That's exactly the wrong message you should be trying to convey. Your should show that using <div> tags with CSS for is actually better than <table> tags but your examples show the opposite.

 

If the examples in your tutorials don't work across different browsers, what is the point in them? People will have to go find tutorials from other places to find out how to fix the code you have supplied. A complete waste of their time.

:< Exactly what I have been trying to say all the time. :>

 

I'd rather use tables over that.

 

My tutorial sucks, I know. :> I don't even use it.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 2 Users Currently Viewing
    0 members, 0 Anonymous, 2 Guests

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.