![]() |
Some CSS "must knows" from me, and please share yours
More and more people are learning CSS to not just affect the look, but the over all design of their sites.... and not just designers, but people making up their own pages with an average to lower knowledge of design.
For those people, here are some HUGE fundamentals that I have learned that make getting that layout right, much easier. 1. DOCTYPE - cross browser compatibility. The hardest thing in the world is getting something to look the same in IE, Firefox, Safari and Opera. And there's a reason for that, they all were created unequally. However, there is a way to tell them to try their best to do things the same... and that's the DOCTYPE. Now, the BEST thing you can do, is learn the subtle differences inherent in XHTML, which includes putting /> as a closer to tags. These things are annoying to learn but once you do, you'll get pages looking just how you want. To make your page an XHTML document, you use this at the very top: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' id='yoursitename'> Notice the word "strict" in there. That is what tells all the browsers that this page MUST use the standards set out by W3C... or at least, to the best of it's ability. Now, XHTML is a tad annoying in it's differences. So if you don't want to learn those differences as well as CSS all in one shot, then you can simply force your HTML4 to be "strict" as well. To make your page an HTML4 strict document, you use this at the very top: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> And that's it... your browsers, no matter what make or model, will try their very best to make sure that 0px really means 0px. If you use a WYSIWYG editor, pay attention to this because chances are it filled in this line for you and used "loose" settings, rather than strict. If the line is not used at all, the browser will assume "loose" and try to use it's own best judgment rather than standards. 2. float: left and float:right For those of you who are actually using divs to position things on a page, float is your best friend. If you want div2 to be to the right of div1, you set div2 to "float:right;". Easy right? Well, what happens a lot of the times is that yes, div2 will be to the right. But it'll be right justified way over on the right side of the screen. What went wrong? Well, it's floating right of div1, but of the entire page as well. The solution to this is to float div1 left. This puts it left justified as it would have been anyway while left alone.... and then float div2 left as well. This means div1 = left.... div2 = left. That will infact still put them beside each other and in order... but keep them left justified. You can do this over and over again with however many divs. 3. float:right puts something underneath still What happens a lot of the times is that someone makes a main div with width 750px. It fits on most resolutions. Then a left column will be div1 = 250px; and then make div2 float right and width 500px;. The problem? div2 will still be under div1. The cause for this is that divs have padding and margins by default, and borders even add pixels if you have them on. So if you add padding, margins and borders... 250 + 500 will actually become much more than 750 in the end. This means that div1 and div2 won't fit... and so it wraps down div2 much like a word processor wraps text. The solution is to manage that padding, margin and border and make sure you keep very close count on just how many pixels are being used for each div. This means counting the LEFT and RIGHT side of the div. 3. clear: both; So you have some divs floating left and right... but the next div you make, even though it doesn't have a float set... still shows up to the right of the last div! How come??? It's because it's still listening to the CSS of the previous div. It's for this reason that "clear:both;" was created, but not everyone knows about it. clear:both is actually just the fast way of saying clear: left AND clear: right... so you could use them individually if you only have one set in the divs above it. If you have div1 float left, and div2 float left... and want div3 to be neatly underneath, then you'll need a dummy div... like this. <div1 style='float: left;'> text </div> <div2 style='float: left;'> text </div> <div style='clear:both;'></div> <div3>Text goes underneath here</div> Most people who know CSS well will say "well, duh" to this stuff. But for people who are just learning to move divs around and use them instead of tables to make layouts.... these things will save you many many headaches down the road. I hope it helps... and I hope others share their discoveries that have made CSS much easier. |
CSS rules......yet still way to less people seem to be using it
|
Quote:
It can be intimidating, especially since some problems are difficult to find solutions too. This is why I created this thread. |
trying to learn it all now
it reminds of the first days of learning html lots of stuff to learn, and long hours doin it. |
Quote:
CSS, as little vocab or syntax as there is to learn, has millions of different combinations to put together, which makes learning last a long time. And it's worth it. |
their is a bug with ie and relative
|
Quote:
|
Quote:
But at least it's a start. |
ya and i noticed yesterday when specifying a height in a table example <table width="468" height="60">
it doesnt like that according to w3 it wants it height="style: height 60" |
Another tip that took me a while to figure out.....
4. Centering a div that has absolute positioning If you've ever set something to absolute, then tried to put margin: auto on it... you'll be thinking "why does it work in one browser, but not the other one if doctype is set to strict?" There is a trick to this that will work in all browsers... First you take the width of the div. In my example, we'll go with 500px; So we have #div { width: 500px; } Now we need it to be in the middle... so we apply a "left: 50%;" #div { width: 500px; left: 50%; } That puts the left edge of the div in the middle. Which is close, but not right because the center of the div should be in the center of the page. To solve this, we margin it back by half. Half of 500px is 250px; #div { width: 500px; left: 50%; margin: 0px 0px 0px -250px; } And presto, your absolute positioned div is now dead center in the page. It's also right at the top edge. Centering it vertically is a whole other beast and will require some javascript, especially if you scroll. And this is a CSS thread, not a javascript thread. Sorry, but it is possible.... keep working and you'll get it. |
Quote:
Browsers insist that height be set via CSS if at all ( style='height: 60px;' ) If you try to validate your page using W3C's validaters, you'll actually find that a lot of HTML is "deprecated" now, in favor of CSS. Height never was something common, but in the not too distance future, HTML tags themselves such as <center> and <b> and so on will be unacceptable in good web design. |
just a headsup.
Theres ways to get around having to use a 'dummy' div with a "clear:both". Having your divs fit snugly into containers means you wont need to, only in a few cases (usually for footers and when you cba to play around) just as ".clear { clear:both } " with make a pretty big gap too, so will look a little weird. Good idea to do this thread :) Shame GFY doesnt have post editing, or you could just keep expanding on the initial post like you would on any other 'tutorial' style forum :( |
^^^ sorry for the engrish, noticed too late to edit :)
|
Quote:
And yes, it would have been nice to keep adding more and more to post #1. Oh well :Oh crap |
Bookmarked! :)
|
One of the best advantages to CSS is to programmers.
5. CSS for programmers CSS makes a slick looking web page, but more importantly, it will greatly simplify your PHP/other code. Imagine if you will, a gallery that has 15 thumbs in it. You can have your code create a row <tr> and then so many <td>s and then another <tr> at $rowcount=5; and then another <tr>.... and so on. And figure out when to do your ifs and elses.... it's a pain to do something simple. Now imagine that in CSS, you created a div that's 700px width. So far so good. Now you can have each thumb set up like this: <a href='fullsize1.jpg'><img src='thumb1.jpg' class='thumb'></a> <a href='fullsize2.jpg'><img src='thumb2.jpg' class='thumb'></a> <a href='fullsize3.jpg'><img src='thumb3.jpg' class='thumb'></a> ... ... so on. And CSS the thumbs to float: left; .thumb { float: left; } Now the thumbs will go next to each other side by side, and wrap on their own down a row once there is not enough room. So you can change the size of your containing div to 500px if you want, and the thumbs will just know what to do on their own!! They'll wrap at a different thumb! Want to space the thumbs? padding: 5px. .thumb { float: left; padding: 5px; } Simple right? Now apply this to your code. Instead of doing the math to figure out when <tr>s start and end.... we just have a simple loop that does all of the images in a stardard output. The CSS does the rest. This applies to many things, including menu options, lists... what have you. Your PHP will be simplified once you don't have to figure out where in the code to put counters to track when to enter an HTML element. |
nice thread.... bookmarked.. :)
|
Quote:
form styles....that way you can keep all html basic and do all the styling with seperate css.files which you include in the head part of the html |
I still hate tableless designing :X
|
Quote:
align or anything else, instead you use CSS to define all those so you could use the same html for multiple pages that look different but just changing the stylesheet. Very handy for galleries, templates |
Quote:
but the same can't be said for vice versa. |
In response to the UL/LI concern here:
http://www.gofuckyourself.com/showthread.php?t=750133 6. Lists are not the same in IE/Firefox * For this post, I'm using "UL" but this works the exact same for "OL" lists as well. Lists are handled differently across multiple browsers even when you use the strict DOCTYPE. Why? I don't know. But IE tends to think it knows best about indenting and will try to do so no matter what. The way around this is to force your list and your listed items to nothing... and then work from there. For Example: ul { list-style: none; margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px; } This will make everything line up along the left hand side, no indents, no spacing.... no bullet points. Nothing. And it will do it in every browser. Now, there's no limit to where you can go from here. You can push things apart vertically, indent things... what ever you want. And your pixels will count the same in IE and in Firefox from here on out. But my suggestion is this... if you want the list as a whole moved, use the margin in the ul style. Otherwise, don't touch. You can handle most eveything you'll need to with the li styles. This will save you a lot of headaches later as you try to position things around your list. |
Good thread. Bump
|
I wasn't going to bother with this, because it's fairly basic and this thread is more for "problems that people get stuck on".... but after mentioning the list styles, this should be covered.
7. margin/padding: top right bottom left 99% of the time, you'll see something like this: #div { padding: 5px; } What this does is adds 5 pixels of padding on top, right, bottom and left of the div. All around it!! This is usually good enough, but not always. Sometimes we just want to put some padding to the left of it, to keep it from bumping into something else. To do this, we have to specify what we want for each of the sides. And doing things in order is very important. #div { padding: 0px 0px 0px 5px; } This will put 0 pixels of padding on the top, the right and the bottom but it will put 5 pixels of padding on the left. It's VERY IMPORTANT to keep it in that order... because the browser will, even if you don't. So, going back to point 6 in this thread, if you want to indent your li elements inwards a few pixels, you would add this: li { margin: 0px 0px 0px 3px; padding: 0px; } This will bump in each li element by 3 pixels. If they're too close vertically, you can add some underneath too. li { margin: 0px 0px 3px 3px; padding: 0px; } It's pretty easy, but it's important to remember the order around the element. Top, Right, Bottom, Left. Keep that in mind and you can move things, or pad them, anywhere you want. |
No one else have anything to add?
Any questions? |
Quote:
css is simple, i pay a guy that knows how to do it =] |
I'm big on tables but have been messing with CSS layouts more and more. They just seem cleaner. Great thread StuartD!
|
Quote:
1. This is the thumbs idea from #5. You can resize the browser as wide or as narrow as you like and see how the thumbs will just fit. I challenge you to try it with a table layout. http://www.9xs.net/thumbs.html 2. This one is a basic layout with a header, left and right column and a footer (copyright). Look at the source code to see the actual html (everything after the <body>). There's almost nothing to it at all. Take out the CSS at the top of the page and you'll have a very basic page. http://www.9xs.net/layout.html Hopefully these help to illustrate some of my points. |
thanks for the info stuart, you truly know what your talking about :winkwink:
|
Very cool - thanks for taking the time
|
Quote:
|
Yes, thanks for the great info! I've been a table jockey for far too long. The hardest thing about training is finding the time, these quick tutorials are great!
|
CSS is great !
Hi StuartD,
My site uses XML/XSLT & CSS. In the start I did not like CSS because I did not understand it, however after using it I find it is great... To visit my site click here. |
keep posting questions or CSS tips, this is a great thread and even for the
ones that are familiar with CSS you can learn new tricks or tips posted by others.....especially since with CSS there's many different ways to accomplish the same result. :thumbsup |
Quote:
But it's ok, if it helped even one person, that's good enough for me. |
Quote:
|
we need more threads like this!
|
I only started using CSS in the past six months or so. I'm not much a code junky and for the most part I'm just using it to tweak blogs or make simple galleries, but let me tell you it's fucking amazing how even simple things like float:left and float:right make life so much easier for me.
Before CSS, I was using tables in gallery design. :uhoh:Oh crap:ugone2far:helpme:error My galleries look much nicer, much cleaner, and actually convert a little better with the same sponsors (although their real test is coming in the next few days when my new Hun galleries start getting listed). |
wouldn't
margin: 0px auto; accomplish auto centering? EDIT: Forget it...I noticed you said absolute. |
Quote:
I have some more tricks that I can demonstrate, if anyone would like for me to share. |
All times are GMT -7. The time now is 03:31 AM. |
Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
©2000-, AI Media Network Inc