Jump to content

HTML and CSS


vista?
 Share

Recommended Posts

As you can see, there is a poll about HTML so please answer it if you can 8)

Recently, I just learnt HTML,

here's the link to the HTML tutorial http://www.goodellgroup.com/tutorial/

Now that I've learnt it, I want to learn CSS. I've tried on Google, but all the websites I end up on don't make sense at all.

I was wondering if anyone would be kind enough to give me a link to a CSS tutorial which is written in clear english and makes sense! :)

Link to comment
Share on other sites

A few useful resources:

  • [*:35l2dnon]
HTMLDog.com - An excellent XHTML and CSS reference.

  • [*:35l2dnon]
CSS Zen Garden - The site I studied and used to teach myself how to make separated documents with complete CSS styling.

  • [*:35l2dnon]
A List Apart - An online monthly magazine for Web Design. If you're going to learn CSS, you may as well learn how to make it look pretty while you're at it.

  • [*:35l2dnon]
Your friendly neighborhood CMD - I'm always happy to answer any questions you may have from my wealth of interactive XHTML / CSS knowledge. :wink:

Along with the W3Schools link T_Lh offered, those should help you along the magical journey into the realm of CSS awesomeness.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

A few useful resources:

  • [*:8mu2kyfc]
HTMLDog.com - An excellent XHTML and CSS reference.

  • [*:8mu2kyfc]
CSS Zen Garden - The site I studied and used to teach myself how to make separated documents with complete CSS styling.

  • [*:8mu2kyfc]
A List Apart - An online monthly magazine for Web Design. If you're going to learn CSS, you may as well learn how to make it look pretty while you're at it.

  • [*:8mu2kyfc]
Your friendly neighborhood CMD - I'm always happy to answer any questions you may have from my wealth of interactive XHTML / CSS knowledge. :wink:

Along with the W3Schools link T_Lh offered, those should help you along the magical journey into the realm of CSS awesomeness.

CMD should automatically count as a HTML/CSS/Other confusing internet programming launguage.

I mean, have a look at his site, It owns.

Link to comment
Share on other sites

Heh. Thanks An'D. :wink:

It's a great idea to look at the examples of many professionals, seeing as even I don't know everything, hence the link to CSS Zen Garden. There are so many awesome designs there:

( Just a few personal favorites of mine: 1 - 2 - 3 - 4 - 5 - 6 )

I do a similar thing on my website, offering three possible style sheets: ( 1 - 2 - 3 )

( No, the third one is currently not on the CSS Switcher page. I'm still finishing a few things. )

There are three parts to making your site look awesome with CSS - Building the site structure (XHTML / HTML) so it's semantic and styleable, writing the CSS to build your block layout structure, and using a graphics program to make awesome graphics for your site. All three are needed for true CSS euphoria. PDN skizzles can come in handy here.

(The first two stylesheets my site offers are completely PDN-made, the third being an Inkscape / GIMP combo for diversity.)

But yeah, learning from a professional site is nice, but it's also useful to have someone to answer your questions. A person understands "Uh... I want it so this piece goes over here, but the rest of the stuff goes around it." much better than a search engine. :wink:

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Oh, by the way.

Don't believe IE7 when it comes to test the render of your code.

Develop using a modern and standard-compliant browser like Firefox, Opera or Safari, and next correct IEs' behavior.

I say that because I take a HTML/CSS/stuff course this year, and I've seen classmates using The Thing, even during an exam, which resulted in bugs, pain, and tears.

No. Way. I've just seen Bob. And... *poof!*—just like that—he disappears into the mist again. ~Helio

Link to comment
Share on other sites

Oh, by the way.

Don't believe IE7 when it comes to test the render of your code.

Despite my PC wanting me to install IE7 via Microsoft Updates I've now "blocked" the update. It looks horrible in my opinion.

Mind you, I do test out my coding in both Firefox and IE6

Link to comment
Share on other sites

It's still a good idea to test in IE6. Anyone using Windows 2000 or earlier must use IE6, and other users such as vista? who choose not to upgrade use it. IE7 is far from perfect, but it did fix several of the more pertinent errors IE6 had, so making your pages IE6 compliant is substantially more difficult.

I do my browser testing in:

Gecko (the rendering engine used by Firefox / Seamonkey / Netscape 9)

Opera

IE6

IE7

Similar to what Bob said, I develop for Gecko, doing all my checking during builds in Firefox. Once the site is done, I check it in IE6 and fix any problems that arise. Chances are, once it displays fine in both Firefox and IE6, it'll look fine in IE7 and Opera as well, but I tend to check anyway.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Yes I personally test in several browsers. I have Firefox 2, Opera 9, IE 7, IE 6 (standalone) and Safari 3 on my laptop and I boot into Ubuntu Live CD to test in Firefox and Konqueror. I have a friend test on his Mac for me.

For accessibility I also look at it in Lynx to see how it appears in text only browsers (I know I could just do this in Opera).

Also http://www.ilovejackdaniels.com/cheat-sheets/ has a nice collection of cheat sheets that come in handy to have around just for reference.

Link to comment
Share on other sites

I have a friend test on his Mac for me.

I'm reduced to doing that as well. I used to do my Safari testing in Safari for Windows, but it seems to have developed this rather interesting feature - about three seconds after it opens, it closes automatically! I just love all the handy little features Apple adds to their products!

<_<

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Topic & PDN related hijack...

Once upon there was the Paint.NET help files, they were translated, validated and otherwise modified.

Now I'm testing out 'content first, navigation later' method. This would help mostly people with text browsers.

Problem is, how to position with something other than absolute the navigation bar and content of PDN help files neatly?

Anyone here happen to know a trick or two?

I have 3 divs, banner, content and navigation, in that order.

sig.jpg.7f312affa740bae49243c4439bc4a244.jpg

Link to comment
Share on other sites

Once upon there was the Paint.NET help files, they were translated, validated and otherwise modified.

Now I'm testing out 'content first, navigation later' method...

Well, if I may again offer up CMDSketchpad as a bastion of awesomeness: :wink:

Take a look at the site without styling by clicking on this link: [ CMD - Style ] (Attn: see "Note" below)

Take a look at the site organization when it's left to fall on its own. In the HTML structure, I have the side links and the main navigation links after the body content. I use absolute positioning on the Main Navigation links to put them above the rest of the content, and to keep it looking proper while centered, I have the body container div set to position:relative;. This makes the container div the anchor for the absolutely positioned divs inside of it, so as the container stays centered, the links do too.

The alternate is shown by the side links, which are floated left along with the body div. As long as the combined width of the body content area and the side link area is less than or equal to the width of the container, they will abut each other on the same horizontal line (top aligned). This won't put the links above the content, but it will bring the links up to the same level. Perhaps this would suffice if you still don't want to use absolute positioning.

Are the rewritten pages out somewhere on the Internet? If so, shoot me the link to them, and I'll take a look at how it can be done.

Note:

The above link to remove the styling from CMDSketchpad actually sets the stylesheet to "none.css", a sheet that overwrites a rule instantiated in a separately included universal stylesheet for the side link icons. In order to use CMDSketchpad with styling again, you'll have to set the style to one of the other sheets by using a link on the CSS Switcher page.

You could alternately click on the following link to reset the style to the default sheet: [ CMD + Style ]

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

carbonize: I don't think floats work in my case. Content being before navigation and navigation should position before content in a way.... or something along those lines.

CMD: Link. I uploaded one of the pages there along with the stylesheet. I'm redoing all the images now I have Vista and also waiting for 3.20 final after which I'll update all the pages.

sig.jpg.7f312affa740bae49243c4439bc4a244.jpg

Link to comment
Share on other sites

Welcome to the wonderful world of CSS driven design. As CMD'd site shows, as do most Zen Garden samples, it is better to make your content of a fixed with and center it on the page. With some people still being on 800 pixel wide screens and yet others being on ridiculous sizes like 1900 it is better to fix the width so you know exactly what it will look like on every monitor.

The only other method you could use, if you want a dynamic width, would be to use absolute positioning on the menu to place it on the left side of the content. Then set the left side padding of your content div to be slightly wider than the width you have set the menu div to.

Link to comment
Share on other sites

@Zagna:

The way you're doing it currently seems to be working fine. The navigation appears to the left of the content, as it would on a "normally organized" site, and the content area scales to fit the screen width, down to the width where the images overflow. Is this the organizational structure you wanted, or should I play around with a few more options?

@vista?:

Hang on a minute, where's my poll gone?!

I believe 'twas nixed at 7:12pm on Friday, board time. Polls are allowed in The Overflow, but "even then we may delete them if they are useless." Your poll really didn't offer anything to the thread - whether or not a random user has knowledge of HTML and CSS does not help you learn it. Replies to this topic are better as explanations, with links to resources that will help you, instead of "Yes" or "No" responses.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

The look and feel of it is just fine and dandy. With the other option of fixed width and floats, even with it having 1 absolute, I'm content with it.

So I shall stick with this, which btw, I got from HTML Dog which has nice examples.

sig.jpg.7f312affa740bae49243c4439bc4a244.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...