Css???

[Danzig]

Many thanks to Meow who have learnt me some of the more basic CSS stuff but now I am back and I want more! :)

I have decided to go head on with this positioning thingy but no where can I find an explanation that is understandable. :confused: I don't understand anything...not even what tags or commands that should be used.
Yes I know!!! I am a dumbass but please don't hamper me with that instead try to help my confused mind out here.

The thing is that I am currently using tables to positioning everything where I want them but no matter how I do it don't manage to put the intended text & grafix where I want them. I can't understand how some sites position their tables, it seems like magic but then again I am quite sure they are cheating with CSS! The tables just seem to be where it should be impossible to get them!?! How the hell do they do this! Sure I have pushed the "view source" button on several sites but I have never managed to decipher how it's done! Lets just face it! I am just plain stupid.;)

Well guys and girls, at this point any help is a push in the right direction, please help a retard out!

[meow]

No, you aren't a dumbass. That's weep's job :p

Firstly, if you are going for CSS positioning you don't want to use tables. Secondly, it's hard to find really easy to understand beginner stuff on this, because it's so complex. It isn't like HTML, everything can be done in many ways and it doesn't always work the same in all browsers.

I'm no expert, I'm still trying to wrap my brain around it. The only advice I can give is read the specs (even if you don't understand - it grows on you) and try things out. Take small steps or you'll go crazy. Oh, you do want to get a grip on the box model or you're lost.

Brainjar has some decent positioning stuff, even if it's short.
http://www.brainjar.com/css/positioning/

These maybe:
http://www.westciv.com/
http://www.richinstyle.com/

[Danzig]

Originally posted by meow
No, you aren't a dumbass. That's weep's job :p
Frankly, I can't understand why they have made it so difficult, was it just for the hell of it? :confused2

Brainjar has some decent positioning stuff, even if it's short.
http://www.brainjar.com/css/positioning/

Aaaahh, finally I understand what I am up against!!:D This cleared a lot of "should it be like this? or maybe like this? or is it just...". Thanks for the links, I am gonna keep fiddling with this all night now. Doing some basic positioning don't seem to be too difficult, everything is going smooth but I am sure I will hit the wall quite soon.... It can't really be this easy, right? ;) Well, we will see...

[murat]

meow's name is frankly ?

[Danzig]

DANG!!!!

Just after I pushed the "Submit Reply" button, I got really stuck!! Oh well I guess nothing is perfect! I 'm gonna try some more but I guess I'll see you guys soon again!:D

[meow]

Yup, Frankly Frankfurter, that's me. :p

It can't really be this easy, right? Well, we will see...
It isn't...you will see. I saw brainjar has an explanation of the box model. Start there. Then see IE5x trash it. :D
What browser(s) have you got btw? It's easier to use one that gets it right before one starts to bother about the quirks.

[Danzig]

Hey Mr. Frankfurter!:D

I am using Internet Explorer 5.5 Sp 2 and Netscape 6.2.1

I hope any of those are good!?:)

[Danzig]

This is awful!!! I thought it all were coming along nicely I spanked everything together and for a brief shining moment all was well, I got my hopes up and started to get optimistic about the future, thinking "Well this wasn't so hard maybe php is the next project for me"... Oh boy was I on the wrong boat or what!!! I fired up Netscape and couldn't belive my eyes, everything was a mess!!!

Could you please have a look? What can I do to fix this?

http://danzigj.tripod.com/test/st2.shtml

[Lokannon]

Im using IE6, and it looks fine from here. Only problem i see is the big black space on the right side, and the little black strip on the bottom.

:: Lokannon

[Danzig]

Originally posted by Lokannon
Im using IE6, and it looks fine from here. Only problem i see is the big black space on the right side, and the little black strip on the bottom.

:: Lokannon

The black space and the black strip is a feature!:D Well maybe not a feature but I know about it! It was certainly intended, it is just a test page anyway. The interesting part is all of the text boxes. ;) IE 5.5 looks fine for me too, but argh!!! that cursed Netscape wreckt havoc on the page!:cry2:

[meow]

Wow! That's amazingly good man. You must be a natural. :envy: ;)

Sad to tell you that IE5x gets the box thing (and more) wrong and needs more or less complicated hacks and workarounds. What you see in Netscape is proabably what you've written. :p

Both IE6 and Netscape6/moz can run either in "strict" or "quirks" mode and this is triggered by the DTD ( not the same as Strict and Loose DTD). You may want to add an URL to your DTD to force them into strict (=correct) rendering mode.

"The Doctype Switch"
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
http://www.hut.fi/u/hsivonen/doctype.html
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
http://mozilla.org/docs/web-developer/quirks/
http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html

Bugs
http://www.webreview2.com/style/mastergrid.shtml
http://www.richinstyle.com/bugs/table.html
http://css.nu/pointers/bugs.html

Welcome to the wonderful world of browser bugs and workarounds. :p :D

[Danzig]

Originally posted by meow
Wow! That's amazingly good man. You must be a natural. :envy: ;)
Thanks, but it is all thanks to you meow that I managed this! Thanks man!


