|
| |
|
|
FlowerPower
Posts: 67
Joined: 4/27/2004
Status: offline
 |
Standardization of CSS - 5/18/2005 19:43:16
I'm in the (neverending) process of learning CSS, but it's frustrating to spend so much time on finding little tricks to get a page that already works well in Netscape, Firefox and Opera to also work in IE (or any configuration of these and other browsers).
Will all the work on creating standards eventually bring about a time when using CSS will not be such a lengthy process of tweaking, headscratching and looking for hacks to deal with the quirks of the various major browsers? (Well, okay, the headscratching is probably just part of the deal if you want to do web design...)
Just my little sigh of frustration... Hopefully someone will tell me there's a light at the end of the tunnel (and that it's not just the proverbial jerk with a flashlight bringing you more work :-)...
|
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Standardization of CSS - 5/19/2005 6:00:48
I can list the books that I have on hand with recomendations. IF you both wish.
I love this one by Charles. He discusses a term called positioning context. Its an interesting term.
Relative and absolute positioning can be mind bogglers for newbies to css as well as seasoned css'ers.
Floats, to me at least, were relatively easy.
One thing you need to decided for yourselves. Are you going to serve designs on the older browsers? Or are you going to design so that your layout is viewable even if your css doesn't show up on the page?
You can use the @import to hide styles from the older browsers. IF your layout is done properly, the older ones can view your page, just not with the presentation that newer browsers can see. If you can go by the stats that you have on who views your pages, and NN isn't very high in those stats, then design as you see fit. Don't get so upset over the older browsers.
Learn and understand the box model. I can't stress this enough. And remember that in css, all elements are boxes. Even inline. The inline are just continuous boxes. A paragraph will be a box.
http://brainjar.com/css/positioning/
Check out the link above and print this out and read it. It shows what I am discussing above. Also remember that inline elements and block elements can be changed via the display property.
Start with building play pages. Check out the homework link that is in here. I posted things as I was learning them in the begining. LVS online learning site has great courses and they aren't expensive and the teacher Vikki is terrific and helpful. (BTW if you sign up for a course, let me know as I get credit towards a free course, but you need the email that I signed up with over there)
As important as the terms are in regards to positioning, try not to get to hung up on them as I have, lol or you will be forever trying to figure them out. Learn about the flow of the document. This is also important. Go to community Mx, they have great articles that you can purchase for only about 2 dollars each with files that go with each article for learning. Some of the things are even free in regards to css over there. One day, I'll sign up for the community, but not until I can afford to. Check out positioniseverything for bugs. John is one of the best bug hunters out there.
And post questions, no matter if you think they are stupid or not. What you post could help someone else during a search for answers.
Suzy (check out the link under my name) has a crib sheet that you can print out that has some great thing in it. Tanfa's web site.
Just keep on keeping. 
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Standardization of CSS - 5/19/2005 7:20:33
I also have that book and after reading that one and this new one, I have to say that Charles' book is better by far. He has a way of explaining things so that you get an understanding of things You can find it Here
I have about a dozen books on css, well maybe even a few more then that. In my quest to learn this the best that I could, I have purchased numerous books that have come out on css. And from all the books that I have read, I find that Charles Wyke-Smith is a terrific teacher. The working examples in the second part of his book are great.
Two other great ones are:
Integrated HTML and CSS: A Smarter Faster way to learn by Virgina Debolt
Web STandards Solutions: The Markup and Style Handbook by Dan Cederholm
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
womble
Posts: 5526
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Standardization of CSS - 5/19/2005 8:47:38
Thanks for the tips, I’ll check them out.
The books I’m using at the moment are:
- Web Standards Solutions: the markup and style handbook (Dan Cederholm)
- HTML Utopia: Designing without tables using CSS (Dan Shafer)
- Cascading Style Sheets: the definitive guide (Eric Meyer)
I think I’ve got the hang of the box model, and I’m finding the developers toolbar in FF great for outlining stuff to remind me just where all the little boxes are. I’ve been struggling with absolute and relative positioning though. That said though, I’m getting there slowly. At least I’ve got columns now in the right place. I thought I’d got an idea of this positioning lark, and all 3 columns are where they’re supposed to be. All I need to do now is stop the footer from floating mid way up the page! My centre column is longer than either the left or right columns, and the footer just seems to put itself wherever it feels like, usually somewhere in the middle of the page. My latest idea was to position the footer absolutely as well, lined up with the left margin and 97% from the top of the page. With that too though it’s still floating off wherever it feels like. Any ideas?
| |
|
|
|
Tailslide
Posts: 6032
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Standardization of CSS - 5/19/2005 9:20:05
I'm presuming that you've got floated divs making up your 3 columns? If so then adding a clear: both rule to the footer should put it and the end of the columns.
Using Absolute positioning can be useful but it should be used sparingly as it can lead to problems especially with big important bits of your design. For instance if you position the footer absolutely at the "absolute bottom" of the page, then your text could end up running underneath it if the screen is re-sized or if you add new text. As you probably know, positioning something absolutely takes it out of the normal flow of the page and other elements in that page then ignore the absolute element. It could cause you massive headaches. Also - use the Relative positioning thingy carefully too as it can do weird stuff to IE.
Clearing the footer should solve the problem though.
Here's a useful article on Footers: http://www.alistapart.com/d/footers/
Check your DTD too as that could cause problems with how the page is rendered.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
womble
Posts: 5526
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Standardization of CSS - 5/20/2005 7:24:45
Thanks Deb and Tailslide for the links (and thanks for the email Deb). I spent last night reading Eric Meyer's 'Cascading Style Sheets: the definitive guide' again to try and make sense of all this positioning (not the easiest read though!) and when I read it, it seems to make sense. The trouble is, then I try it and everything goes crazy. The ALA article seemed to make perfect sense, and I thought I'd cracked it, then tried it and...
Tailslide - no I'm using absolute positioning, not floats. I've tried putting the left and right columns as 'float', thinking I could use 'clear' to keep the footer below the columns, and the footer does indeed go to the bottom of the centre column, but so does the right column as well. I've read somewhere about using js to check the length of the columns, but I really want to try and avoid using js unless I have to. I also found that the left column shifted out of place slightly in IE (should be able to solve that with the box model hack?).
Anyway, I've uploaded it to www.ddeaf.org.uk/test/index.html, which has also showed up another problem. Everything appears to be well with the columns in FF, and in IE too when I preview it on my machine in IE, but on the uploaded file, the centre column has gone totally crazy. My brain's now struggling to make sense of all this and I'm getting to the stage where the more I read, the more confused I seem to get so I think I'll call it a day for now and come back to it tomorrow when, hopefully, it'll all make more sense.
| |
|
|
|
Tailslide
Posts: 6032
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Standardization of CSS - 5/20/2005 7:42:44
Womble - take this bit out pronto <?xml version="1.0" encoding="UTF-8" ?>
It puts IE into "Quirks" mode. For Quirks read "stuff it up" mode.
It basically tries to interpret the code as HTML 4.01.
Then look and see what's still wrong if anything.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Standardization of CSS - 5/20/2005 7:42:49
Ok Womble, I think its the box model that you need to understand more.
Here is the thing ok, you have your content, then you decide hey, add borders and margins ok? BUT the thing is for EACH of those you add, its going to increase the size of your content.
say your content box is 400 pixels. Then you decide to add 10 px padding to the left and right of the box. Well your content is enlarged now. The content box is 420 pixels wide. the 10px from the left and the right. Now when you add margins, say 5px to each side left and right, This is going to add another 10pixels to the size of the box. So if you planned on a 400pixel column(which is really a box) fitting into your layout, and you add the rest of the padding and the margins to this, you are actually enlarging your content section. Which you don't realize you are doing. I think this could be part of the problem with your page. Decrease your content areas by the width of the paddings and margins and see how things layout in your page.
Also remove this!
<?xml version="1.0" encoding="UTF-8" ?>
It really isn't needed as this isn't recognized by all the browsers and will throw your browser into quirks mode. (I think I have that part right)
For your strict xhtml use it like this
<!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" lang="en" xml:lang="en">
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
Ok, now work on these things and then see what happens with your positioning.
Just remember, if soemthing goes wrong to trouble shoot first before you think you have something wrong in the style rules. Check your xhtml, validate your css and xhtml. Make sure your dtd's are correct.
After you do this, we will see how the positioning works out. I have to look better at your styles etc..
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Standardization of CSS - 5/20/2005 7:55:29
Hi Womble, if you cut and past this into your page this is correct so far. FIRST, compare this to yours so that you can see where there were just a few coding errors.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[link=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/link]">
<html xmlns="[link=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/link]" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="ISO-8859-1" />
<title>Home Page - Ddeaf Equality Forward - working with Deaf, deaf, deafened, hard of hearing and deafblind people in Derbyshire and Nottinghamshire</title>
<meta name="description" content="This is the home page of Ddeaf Equality Forward: a voluntary organisation working in Derbyshire and Nottinghamshire to tackle issues surrounding deafness" />
<meta name="keywords" content="Ddeaf Equality Forward Derbyshire Nottinghamshire deaf discrimination sign language training courses discussion forum comic relief disability discrimination equal opportunities deaf hard of hearing deafblind deafened" />
<meta name="author" content="DdEF" />
<meta name="title" content="Ddeaf Equality Forward - Home Page" />
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Standardization of CSS - 5/20/2005 8:13:31
Womble, here is another suggestion for you. THis helps you during your layout so that you can see how things are with your boxes/divs. If you put each one of the divs at a different background color, just until you get the layout accomplished, it helps you to see how each one of the boxes/divs are going for you while you are laying out your page.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
(out of pure laziness), but I intend to remake it with css over my summer break. 
