September 19, 2020, 11:13:39 am
News: If someone gives you crap then give them a Bad Star
Pages: [1]   Go Down
Author Topic: Lost Topic Title  (Read 2297 times)
007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« on: September 01, 2005, 02:39:51 pm »

What are the adv/dis-adv of using DIV instead of Tables. Which is better.. when...



Anyway, this is a look at the home page of the umpteenth site I am attempting to design!!
Logged


CornedBee
Ancient Poster
*

Stars: +0/-0
Offline Offline

Gender: Male
Posts: 5258


WWW
« Reply #1 on: September 01, 2005, 04:02:14 pm »

Advantages of DIVs is that it's easier to make the site accessible to people with disabilities. It's easier to change the design later. It uses less bandwidth. (Less HTML code per page.)

Disadvantages is that some things are tricky to design, and that you'll often have to work around IE bugs (design in Firefox/Opera first!) You'll also get next to no support from authoring tools such as Dreamweaver - CSS-based designs are usually hand-coded.
In particular, in your design the GAME box could quite difficult. Perhaps faux columns and an absolute position...
Logged

All the buzzt
CornedBee

"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond

"This is how Liberty dies - with thunderous applause."
Senator Padmé Amidala - Revenge of the Sith

007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #2 on: September 02, 2005, 10:44:39 am »

Quote
Advantages of DIVs is that it's easier to make the site accessible to people with disabilities. It's easier to change the design later. It uses less bandwidth. (Less HTML code per page.)

In particular, in your design the GAME box could quite difficult. Perhaps faux columns and an absolute position...
[snapback]140865[/snapback]

First, Thanks for your reply.

Second, How is it better for people with disabilities??

And last, the picture is a snap shot of an already designed website. But yeah, I am sure I could have used lesser characters for the placement using tables than using div.
Logged


CornedBee
Ancient Poster
*

Stars: +0/-0
Offline Offline

Gender: Male
Posts: 5258


WWW
« Reply #3 on: September 02, 2005, 03:08:35 pm »

First, tables imply semantics and are read by aural browsers in a way that might be confusing.
Second, using divs allows you more control over the source layout, thus enabling to structure the text to favour aural browsers.
Logged

All the buzzt
CornedBee

"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond

"This is how Liberty dies - with thunderous applause."
Senator Padmé Amidala - Revenge of the Sith

007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #4 on: September 03, 2005, 03:35:24 am »

On more question...

This part is there in all my html files...

Quote
<body onLoad="initg()">
<script language=JavaScript src="menu_array.js" type=text/javascript></script>
<script language=JavaScript src="mmenu.js" type=text/javascript></script>

<center><img src="img/title.gif" width="200" height="42" border="0" alt="title"></center>

<div style="background-color: #CC0000; color: #fff; font-size: 8pt; overflow: auto; width: 100%; border:1px solid #000">
  <div style="margin: 2px; float: left">
     projects, reviews, articles and more...
  </div>
  <div style="margin: 2px; float: right">
     Updated: 1st September, 2005
  </div>
</div>

<br/><br/>

Is there anyway to put that in one css/js file?
Logged


CornedBee
Ancient Poster
*

Stars: +0/-0
Offline Offline

Gender: Male
Posts: 5258


WWW
« Reply #5 on: September 03, 2005, 01:26:59 pm »

Get rid of that center tag. Then give that image the id "title". In your CSS:
#title { text-align:center; display: block; margin-left: auto; margin-right: auto; }

Give the other three divs all their own IDs and simply put their associated style into the stylesheet.

The type attribute value in the script tags must be in quotes, the language attribute should be (or remove it altogether.)

Also, put those script tags in the <head>.
« Last Edit: September 03, 2005, 01:28:30 pm by CornedBee » Logged

All the buzzt
CornedBee

"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond

"This is how Liberty dies - with thunderous applause."
Senator Padmé Amidala - Revenge of the Sith

