adewasco2k: I just want to add something, every single website i try to build(just practicing) eve if i manage to get it as i want on the front end...the back end is always very ugly if anybody view the source they will be like who is this learner i am still learning i know but i wish to get my codes organized and fine.
i am try to upload a page i did few day back for you guys to see that at least i am learning fast....will update the post when i upload it....just a page though. thanks guys.

updated
see this links:
http://wasconet.com/learn/learning2.html
http://wasconet.com/learn/learning.html

and mind you guys my site is just wordpress with a theme. i did absolutely little coding on it.

GraphicsPlus:


Positioning can really be confusing to every beginner. Relative positioning simply takes its position from the parent container. But absolute positioning takes its position from your browser window. For instance, if you position something absolutely and do ctl -, u wil discover that the thing wil just jump out of the page and position itself at the edge of ur browser window.

So if u must use absolute positioning, then u must position the parent of that thing to relative.

With positioning, u can use-
top:2px;
bottom:2px;
or
right:2px;
left:2px;

U can use positioning to position your div, image or anything to any place in your web page.

yawa-ti-de:
1) This is a site that I always refer to, for responsive web design (RWD) inspiration: http://mashable.com/

2) Responsive Design and background images: http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/ - I will probably be learning from you as I have just started reading up on RWD. I am currently reading up on OOCSS. After I am done, I will move on to RWD.

3) Given that mobile device browsers are generally webkit (with the exception of windows phone...but who cares for them, right? ), I would say you have browsers that support CSS3 covered.

Good luck, and do share what you've learned.

GraphicsPlus: To get a full perfect background image that will cover the whole body, do this.

body {background:url(bg.jpg) no-repeat;
background-size: cover;}

But since 'background-size' is css3, u hav to debug it. So,
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;

When u are styling with @media queries, do this:

body {background:url(bg.jpg) no-repeat center center;
-moz-background-size:100%;
-webkit-background-size:100%;
background-size:100%;}

Make sure that u convert all ur pixels to percentage in @media query. change padding, margins and widths from px to %. Set heights to auto. Change ur font-size from px to em.

Go somewhere in ur css and do this:
img {max-width:100%;}
This will make ur images to render at whatever size they want, as long as they ar narrower than their containing element. But if they happen to be wider than their container, then the 'max-width:100%;' directive forces the images' widths to match the width of their container.

X3n: I tink we shld focus more on Responsive Web Designing. I'm still a novice in dat aspect, but 4rm d little I've researched I tink its based on usin % instead of pixcels. As I research further, I'll share in this thread nd I suggest dat any1 who knws more abt it shld also enlighthen us.
I will lyk 2 add a lil tin 2 d xplanation of relative positioning, wen u relatively position an element, nd use d 'top' 'left' right' 'down', d element will tke its position relative to the normal flow of d page.

adexsimply: You Share What you know and we follow

adexsimply:
i'll just list some common ones

1)Floated layout misbehavior
2)Centering a layout e.g margin:auto;
3)it totally ignores top-margin if compatibility mode is turned on
4)staircase effect..i.e using <ul>,<li> for navigation
5)inabilty to have elements with small heights
6) at times Border-Radius does not work at all.etc