6/27 What is this?
This is a project that demonstrates the use of cascading style sheets to seperate the content of a webpage from it's layout.
This page will also feature me ranting/babbling about random thoughts and the experience and the walls I will inevitably run into when trying to make this page look the way I intend it to.
6/27 My aims
I really want to use PHP in the future and that is going to dictate how I make the HTML itself, I'm going to stay away from extraneous divs as that would just complicate the PHP side of things too much. Of course all the styling will be handled with CSS.
6/27 Printy
When using style sheets you can have a style sheet that is used when the page is being displayed in a web browser, and then another in the background which is automatically used when the user wants to print the page
6/27 WTF
I can't seem to figure out why it is that there is a red space between the two divs, it's frustrating
6/27 Line Height
The line-height property of the p tag doesn't seem to affect the...line height of the p tag... /me slits wrists
6/28 Browser differences
Okay now I have Firefox displaying the page (almost) how I want it to except for the papa div not being centered as it is on ie, and IE is still showing the red space between the header and mainbody divs.
I have gotten rid of the line height problem I was having but that introduced another: the line height isn't enough now. It actually turned out that I was messing around with the wrong setting all together. I changed the margin of the p tag to 0px and then the huge gaps between the headings and the following paragraphs simply ceased to exist.
Now you do want somewhat of a gap between the heading and the following paragraph so I set the margin in the p tag to 5pt, which made the h3's protrude out of the main body on both ie and firefox, very annoying. So right now I have to choose between massive gaps or no gaps at all.
6/28 Nice
Finally got rid of the space between the heading and mainbody divs by moving the background picture from "#heading h1" to "#heading", setting the h1's background to transparent and making sure it didn't specify it's size. Now to figure out how to center the body in FireFox and fix the scrunchification of the layout.
6/29 Fatty
Made fancy ass little red flower lookin thing pop up next to the h3's by making the "h3 span"'s text-indent: 16px;background: transparent; and setting the h3's background to the image of the flower w/ no-repeat, very nice if I must say so myself.
Except for the fact that the indent isn't working in Firefox... /me screams... I'm going to see if it looks right in Safari when I get home. I for some reason feel as tho it loks like that in Firefox due to an error in it's implimentation of CSS. The P tag itself on this page has an indentation and that's why each paragraph is indented, I'm not sure if it's the fact that the span is nested in an h3 that's causing the indentation to not work but that's what I'm leaning toward.
After finding that the indentation was not working properly in safari, I moved the text-indent from the "h3 span" to the "h3" and everything seems gravy. Also upon looking at the page in safari I noticed that the body is not centered as it is in internet explorer, that will be the next thing I correct.
6/30 Music
I need to take my headphones from home to work so I can listen to music on the job. Oh, and I need to bring music to listen to with said headphones.
7/02 Centered it, finally
And to think all I had to do was search google. "margin-left: auto;margin-right: auto;" is how you get a block level item to be centered. Since MSIE is a piece of crap it treats a block level element as an inline element so "text-align: center;" is also required to have the div centered in MSIE.
7/02 Navbar problems
The only thing that is missing from this page that would make it fully functional is a navbar. I want to implement it without using absolute positioning, and I'm not sure if that's possible or not. What I am trying to do right now is float another div inside of the mainbody f