Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,207,922 members, 8,000,836 topics. Date: Tuesday, 12 November 2024 at 04:27 PM

CSS Layout Debate - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / CSS Layout Debate (833 Views)

The New Layout Of GtBank's Internet Banking Portal / Nairaland's New Background And Layout Style / What Are The Advantages And Disadvantages Of Using Table For Layout (2) (3) (4)

(1) (Reply) (Go Down)

CSS Layout Debate by yawatide(f): 8:21pm On Dec 08, 2008
So I have been thinking lately of how to make my code more efficient. I think I have the answer but in attempt to learn and be taught, I have decided to throw the question to you all:

Which is best for css layout? Using DIVs (floated) or ULs/LIs? State your reasons please.

As always, I will initially recuse myself from this debate until I get a few answers.
Re: CSS Layout Debate by hanen(f): 11:05am On Dec 09, 2008
Your question isn't very clear. Best css layout for what? An entire web page or a list?
Re: CSS Layout Debate by yawatide(f): 12:33pm On Dec 09, 2008
Sorry for any confusion. Another attempt at explaining:

I have "an entire web page" consisting of 3 columns - left, center and right. What would be the best way to lay this out using CSS? DIVs or ULs and OLs/LIs?

Better? wink
Re: CSS Layout Debate by OmniPotens(m): 12:44pm On Dec 09, 2008
I will note answer until I see positive response. Are there no designers in here again?
Re: CSS Layout Debate by hanen(f): 2:08pm On Dec 09, 2008


Riiiiight. That's why I told you to rephrase because unless, this is some kind of weird trick question, I don't see why or how anyone can layout an entire web page with UL/OL. . . because they're for list items?? But I'm going to answer anyway.

Obviously, if you want to use pure css, you're going to have to layout out your page with divs because divs load faster, are easier to style and maintain and are easier to read.

For a 3-column layout, for instance, you create a container div, to keep everything together and to set the main width. Three sub divs are created in the container div for each of the sections. The left and center divs will be floated to the left, while the last div on the right will be floated to the right. There are many ways to do it though, and many styles, but that's the one I use, and it works for me.
Re: CSS Layout Debate by Seun(m): 2:21pm On Dec 09, 2008
List elements can be used with great success in certain unconventional places: site menus, for example.
But for basic layout, I'll have to recommend that the DIV element, because that's precisely what it's for.
Re: CSS Layout Debate by yawatide(f): 3:23pm On Dec 09, 2008
hanen:
yes, it is "some kind of weird trick question"  tongue

Seun:
Thanks

Others:
Keep them coming.  I will add my own 50 kobo here very soon.
Re: CSS Layout Debate by kehers(m): 7:02pm On Dec 09, 2008
I wil go for floated divs. Uls are better of for menus. Besides, since ur page content wil contain other block elements - p, other divs and co, using a list item (li) isnt a good idea. I cant remember the xtml strict dtd supporting a block element inside li.
Re: CSS Layout Debate by pie1ect(m): 7:23pm On Dec 09, 2008
@Yawa

I was playing around with a PHP quiz application yesterday and this crazy Idea entered my head. I ended creating something rather decent with <span>, <dd>, <dl> and <dt>.

I haven't seen anyone create a full site with UL/LI and I don't think it's workable. For a one column site, maybe but for a three column site, you need DIVs. You actually need to specify dimensions of the columns and those attributes don't apply to UL/LI tags, as far as I'm aware. The closest you can come is defining it's "type" which is not that helpful.
Re: CSS Layout Debate by yawatide(f): 7:24pm On Dec 09, 2008
Very good responses from all so far.  I will allow for one more before I jump in.

Wow! don't you all just feel so good posting to this? Don't you all just love the professionalism in the answers? wink
Re: CSS Layout Debate by kehers(m): 9:39pm On Dec 09, 2008
I'm yet to confirm if xhtml (strict) supports block elements in ULs ('m on mobile at d moment) but the truth is that a 3 column design is achievable wt UL. It is just not advisable. But for d record, it can be done.
The ul list-style type will simply be set to none, padding nd margin out as well, d (3) LIs floated left and d containg block element giving a specific width. That i guess wil do d trick.
Re: CSS Layout Debate by yawatide(f): 10:30pm On Dec 09, 2008
I am happy I waited for at least one more response.  BINGO!  Thanks kehers, you hit the nail on the head and answered it the way that I would have.  I would have said, "not that you would, but you could".  I will try to combine all the answers given into one big response:

Using ULs as opposed to DIVs is as pure as CSS can get.  You can also style UL/LIs the same way you style DIVs (float, margin, padding, width, line-height, etc).  Also, I agree that DIVs are easier to maintain and read but disagree that DIVs load faster (I could be wrong and stand corrected but I disagree nonetheless).

When I said efficiency, I was going for fewer keystrokes.  On this ground, there is really no difference. So the answer boils down to semantic mark up.  Use UL/LIs for stuff that needs listing just like you would use tables for tabular data.  Obviously, "gridding" out a layout couldn't be termed as a list.

I brought this up because of a seminar a few of my co-workers attended recently:
http://aneventapart.com/events/2008/chicago/

This event is basically an annual gathering of the "gods" of css/xhtml, etc.  They posed the same question.  Everyone said it could only be done with DIVs.  Then the presenter re-did a site in front of them with ULs/LIs.  According to my co-workers, everyone after that presentation were like, "we feel so dumb.  of course it can't be done".  The presenter did go on to say though that from a semantic point of view, it didn't make sense.

So there you have it folks.  Thanks for participating.  I will think up more though that shouldn't stop you from doing same.  Note: Some questions I pose don't necessarily have a right or wrong answer. I ask them strictly to see how we all, including myself think and approach problem-solving.

By the way, wouldn't it be great if in 2009 moving forward, we only had posts such as these (as opposed to "site review", "web design vs graphic design", "FP vs DW", etc)?  In 2009 moving forward, I have decided to scale back my presence on the forum, based on some of the posts and unprofessionalism I have seen.  Should topics such as this become more common, I will be here every day.  In fact, I have chatted with many "undercover" members who have voiced the same sentiment.  many haven't posted for months.  I have combed through many African webmaster forums and I can safely say that even based on current posts here, none come even close.  Why not turn it up a notch?  Why settle for the same old stuff?

Remember, we should be here to learn and not to puff our chests.  Once again, thanks to all who participated.

(1) (Reply)

Procedure Of Programing A Hyperlink Under A Particular Word / Can You Design A Website Like Nairaland ? Then Pls Call Me / Business In Elance.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 23
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.