|
segebee (m)
|
i see the forum is becoming dry and i remember that my2cents said he'd contribute if someone brought up a topic
so, we know CSS means cascading style sheets meaning the inline supersedes embedded which supersedes external
(I'm sorry this isn't intended for newbies)
Let's share CSS tips and tricks here and please no balderdash of linking to a site; anyone can Google that
Lets go, i'll be back to paste mine
|
|
|
|
|
|
niyyie (m)
|
Your title created the impression that you were comparing and constrasting.
CSS is better than using tables, for web design. Its lighter and more flexible.
|
|
|
|
|
|
|
|
Cactus (m)
|
css and tables don't relate in the sense you are talking about
tables = layout and presentation
css = styling the layout.
it is just like saying you want to compare the content of a perfume bottle with the bottle.
|
|
|
|
|
|
niyyie (m)
|
css and tables don't relate in the sense you are talking about
tables = layout and presentation
css = styling the layout.
it is just like saying you want to compare the content of a perfume bottle with the bottle.
Depending on your level of skill, CSS can be used for layout, presentation, and "styling the layout" as you put it. It can be used for all. Its does them elegantly too. It all bores down to expertise. |
|
|
|
|
|
Angybabe (f)
|
I think the comparison could be Tables VS Frames
|
|
|
|
|
|
tom_lennox
|
css and tables don't relate in the sense you are talking about
tables = layout and presentation
css = styling the layout.
it is just like saying you want to compare the content of a perfume bottle with the bottle.
who says css and tables can't be compared ? http://www.google.com/search?hl=en&q=css+vs+tableright now, css is been pushed as a more efficient way of laying out and presenting your website (as against the table based design), one of the many reasons is because your browser loads the stylesheet once unlike the table based design where it has to load the table each time a new page is loaded, someone said "Tables existed in HTML for one reason: To display tabular data" and i fully agree with him - http://www.hotdesign.com/seybold/ |
|
|
|
|
|
niyyie (m)
|
Thank you jare. Its obvious Cactus doesn't know what he/she is talking about.
Even CSS can now be used for tabular data. Using tables for web design is in the past. Or for amateurs.
|
|
|
|
|
|
my2cents (m)
|
Weeeell, Niyyie, I respectfully disagree: - From my years of experience, I will tell you that there are occasions when tables are a must - for presenting tabular data. Sure, you could "div"-vy it all up or use positioning, but why? Tables nowadays come with captions and summary fields, to name a few, all of which make them readable by screen readers.
- Take a look at the W3C site: http://www.w3.org/TR/html4/struct/tables.html#h-11.1. If you don't have the patience to read it all, at the very least, read the paragraph above the green text beginning with "note".
The problem with the way some people use tables is akin to "flashterbation" - they abuse the use of tables, using it as a means to position stuff on the page instead of using it to present tabular data. Bottom line, you should use tables to present tabular data and CSS to style the table where necessary. I hope this helps. |
|
|
|
|
|
niyyie (m)
|
Ok. Don't get me wrong here. I have not said tables should not be used for tabular data. My pointing out that CSS can be used for tabular data does not mean folks should stop using tables for tabular data. My main issues are two: 1. To point our that tables and CSS can be compared unlike what Cactus was saying earlier. 2. Using tables for layout is not the best. As you put it: "they abuse the use of tables, using it as a means to position stuff on the page instead of using it to present tabular data". We're saying the same thing. CSS handles layout much better, and tables can still be used for tabular data, and styled using CSS. lol @ I hope this helps. Thanks  |
|
|
|
|
|
segebee (m)
|
Niyyie, thanks for ur reply i was just going to say that css can be used for layout and its fun esp. for navigation bars esp when you don't want ur page to look so regular or do u think blogs use tables  2cents i saw ur post and what u were refering to is d cascading aspect of css whereby the second command takes preeminence over the first more tips and tricks please |
|
|
|
|
|
mambenanje (m)
|
well I think you can't compare tables and CSS at all unless you specify, you can compare table in design and presentation with css in design and presentation, but I bet you CSS did not come to replace everything about tables, CSS is complementing tables, try to view the source of google search then you will see what I am talking about, unless you tell me Google is not King of web. anyway some people want to be more strick than w3c but in ever rule ther are exceptions tables will always exist on the internet till the end of times.
CSS is good but table is still there so CSS is not better than table but better in designing than using tables to design if you understand what I mean
|
|
|
|
|
|
my2cents (m)
|
sege, Either I don't know that many tips/tricks or I do but don't have their official names  Either way, as I encounter them at work, I will surely share. |
|
|
|
|
|
my2cents (m)
|
Segebee, Here is one, which some may know already, that I can share based on a site I just visited: http://www.akwaibomnnj.orgNow, if you are a smart web developer and use FF (which comes with a pretty nifty tool called "Web Developer Toolkit")  , and turn on the table cells, you will see that whoever coded this site did a no-no in today's web dev world: The person cut the header such that in the middle, the "home" et al links are cut separately and the last cell has a big photo, again cut in half, together with the background image. These images combine to be about 120px. Now, one tip/trick would have been to take a very thin 1px width by say, 100 (or whatever height you desire)px slice of the header, use CSS to repeat along the x-axis, apply that as a background to a parent div, position that div relatively, place the photo, as on piece, within that background div by positioning it absolutely. Doing this, in addition to optimizing the photo, would result in, at most, 30px or a 75% savings in terms of download speeds with respect to the header alone  In essence the code could look like so (I will embed the styles inline, though you should have them in an external stylesheet): <div style="background: url(path to thin strp image) repeat-x; position: relative; height: 100px; width: (whatever width you desire)"> <img (path to image) style="position: absolute; top: (whatever distance) left: (whatever distance)" /> </div> 2 other tips from this example are: 1) using CSS, you could add a white border around the image so it has that actual photogragh look, thereby further reducing the image size. 2) rather than using "left" with a high number, you could use "right" with a low number as in this case, the photograph is closer to the right side of your screen (so it could have been "right: 20px" as opposed to say, "left: 300px". Again, as I encounter more, I will indeed share. I just hate being put on the spot as I tend to draw blanks I hope these helps. |
|
|
|
|
|
segebee (m)
|
bravo my2cents bravo nice tips 4give ma nt yet posting na phcn oh at least mambenanje can rethink his stand, aight  |
|
|
|
|
|
mambenanje (m)
|
@segebe
my2cent was not against me, he was simple doing what you asked, you asked of tips so he was giving you the tips.
the only tip I can give you is that you should learn Object Oriented Programming and the advantages then apply it to CSS, because CSS classess are just like java classess or any OOP language hope u get me, that is how I take them and I don't have to cram anything else
|
|
|
|
|
|
segebee (m)
|
my tip:
This introduction isn't meant to teach you everything about Cascading Style Sheets, but is rather meant as an overview of what can be done with CSS.
Read through this article, and then decide whether or not CSS is right for your site. At the very least, you'll know what can be done using CSS,
so when the time comes to gain more control over the layout and typography of your site, you'll know where to turn.
What Are Cascading Style Sheets?
CSS is a form of HTML mark-up that provides web designers with greater control over typography and spacing between elements on a page.
Why Should I Bother Using CSS?
1. Greater control over layout and typography. CSS provides you as a designer with precise control over the fonts used on your site,
including size, letter spacing and text decoration.
Elements on a page can be positioned precisely using CSS. In fact at least one major HTML Editor, Dreamweaver 2, uses CSS to control the layout of a page,
although it does provide the option to convert to tables.
2. Site-wide changes become easy. Rather than having a style sheet as part of the HTML code of a page,
it is possible to specify the URL of a style-sheet that is to be used when formatting a particular page.
This makes it very easy to modify the entire site by simply editing a single file.
What About Browser Compatibility?
CSS support is provided in Internet Explorer 4+ and Netscape Navigator 4+. However, some annoying browser inconsistencies continue to make life difficult for
those deciding to use CSS on their site. It is possible with a little bit of JavaScript to serve up different style-sheets depending on the browser that is being used
to view your site. Alternatively, workarounds can be used so that the style-sheet works in both browsers correctly.
What Does CSS Look Like?
The basic template for CSS code looks like this:
Tag: {Property: value; Property2: value2}
Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected
Notice that CSS makes use of curly brackets instead of < and > .
A Small Snippet:
H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}
|
|
|
|
|
|
damolat
|
The thing I find crazy about CSS is the browser compatibility issue. Well most people might not come accross such problems if they are not deep into the art of css design or working in an extremely professional environment.
My problem is this, if i use css to position my elements divs, then I have to use a lot of floats and a lot of clears. This you should know are not friendly with multiple browsers and you have to start looking for solutions to browser bugs.
Alternatively, I would like to know, can you layout elements totally using absolute positioning, where you don't have to bother about any freaking floats and bugs but specify each and every position from your css. I have never tried it before which is why I am asking, I guess i thought it is not professional or it would just not work.
As a result, I only use css when my client would pay me very well for the job and I am ready to put my time down for it.
What do you lot think.
|
|
|
|
|
|
my2cents (m)
|
Weeeell damolat, I wouldn't totally agree with some of what you had to say. You don't have to use floats/clears with positioning. You do have to use clear with floats as what a float does is take the element floated out of the normal flow of the document. Take a look at this post and what I had to say: http://www.nairaland.com/nigeria/topic-60804.0.html#msg1227199You can position elements inside a floated one and vice-versa. In general, I don't like positioning due to, as you said, browser incompatibilites. However, there are times when you don't have a choice, that is, if you don't want to use tables. Again my link above should better explain. Yes, you can design a site using 100% positioning. If you visit: http://www.csszengarden.com/ and click on "select a design" in the brown area to your right, you will see how the same page can be rendered in different skins all based on positioning. It's all about doing it well. Basically, the standard approach is to have a container div positioned relative and then have the one you want to move around positioned (within the container) absolute. In general, there are 2 things that I have found throw a few developers off when it comes to CSS - the box model and positioning. These are very powerful concepts which, once mastered, will put you in the upper echelon. I wish I had the opportunity to visit home and conduct a seminar or two on things like this (hint, hint ) Sure, having to make things work across all browsers is a pain, but that is what you are paid for right? You shouldn't view yourself as an order-taker/code-monkey. You should ensure that your client gets the best user experience possible. Applying hacks shouldn't take that much time anyway I hope this helps. |
|
|
|
|
|
WebMonk (m)
|
Sure, having to make things work across all browsers is a pain, but that is what you are paid for right? You shouldn't view yourself as an order-taker/code-monkey. You should ensure that your client gets the best user experience possible. Applying hacks shouldn't take that much time anyway I hope this helps. Very true.I started css on a bloody note (which eventually made me divorce IE ), but when you get used to it, the box model IS Powerful indeed. Plus, if you use already established webapps it's just a matter of customizing without altering content. |
|
|
|
|
|
segebee (m)
|
please explain the box model, webmonk
i never knew one could edit posts
|
|
|
|
|
|
WebMonk (m)
|
please explain the box model, webmonk
My opinion (And from use), concerning the box model, is how div tags might look somewhat limiting at first. But in truth, it actually is more flexible. Let's say we want to code a round edged box in tabular form (Fig1) Like 2cents said, you did have to use many cells to position the round edges (all 4 of them), plus the slices at the sides (left and right, making it 6), for which the left and right act as padding. But in css, the design would be like this (Fig2, 3 div tags comapared to 6 cells) But the difference is that the middle div tag can handle padding (css specific code), which would have required 2 cells to do the same thing But the div tags are more or less like boxes, hence what i think is the box model Hope this helps. (Waiting for Proffessor 2Cents of the CSS Academy to validate my theory ) |
|
|
|
|
|
my2cents (m)
|
Webmonk, I am still a 3rd-year student o!  There is still much to learn. As a matter of fact, my employer just had us take the brainbench certification for css2, dhtml, javascript and jsp. Though I passed the css2, based on my score of 3.17/5.0, I am sure you will agree that I still have a long way to go. To toot my horn just a little, I did score higher than 87% of my co-workers (30 in number) Anyways, back to the brass tacks. This will further cement why I am not a prof. I am going to explain the box model the way I know best - in story form. I am sure the wiki has a better explanation: Letz say you have a container div of 120px. In that container, you want to have 3 inner divs (A, B, C: navigation, left column and right column) floated left (I am using floating here to illustrate my point). For easy math, letz just say we want each div width to be the same at 40px each. Well, as you may agree, the contents of each cell will be touching each other. If I were to tell you to increase the padding b/w each cell by 10px each and you did that, once you refreshed your browser, you will notice that the rightmost div has dropped such that it is below the first div. Why? because you have increased the total width from 120px to 120px + (10px * 3) = 150px (the container div is too small for the 3 divs and so it forces the rightmost div down). How to compensate for this? You would have to deduct the extra 10px from each of A, B and C to 30px each. That way, you are still maintaining the (30px + 10px = 40px) width for each cell. Make sense? Like I said, I am probably not the best teacher in the world and I am not that good at cramming stuff to give you the technical meaning. I learn better through example/experience and what I have explained above is based on that experience. If this isn't clear, let me know and I will try to explain it with another storyline. Thanks, |
|
|
|
|
|
WebMonk (m)
|
Webmonk, I am still a 3rd-year student o! There is still much to learn. As a matter of fact, my employer just had us take the brainbench certification for css2, dhtml, javascript and jsp. Though I passed the css2, based on my score of 3.17/5.0, I am sure you will agree that I still have a long way to go. To toot my horn just a little, I did score higher than 87% of my co-workers (30 in number) Anyways, back to the brass tacks. This will further cement why I am not a prof. I am going to explain the box model the way I know best - in story form. I am sure the wiki has a better explanation: Letz say you have a container div of 120px. In that container, you want to have 3 inner divs (A, B, C: navigation, left column and right column) floated left (I am using floating here to illustrate my point). For easy math, letz just say we want each div width to be the same at 40px each. Well, as you may agree, the contents of each cell will be touching each other. If I were to tell you to increase the padding b/w each cell by 10px each and you did that, once you refreshed your browser, you will notice that the rightmost div has dropped such that it is below the first div. Why? because you have increased the total width from 120px to 120px + (10px * 3) = 150px (the container div is too small for the 3 divs and so it forces the rightmost div down). How to compensate for this? You would have to deduct the extra 10px from each of A, B and C to 30px each. That way, you are still maintaining the (30px + 10px = 40px) width for each cell. Make sense? Like I said, I am probably not the best teacher in the world and I am not that good at cramming stuff to give you the technical meaning. I learn better through example/experience and what I have explained above is based on that experience. If this isn't clear, let me know and I will try to explain it with another storyline. Thanks, I get you so well, mostly cause that's what happened to me when i started coding css themes for webapps (then i didn't know how to use padding, and that exact problem would occur.) You did well with the explanation. And like you said, there IS still so much to learn (makes my heart beat faster) |
|
|
|
|
|
somze (m)
|
Web monk
What u did up there can be achieved with div, float property and your images. I think that may be a much easier way.
@Topic
Sometimes tables need to be used for tabular stuff, both most times stick to CSS.
The trouble is I don't see how CSS is solving the HTML presentation issues. The last site i did which was strictly XHTML specs, had a lot of problem over browsers - Opera9, Firefox 2, IE7. But everything got to work after a lot of wahala.
Anyway still got a lot to learn
|
|
|
|
|
|
WebMonk (m)
|
Web monk
What u did up there can be achieved with div, float property and your images. I think that may be a much easier way.
I was explaining the difference between using divs and tables cells, not necessarily if the method above was the best to use. The trouble is I don't see how CSS is solving the HTML presentation issues. The last site i did which was strictly XHTML specs, had a lot of problem over browsers - Opera9, Firefox 2, IE7. But everything got to work after a lot of wahala.
This i believe is mostly Microsoft's Fault. They have said they won't support css fully, even in IE7. Check this link: http://blogs.zdnet.com/web2explorer/?p=254In the article, it is quoted: "Microsoft doesn’t plan to fully support the latest CSS standard in IE 7.0. Instead of using well-established Web standards, IE 7.0 will continue to foist proprietary technologies on Web developers, forcing them to choose between two competing ways of creating Web sites. The most critical point in Wilson’s post, in my mind, is Microsoft’s admission that it will fail the crucial Acid2 browser-compliance test , which the Web Standards Project (WaSP) designed to help browser vendors ensure that their products properly support Web standards." Speaking about browsers, most people i have met have recommended coding Css for Firefox, then fixing the bugs that appear in IE, then any other browser (Opera, Safari, etc). I have tried this and found it to be most true (compared to coding in IE then FF, which was a major disaster.) Nairalanders, what do you think? |
|
|
|
|
|
somze (m)
|
Web monk Thanks for your explanation and the link Speaking about browsers, most people i have met have recommended coding Css for Firefox, then fixing the bugs that appear in IE, then any other browser (Opera, Safari, etc).
I have tried this and found it to be most true (compared to coding in IE then FF, which was a major disaster.)
Nairalanders, what do you think?
Very true, this is exactly what was done. First test in FF, then IE7 then Opera. However, i gave IE7 more priority seeing that most folks use that. |
|
|
|
|
|
my2cents (m)
|
Weeeell, I beg to disagree with you a little, somze. May I see the site that gave you the problems, in question (not to critique but so see where you may have gone wrong)? I am currently working on a project to be launched on aug 14 (I will share the link with you by then if you want). Though it is xhtml transitional, I used probably 90% CSS and stuck with web standards. I coded for it in firefox without concurrently testing on IE6/7, Safari or Opera (I know, my fault, I should have done it earlier and it goes against all I have said here ). At the end of front-end development, I was scared to look at the site on those browsers (kind of like that feeling you get when you hear your results are out ) but when I did, guess what? Other than a special safari hack, it looked consistent across the board. I hope this helps. |
|
|
|
|
|
somze (m)
|
The site was only on for a few months, it was for one of the presidential aspirants and has been removed.
|
|
|
|
|
|
segebee (m)
|
mayb come down a little
why did paddin the cells come up
is padding the same as layers in dreamweaver
|
|
|
|
|
|
![Nairaland [Nigerian Forum] Home](http://www.nairaland.com/Themes/default/images/english/home.gif)
Poll
Author
fig1.jpg (5.04 KB, 229x103 )