Both IE6 and Netscape6/moz can run either in "strict" or "quirks" mode and this is triggered by the DTD ( not the same as Strict and Loose DTD). You may want to add an URL to your DTD to force them into strict (=correct) rendering mode.


Ok let me in on this secret! I don't have the slightest idea of what you are talking about. I have been banging my head against the above text for hours and I think you have lost me here... What the heck is DTD, strict, quirks, strict and loose.....Please enlight this poor soul!:o

[meow]

Oops! You have one in the code at the top of your page so I thought you knew. Poor sod. This will be a mouthfull for you. :p

In short, a Document Type Declaration tells what flavor of HTML you are using.

HTML4.01 (or XHTML1.0 if you prefer) comes in 3 different versions. Most presentational attributes (color, size, align...) are deprecated, meaning if you are a good boy you'll use CSS instead.

Transitional (Loose): This is meant as a transitional state towards a stricter future :p Deprecated attributes and elements are allowed.
Strict: Same as Loose but you can't use deprecated tags
Frameset: Obviously to be used with a frameset page.
Easy to use reference found here: http://www.htmlhelp.com

A DTD is necessary if you for instance want to validate your document or the validator won't know which specification it should follow. (You do want to validate if you use CSS2. It catches all the typos and other mistakes with both HTML and your CSS and saves loads of time. It easy to type ":" instead of ";" and hard to see. ;) )

Now, earlier browsers didn't give a damn' about the DTD. From versions 6 both IE and Netscape/Moz use the DTD to decide if they should render the document the same way the older versions did or as standard compliant and correct as they are capable of. This is called "Standard Mode" and "Quirks Mode" and is a pretty smart thing, because without this most older pages would have become more or less unusable in IE6. What's less smart is that the idiots of course didn't agree on the rules so it's a little tricky (again).

The DTD's can be written in a couple of ways (see the URLs above). The one for Transitional that you use will trigger Quirks Mode. To get Standard Mode you need to use a longer version with an URL to the specification.
(Case Sensitive)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
No DTD at all will trigger Quirks Mode and most legit ways of writing a Strict DTD trigger Strict Mode (I think ).

That's why I find it easier to use HTML 4.01 Strict. But if you do - kiss "align" and its friends goodbye.

Hope I managed to express some of this in an understandable way. :yawn:

Remember that IE5x gets the box model all wrong and can ---- pages up bad.

And hey - Have fun! :jump:

[Danzig]

Yikes!!! I am slowling starting to understand what you mean with "the wonderful world of browser bugs and workarounds" :cow: I am not sure how I should do now, I can't really see myself getting stuck in with the finer points of browser bugs for the next couple of month. There must be an easy way out!?! ;)

I am thinking abit like this now: the page look like I intended it to in IE 5.5 and a friend of mine browsed on it with some IE 6x version and said that he saw no problems. With Netscape 6.2.1 everything looks awful. These are the only versions I have checked so far. Considerering the statistics of my site, 92.1% using IE, 4% using Netscape, 2.1% is using Opera, 0.4% is using Lynx, 0.4% is using Konqueror and a very few people are using some darn Amiga Browser and some the Crystal Atari Browser. Of the IE users 55% are using 5x and 43% using 6x. If everything really is looking like it is supposed to in IE 6x then I am really consider the option to just feck all netscapers! I am not sure if it would be worth it to spend alot of time with browser bugs if it is clearly very complicated, I should really be spending my time learning php now :book:

DTD...:o I should have known that I guess!:o


That's why I find it easier to use HTML 4.01 Strict. But if you do - kiss "align" and its friends goodbye.

Would you mind explaining? What is the problem with "align"? I wouldn't be able to center texts without it, would I? Of course I understand that I am wrong but I can not see how it would be possible to say bye bye to "align".

Thanks Meow:)

[meow]

Originally posted by Danzig
I am thinking abit like this now: the page look like I intended it to in IE 5.5 and a friend of mine browsed on it with some IE 6x version and said that he saw no problems.
<snip>
If everything really is looking like it is supposed to in IE 6x then I am really consider the option to just feck all netscapers!

The problem with this is that you would feck yourself at the same time...because IE5 is the one that gets it wrong. IE6 in Quirks Mode display it as IE5 used to...so you would be learning the wrong way. No one knows if IE7 will even have a Quirks Mode


Would you mind explaining? What is the problem with "align"? I wouldn't be able to center texts without it, would I? Of course I understand that I am wrong but I can not see how it would be possible to say bye bye to "align".
That's where CSS comes in. "text-align: center" :)

The whole purpose of this is to separate structure and presentation. HTML for structure and CSS for presentation. Presentation is all the fluff. How it looks, where it is...Structure is the basics. Headings, paragraphs, lists...the HTML stuff that carry some kind of meaning and isn't just about how it looks. CSS needs the structural HTML. It's fist when one makes this separation that CSS becomes really lean and effective.

One way to do it is to learn a little at the time. There's so much you can do without the really advanced stuff. Have you thought about that this block model thing means that you basically can make every element, every "tag" visible and affect how it's displayed? Just by changing the line spacing, adding a first line indent and maybe a bottom or top border to a P, change the margins, padding and width and so on you can make things look pretty good.