Some CSS "must knows" from me, and please share yours - GoFuckYourself.com

StuartD · 07-10-2007, 06:51 AM

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.

ServerGenius · 07-10-2007, 07:02 AM

CSS rules......yet still way to less people seem to be using it

StuartD · 07-10-2007, 07:19 AM

Quote:

Originally Posted by ServerGenius

CSS rules......yet still way to less people seem to be using it

Well, CSS has been around for a very long time and only now are designers really starting to use it to it's real potential.

It can be intimidating, especially since some problems are difficult to find solutions too.

This is why I created this thread.

cool1 · 07-10-2007, 07:27 AM

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.

StuartD · 07-10-2007, 07:32 AM

Quote:

Originally Posted by cool1

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.

Yup, it's one of those things that you'll never stop learning better ways to do simple things on your pages. Even after years, you'll do something different one day and go "wow, that's way better than the way I was doing it before!"

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.

fris · 07-10-2007, 07:37 AM

their is a bug with ie and relative

ServerGenius · 07-10-2007, 07:44 AM

Quote:

Originally Posted by Fris

their is a bug with ie and relative

IE has a another definition of pixel size

StuartD · 07-10-2007, 07:53 AM

Quote:

Originally Posted by Fris

their is a bug with ie and relative

IE has a lot of bugs, and using the "strict" DOCTYPE will not be a guarantee of anything... there will still be some things that IE simply will refuse to do according to standards. That's M$ for you.

But at least it's a start.

fris · 07-10-2007, 07:58 AM

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"

StuartD · 07-10-2007, 08:00 AM

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.

StuartD · 07-10-2007, 08:03 AM

Quote:

Originally Posted by Fris

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"

Yeah, height= is technically not an attribute in html by most browsers.
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.

Goodings Media · 07-10-2007, 08:31 AM

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

Goodings Media · 07-10-2007, 08:37 AM

^^^ sorry for the engrish, noticed too late to edit

StuartD · 07-10-2007, 08:55 AM

Quote:

Originally Posted by Goodings Media

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

It's very true... fitting things in snuggly is the best route to go. Then the next div will simply wrap below. But this can lead to things being off centered or just not quite where you want them sometimes. It's a matter of trial and error... use what serves best at the time.

And yes, it would have been nice to keep adding more and more to post #1. Oh well

Elli · 07-10-2007, 09:02 AM

Bookmarked!

StuartD · 07-10-2007, 09:04 AM

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.

gimo33 · 07-10-2007, 09:07 AM

nice thread.... bookmarked..

ServerGenius · 07-10-2007, 09:08 AM

Quote:

Originally Posted by StuartD

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.

same strategy works to define colors, fonts, backgrounds/colors, table styles
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

lucas131 · 07-10-2007, 09:14 AM

I still hate tableless designing :X

ServerGenius · 07-10-2007, 09:16 AM

Quote:

Originally Posted by lucas131

I still hate tableless designing :X

you'd still use tables but without table properties like width, height, color,
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

StuartD · 07-10-2007, 09:19 AM

Quote:

Originally Posted by lucas131

I still hate tableless designing :X

It doesn't have to be so bad. When done right, you can convert ANY tabled design into a CSS/div design and have 0 differences in appearance...

but the same can't be said for vice versa.

StuartD · 07-10-2007, 09:43 AM

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.

Azlord · 07-10-2007, 09:48 AM

Good thread. Bump

StuartD · 07-10-2007, 09:50 AM

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.

StuartD · 07-10-2007, 10:53 AM

No one else have anything to add?
Any questions?

BitAudioVideo · 07-10-2007, 11:20 AM

Quote:

Originally Posted by lucas131

I still hate tableless designing :X

tables are for spreadsheets!

css is simple, i pay a guy that knows how to do it =]

Horny Dude · 07-10-2007, 11:30 AM

I'm big on tables but have been messing with CSS layouts more and more. They just seem cleaner. Great thread StuartD!

StuartD · 07-10-2007, 11:46 AM

Quote:

Originally Posted by Horny Dude

I'm big on tables but have been messing with CSS layouts more and more. They just seem cleaner. Great thread StuartD!