007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #6 on: September 04, 2005, 05:37:49 am »

Quote
Get rid of that center tag. Then give that image the id "title". In your CSS:
#title { text-align:center; display: block; margin-left: auto; margin-right: auto; }

Give the other three divs all their own IDs and simply put their associated style into the stylesheet.

The type attribute value in the script tags must be in quotes, the language attribute should be (or remove it altogether.)

Also, put those script tags in the <head>.
[snapback]140918[/snapback]
Done.. done.. done...

Thank You wub

Definitely knocked out a few bytes overall. Although removing the center tag added a few.

And I downloaded FF to get a better look at the website Tongue


BTW, I have attached my source files. Still need to go through them more carefully before I add some hardcore stuff to the other pages.
Logged


007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #7 on: September 04, 2005, 05:46:36 am »

Hmmm... things are looking haywire in FF. Back to the old drawing board Sad
Logged


Pc_Madness
Ancient Poster
*

Stars: +0/-0
Offline Offline

Posts: 5349



WWW
« Reply #8 on: September 04, 2005, 11:03:06 am »

Nah, your right.

Code:
<div style="background-color:black;height:0px; margin-top:143px">

The top of your little board thing, you've given the div a height of Zero, which means it won't show up the background colour of the little header properly.

Not sure about the actual board part, as none of that is showing up atm, but its mostly images...
Logged


007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #9 on: September 04, 2005, 11:43:38 am »

Okie dokie!! I made some major changes and the page is looking cool in both FF and IE. smile!!

But the menu bar has a problem, the one's on the right don't draw the sub menus properly. I downloaded a really outdate script (but it's really cool). Need to look into it further!!
Logged


Pc_Madness
Ancient Poster
*

Stars: +0/-0
Offline Offline

Posts: 5349



WWW
« Reply #10 on: September 05, 2005, 12:45:24 am »

Although it may reduce you to tears trying to get it compatible with IE, you can do those kind of drop down menus with CSS.



Should work in both IE and Fx, and theres alot less freaky Javascript code. Tongue

Perhaps CB knows of a better one. Tongue
Logged


007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #11 on: September 05, 2005, 06:25:22 am »

Quote
Although it may reduce you to tears trying to get it compatible with IE, you can do those kind of drop down menus with CSS.



Should work in both IE and Fx, and theres alot less freaky Javascript code. Tongue

Perhaps CB knows of a better one. Tongue
[snapback]140998[/snapback]


Thanks for the tip mate thumb_yello

BTW, are you trying to learn CSS as well. Noticed your other thread.
Logged


Pc_Madness
Ancient Poster
*

Stars: +0/-0
Offline Offline

Posts: 5349



WWW
« Reply #12 on: September 05, 2005, 06:55:36 am »

Quote
Thanks for the tip mate thumb_yello

BTW, are you trying to learn CSS as well. Noticed your other thread.
[snapback]141010[/snapback]
I know CSS pretty well (but its pretty simple anyway), I just need to learn how to do the more advanced stuff and start learning about what browers support what and all the hacks for that.

Working on a tableless design atm actually, along with a 2 level deep drop down menu (well, searching for Tongue)
Logged


CornedBee
Ancient Poster
*

Stars: +0/-0
Offline Offline

Gender: Male
Posts: 5258


WWW
« Reply #13 on: September 05, 2005, 10:47:26 am »

I suppose this is the most important resource:
Logged

All the buzzt
CornedBee

"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond

"This is how Liberty dies - with thunderous applause."
Senator Padmé Amidala - Revenge of the Sith

007shahid
Monster Poster
*

Stars: +0/-0
Offline Offline

Posts: 1254



WWW
« Reply #14 on: September 07, 2005, 06:52:14 am »

Quote
I suppose this is the most important resource:

[snapback]141015[/snapback]

Really cool.. thanks! smile


:star:
Logged


Pages: [1]   Go Up
Print
 
Jump to: