Whoa whoa.... tables -> div/span?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

that's how I use it as well.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

could someone write an example how you would create a layout like shown in the picture using <div>

Image

Mark
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Bech100 wrote:could someone write an example how you would create a layout like shown in the picture using <div>
Very carefully. (Sorry, couldnt resist).
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Roja wrote:
Bech100 wrote:could someone write an example how you would create a layout like shown in the picture using <div>
Very carefully. (Sorry, couldnt resist).
:lol:
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

Bech100:

It can be done easily. I did a layout for dr. evil done not to long ago that is similar to what you have shown.

http://forums.thexvector.us/viewtopic.php?t=39

if you would like some assistance, I would be more than happy to help you out.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post by andre_c »

I think this is a good example of using divs for layout, please keep in mind that this page is far from being finished. I am most proud of the colorpickers that i wrote (but that's another topic). I would apreciate some comments about it too (probably another topic too). But overall i think is a good example since it is very compatible and looks almost the same on all fairly standard browsers.

manage.directresponsewebsite.com

username: dev, password: network

The design section is almost finished
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

CSS is implemented perfectly well across all major browsers in use today. There are many great features that are only available in new-generation browsers (in other words, NOT Internet Explorer), but none of these are essential for most layout tasks in any way. The only real exception is Mac IE, which has terrible CSS interpretation across the board. But it's dying a quick and well-needed death now.

Statements like "css is not implemented 'consistently' across all browsers and therefore givens inconsistsnet look on different browsers" are only slightly true. Usually these sorts of comments and complaints about how CSS doesn't really work come from someone who is used to designing for IE first, then fixing for other browsers. I know because I used to do it myself, and boy did I complain! You need to adopt the opposite approach: test your pages first and foremost in a browser like Firefox or Safari, THEN check to see what's broken in IE. It takes much less time to fix problems this way.

There are still uses for tables. But for most cases, layout isn't one of them.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

andre_c: that's an interesting site. I really like the way you've handled the functionality of the edit pages section, it's very easy and intuitive. If you want a few gripes, they are:

1) that logo is very hard to read
2) the text doesn't center properly on the tabs
3) the bottom entry of any of the side menus gets clipped by the corner graphics.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post by andre_c »

Unipus: Thanks for your comments, I will look into those problems and get them fixed.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

Unipus Says:
Statements like "css is not implemented 'consistently' across all browsers and therefore givens inconsistsnet look on different browsers" are only slightly true. Usually these sorts of comments and complaints about how CSS doesn't really work come from someone who is used to designing for IE first, then fixing for other browsers.
How true. I agree whole heartedly with this statement. Yes, I.E. has limitations, but using CSS and DIVs in various ways can minimze those limitations.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

no_memories wrote:
Unipus Says:
Statements like "css is not implemented 'consistently' across all browsers and therefore givens inconsistsnet look on different browsers" are only slightly true. Usually these sorts of comments and complaints about how CSS doesn't really work come from someone who is used to designing for IE first, then fixing for other browsers.
How true. I agree whole heartedly with this statement. Yes, I.E. has limitations, but using CSS and DIVs in various ways can minimze those limitations.
Not necessarily. I "design" and code the client-side stuff in Firefox, then run it in Opera and IE. External CSS and relative paths in IE is stuff of nightmares. Then, and that's slightly off-topic, have you ever tried the Javascript implementation of RegEx in IE? Gruesome.
Hence, I do my desgin in Firefox, where things are nice and beautiful, then port to IE. And at the same time, I moan about CSS and cross-browser issues.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

What IE are you talking about? I've used external and relatively pathed stylesheets for quite some time now, with no problems ever that I can recall. I find that IE can generally be brought within acceptable tolerances pretty easily in terms of positioning and borders and such. Mac IE is a huge pain in the ass, so much so that I try to exclude it from as many projects as I can, but even that can be dealt with if you're willing to make sacrifices.

I mean, CSS is the stuff of perfectionism, and every now and then there will be some little problem that just doesn't want to go cross-browser and you'll bang your head trying to get it right. But for the most part I find it goes pretty smoothly and even with that occasional head-banging more hours are saved than I could count.
User avatar
llanitedave
Forum Commoner
Posts: 78
Joined: Thu Jan 15, 2004 11:24 am
Location: Las Vegas, NV.

Post by llanitedave »

Unipus wrote:What IE are you talking about? I've used external and relatively pathed stylesheets for quite some time now, with no problems ever that I can recall. I find that IE can generally be brought within acceptable tolerances pretty easily in terms of positioning and borders and such. Mac IE is a huge pain in the ass, so much so that I try to exclude it from as many projects as I can, but even that can be dealt with if you're willing to make sacrifices.

I mean, CSS is the stuff of perfectionism, and every now and then there will be some little problem that just doesn't want to go cross-browser and you'll bang your head trying to get it right. But for the most part I find it goes pretty smoothly and even with that occasional head-banging more hours are saved than I could count.
My number one complaint about IE implementation of CSS is its nonrecognition of "fixed" positioning. That forces me to consider using frames, which I despise.

Here is a quick and dirty implementation of a site that has a block of contents with links on the left side of the page. On every browser but Internet Explorer the block stays put when the page is scrolled. On IE, it scrolls out of sight.

I really don't want to have to use frames for a functionality that's so simple everywhere else.
Brian
Forum Contributor
Posts: 116
Joined: Thu Apr 18, 2002 5:33 pm

CSS Consistency

Post by Brian »

malcolmboston wrote:css is not implemented 'consistently' across all browsers and therefore givens inconsistsnet look on different browsers
This is very true and the problem is not limited to Internet Explorer or any other single browser as some have suggested. Yes, Internet Explorer for Windows is the worst offender when it comes to CSS support, but there remains inconsistency between the other browsers as well.

Try designing a multi-column page layout with centered content of a specific width, variable column heights--keeping in mind that you do not know for sure whether the main content or other columns will be longer, but everything needs to be aligned at the top--and a footer that follows these variable height columns and make all of the dimensions--including margins--identical under a recent version of Gecko (Mozilla, Firefox, etc.) for any platform, the most recent version of Opera for any platform, and the most recent version of Internet Explorer for Windows (the Mac version exists now only in a zombie-like state and can now be safely ignored in most cases). You can even skip KHTML-based browsers for now. If you make a serious effort, this little exercise should reveal to you some significant differences in CSS support.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

@llanitedave:

I really don't think that functionality is worth the tradeoff of using frames. Look at it this way: the menu still functions the same, it's still accessible, it just doesn't display in the same manner you wanted before. In my opinion, that puts it many steps ahead of using frames still.

Also, if you REALLY wanted to have it work on most IE clients, it wouldn't be too hard to do in javascript. And again, it would degrade nicely for users without.

@brian:

I've seen it done. Sure, it's not terribly easy. On the other hand: "make all of the dimensions--including margins--identical under a recent version of Gecko"... sounds like unreasonable expectations for the moment. I think you'd be able to accomplish the task fairly easily if you built a little bit of fault tolerance into the design.
Locked