Thank you. I decided to put together a couple of examples just to demonstrate... maybe not the best (they're done fast) but they should give you the right idea.

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.

Art Del Gado · 07-10-2007, 12:07 PM

thanks for the info stuart, you truly know what your talking about

Verbal · 07-10-2007, 12:15 PM

Very cool - thanks for taking the time

StuartD · 07-10-2007, 12:33 PM

Quote:

Originally Posted by pornopete

The flaw with CSS is it's based on a programming concept, not a design concept. Designers aren't programmers.

As opposed to HTML that uses rows and columns?

wild_s · 07-10-2007, 12:56 PM

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!

yahoo-xxx-girls.com · 07-10-2007, 01:03 PM

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.

ServerGenius · 07-10-2007, 03:17 PM

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.

StuartD · 07-10-2007, 05:11 PM

Quote:

Originally Posted by ServerGenius

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.

This thread isn't entertaining enough for people to care about.

But it's ok, if it helped even one person, that's good enough for me.

ServerGenius · 07-10-2007, 06:00 PM

Quote:

Originally Posted by StuartD

This thread isn't entertaining enough for people to care about.

But it's ok, if it helped even one person, that's good enough for me.

mission accomplished then

mrthumbs · 09-01-2007, 02:31 PM

we need more threads like this!

porntertainment · 09-01-2007, 03:20 PM

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.

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).

Young · 09-01-2007, 03:30 PM

wouldn't

margin: 0px auto;

accomplish auto centering?

EDIT: Forget it...I noticed you said absolute.

StuartD · 09-01-2007, 04:58 PM

Quote:

Originally Posted by mrthumbs

we need more threads like this!

Thank you kindly.
I have some more tricks that I can demonstrate, if anyone would like for me to share.

Tempest · 09-01-2007, 05:30 PM

Why use XHTML strict?? I was going to try and do that but found it too limiting for me and so I've been using XHTML Transitional and am VERY happy with the results I'm getting. I've been validating all my pages as I do them until I'm very proficient at it.. (pretty much there now but it still helps as it catches errors).

The one thing I don't understand with CSS is the difference between using "#" or ".". My understanding is that # is used only for items that will be used once on the page and you set the id= parameter.. the other is for a "class" which can be used multiple times... So why not just make everything a class and then you don't have to worry about it? I've noticed some sites get it wrong where they define something using # and then use it in multiple locations.

StuartD · 09-01-2007, 05:40 PM

Quote:

Originally Posted by Tempest

Why use XHTML strict?? I was going to try and do that but found it too limiting for me and so I've been using XHTML Transitional and am VERY happy with the results I'm getting. I've been validating all my pages as I do them until I'm very proficient at it.. (pretty much there now but it still helps as it catches errors).

The one thing I don't understand with CSS is the difference between using "#" or ".". My understanding is that # is used only for items that will be used once on the page and you set the id= parameter.. the other is for a "class" which can be used multiple times... So why not just make everything a class and then you don't have to worry about it? I've noticed some sites get it wrong where they define something using # and then use it in multiple locations.

Firstly.... strict is what i recomment for xhtml and for html as it is the closest to "standards compliant" that it will get. It means that even IE (yes, the devil browser) will try it's damnedest to be compliant and display your CSS the way that it's meant to be displayed.
If you don't do a ton of less compatible stuff, then transitional would be quite fine as it sort of interprets things as best it can without being... well, strict.

Secondly, ID's and classes are meant to be used as if it were chapters and volumes in a novel. An ID for an area, such as "rightcolumn" that would only ever be set once, and then classes within it that might be used over and over within that "volume".

But yes, I agree... it really would make sense to just use classes all the time really. It would work just as well.
Someone somewhere along the way decided on "structure" and chose ID's and classes.

Deej · 09-02-2007, 12:22 PM

couple tidbits I didnt know.

THanks Stu

JamesK2 · 09-02-2007, 12:43 PM

thanks for the info I'm learning CSS atm and this thread is very useful

testpie · 09-02-2007, 01:03 PM

Here's a quick tip:

Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS:

Code:

* {
 margin:0;
 padding:0;
}

This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these.

Enjoy.

Lycanthrope · 09-02-2007, 01:30 PM

Quote:

Originally Posted by testpie

Here's a quick tip:

Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS:

Code:

* {
 margin:0;
 padding:0;
}

This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these.

Enjoy.

The single best thing you can do to "zero out" every browser across the board

borked · 09-02-2007, 01:51 PM

Great thread and great idea!

But, there's a lot I don't understand with CSS, and Stuart's example below shows my ignorance. Take the Acid 2 Test and see if your browser is compliant...

Safari 3 passes the test, Opera 9 neerly passes (nose colour wrong), and besides some very minor other browsers that's it.

The reason I bring this up is that Safari 3, 100% compliant, renders the below wrong. There is no header - the images start and the text wraps around.

CSS is great, and these kinda rules are essential, but it goes much deeper than simple rules - the only rule is to test in as many browsers as possible.

Quote:

Originally Posted by StuartD

Thank you. I decided to put together a couple of examples just to demonstrate... maybe not the best (they're done fast) but they should give you the right idea.

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.

Twisted Dave · 09-02-2007, 03:17 PM

Excellent thread! BUMP!

Tempest · 09-02-2007, 03:20 PM

Quote:

Originally Posted by testpie

Here's a quick tip:

Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS:

Code:

* {
 margin:0;
 padding:0;
}

This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these.

Enjoy.

Nice one.. didn't know about *.. there's some special things like that that I'm not aware of.

StuartD · 09-02-2007, 03:31 PM

50 CSS tips and tricks....

Let's keep sharing!

07-10-2007, 07:02 AM	#2
ServerGenius Confirmed User Join Date: Feb 2002 Location: Amsterdam Posts: 9,377	CSS rules......yet still way to less people seem to be using it __________________ \| http://www.sinnerscash.com/ \| ICQ: 370820 \| Skype: SinnersCash \| AdultWhosWho \|

07-10-2007, 07:27 AM	#4
cool1 sex is good Join Date: Sep 2001 Location: Carman, MB Canada Posts: 24,939	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. __________________

07-10-2007, 07:37 AM	#6
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,248	their is a bug with ie and relative __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

07-10-2007, 07:58 AM	#9
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,248	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" __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

07-10-2007, 08:00 AM	#10
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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. __________________ This is me on facebook This is me on twitter

07-10-2007, 06:51 AM	#1
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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. __________________ This is me on facebook This is me on twitter

07-10-2007, 08:31 AM	#12
Goodings Media Confirmed User Join Date: Apr 2007 Location: UK Posts: 1,987	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 __________________ ICQ: 446-568-913 Email: liam\|\|goodingsmedia.com msn: [email protected]

07-10-2007, 08:37 AM	#13
Goodings Media Confirmed User Join Date: Apr 2007 Location: UK Posts: 1,987	^^^ sorry for the engrish, noticed too late to edit __________________ ICQ: 446-568-913 Email: liam\|\|goodingsmedia.com msn: [email protected]

07-10-2007, 09:02 AM	#15
Elli Reach for those stars! Industry Role: Join Date: Apr 2003 Location: Vancouver, BC Posts: 17,991	Bookmarked! __________________ Make More Money with Cams and Dating at FFN.com! email: [email protected]

07-10-2007, 09:04 AM	#16
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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. __________________ This is me on facebook This is me on twitter

07-10-2007, 09:07 AM	#17
gimo33 Confirmed User Join Date: Mar 2006 Posts: 5,599	nice thread.... bookmarked.. __________________ Galleries that sells www.highendcreatives.com Avail of the $10 per gallery, promo!! Highend Designs at Low Price. Contact us now!

07-10-2007, 09:14 AM	#19
lucas131 ¯\_(ツ)_/¯ Industry Role: Join Date: Aug 2004 Posts: 11,475	I still hate tableless designing :X

07-10-2007, 09:43 AM	#22
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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. __________________ This is me on facebook This is me on twitter

07-10-2007, 09:48 AM	#23
Azlord Confirmed User Industry Role: Join Date: Dec 2003 Location: City... City of Satan Posts: 2,651	Good thread. Bump

07-10-2007, 09:50 AM	#24
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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. __________________ This is me on facebook This is me on twitter Last edited by Ice; 07-10-2007 at 09:58 AM..

07-10-2007, 10:53 AM	#25
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	No one else have anything to add? Any questions? __________________ This is me on facebook This is me on twitter

07-10-2007, 11:30 AM	#27
Horny Dude Earn enough to buy coffee Industry Role: Join Date: May 2002 Location: San Diego, Ca. Posts: 4,912	I'm big on tables but have been messing with CSS layouts more and more. They just seem cleaner. Great thread StuartD! __________________

07-10-2007, 12:07 PM	#29
Art Del Gado Confirmed User Join Date: Nov 2003 Location: Los Angeles, CA Posts: 960	thanks for the info stuart, you truly know what your talking about __________________ Art Del Gado ICQ: 616143

07-10-2007, 12:15 PM	#30
Verbal Confirmed User Join Date: Dec 2001 Location: Tampa, FL Posts: 3,420	Very cool - thanks for taking the time

07-10-2007, 12:56 PM	#32
wild_s Registered User Join Date: Sep 2006 Posts: 36	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!

07-10-2007, 01:03 PM	#33
yahoo-xxx-girls.com Confirmed User Join Date: Jul 2006 Location: Canada Posts: 3,143	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.

07-10-2007, 03:17 PM	#34
ServerGenius Confirmed User Join Date: Feb 2002 Location: Amsterdam Posts: 9,377	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. __________________ \| http://www.sinnerscash.com/ \| ICQ: 370820 \| Skype: SinnersCash \| AdultWhosWho \|

09-01-2007, 02:31 PM	#37
mrthumbs salad tossing sig guy Join Date: Apr 2002 Location: mrthumbs*gmail.com Posts: 11,702	we need more threads like this!

09-01-2007, 03:20 PM	#38
porntertainment Confirmed User Join Date: Dec 2006 Location: The Internet Posts: 151	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. 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).

09-01-2007, 03:30 PM	#39
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	wouldn't margin: 0px auto; accomplish auto centering? EDIT: Forget it...I noticed you said absolute. __________________ ★★★

09-01-2007, 05:30 PM	#41
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	Why use XHTML strict?? I was going to try and do that but found it too limiting for me and so I've been using XHTML Transitional and am VERY happy with the results I'm getting. I've been validating all my pages as I do them until I'm very proficient at it.. (pretty much there now but it still helps as it catches errors). The one thing I don't understand with CSS is the difference between using "#" or ".". My understanding is that # is used only for items that will be used once on the page and you set the id= parameter.. the other is for a "class" which can be used multiple times... So why not just make everything a class and then you don't have to worry about it? I've noticed some sites get it wrong where they define something using # and then use it in multiple locations.

09-02-2007, 12:22 PM	#43
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	couple tidbits I didnt know. THanks Stu __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

09-02-2007, 12:43 PM	#44
JamesK2 Confirmed User Join Date: Aug 2004 Location: The Netherlands Posts: 6,589	thanks for the info I'm learning CSS atm and this thread is very useful __________________

09-02-2007, 01:03 PM	#45
testpie Mostly retired Industry Role: Join Date: Apr 2006 Location: UK Posts: 3,231	Here's a quick tip: Instead of wrangling with every element and having to put margin:0;padding:0; use this at the top of your CSS: Code: * { margin:0; padding:0; } This works by using the wildcard match to make every element on the page have no padding and no margin without having to constantly redefine these. Enjoy. __________________ Affiliates: DogFart ~ Domain parking: NameDrive ~ Traffic broker: Traffic Holder

09-02-2007, 03:17 PM	#48
Twisted Dave Confirmed User Join Date: Mar 2006 Posts: 3,635	Excellent thread! BUMP! __________________ Custom Cartoon Mascots - ICQ: 243355699, Email: [email protected] or Click Sig - 15% referrals. Send me clients, make money!

09-02-2007, 03:31 PM	#50
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	50 CSS tips and tricks.... Let's keep sharing! __________________ This is me on facebook This is me on twitter