Thread: CSS Tutorial Updated
Results 1 to 15 of 22
08-12-2002, 04:20 PM #1
CSS Tutorial Updated
I have re-styled my CSS tutorials -
Now they comply with css2 standards (oops ) and use a table-less layout.
Will be adding more stuff now, as I will have some more time on my hands soon.
BTW - Dave, thanks for the 'partner' link
08-12-2002, 09:26 PM #2
Ready to start promoting yet?
08-13-2002, 12:26 AM #3
08-13-2002, 10:29 AM #4
Thanks for all your work on our behalf - it helps make the internet a friendlier and more helpful place to visit.
08-13-2002, 10:59 AM #5
Thanks Benzden. I really appreciate that.
08-14-2002, 07:22 AM #6
Yes, I agree! You've done a great job Dean, Dave, and everyone else who helps everyone out around here!
08-14-2002, 09:47 AM #7
Superb job with the guide, you have given me a new love for CSS. Originally, I would only use a few CSS comments in my head to just change a few basics with text. I definitely want to learn more and experiment with a site layed-out with CSS, like you have done on your tutorial page.
After reading it and looking at your source I believe I understand a lot more than I did at first. However, I am having some confusion as far as the positioning of tables (divs) goes. I see you have comments in your CSS coding telling a certain table to go here on the page and move up, left, right, etc.. by x%. How did you know what % to use? Do you just play around with numbers until things end up in the right spot? I guess I donít yet understand how to place things neatly by simply typing in the percentages, as apposed to being able to drop/drag things around.
Could you explain this more in depth to me?
08-14-2002, 04:34 PM #8
Basically, it was a case of taking it a <div> at a time until I was happy with each one, trying out different percentages.
A lot of people have a fear of CSS (its something new, so its only natural) , but as you can see from viewing the source, my html is much, much simpler than any tabled design. Four divs and an image. Thats it.
The style is also relatively simple. I want the side bar 30% wide, 10% from the left, 10% down the page. Simple.
Any more questions, go for it.
08-15-2002, 07:11 AM #9
What about various resolutions? Will the pecerntages automatically change to make things fit right in different resolutions?
Lets say I have a nav div off to the left, then a big one for my content and all.... And I get it looking nice at 1024x768... but a user views my site with 800x600. If the div is too large it'll automatically scroll the page just like a normal table would do? And if I left a 10% buffer around all of the page and the edges it would still keep that even if it scrolled? (hope this makes sense) This of course can easily be fixed by designing your site with that res. in mind, but just curious about the concept.
08-15-2002, 11:01 AM #10
Well, thats the advantage of using percentages. Its 10% of whatever screen res its being displayed in.
I usually design an entire page in 800*600 using percentages, get it how I like it, then up the res on my monitor to make sure it still looks fine. 95% of the time, it does.
To be honest, probably the only disadvantage to using percentages is if the browser is res'ed less than 640, instead of a scroll bar it shrinks to fit , but who uses smaller res's than that anyway?
I have noticed some of the pages on my tutorial have a problem with the 'back' & 'next' links at higher resolutions, am looking into that now.
As an experiment, design a page in percentages in 1024, then minimize your browser, shrink the res, and open up the page again. Might look great
08-16-2002, 07:27 AM #11
One question I have Dean: I noticed you have your CSS comments in the head of your document. Is there any reason/advantage for having them there as apposed to having them as a seperate file that the page refers to?
In my mind, would it not always be beneficial to keep it seperate just for less code on your pages? And an easy way to direct all the pages to the same source? I'm just curious if it's just a preference thing or if there are some advantages by leaving it in the head.
08-16-2002, 11:05 AM #12
Only one reason I coded that page that way - so that all the css was visible if you viewed the source.
In my normal css coding, it all goes in a *.css file. makes it easier to maintain.
With this site, tho, it was no hassle to have the pages containing the css, because the tutorials are all using the same page. COnfused? Its a dynamic site, it always calls the page index.php , but displays different data depending on the page chosen. Notice the links are index.php?page=Syntax instead of Syntax.php . So its no hassle to have it visible. Anything I felt was tricky, I put the css in the tag itself, again, so it is visible to the beginner.
08-16-2002, 01:36 PM #13
Dean, thanks for your continuing help with this.
While I am familiar with the basic concept of having a dynamic site (in the way you did) I am not familiar with it in it's application.
Ok, so you have one main file. Your index.php -- right? Does the site's design and layout stay the same for every page automatically? Or must you refer back to it in the other "pages" data? How do you setup the other pages? How do you get them to show up right? Is there an example of this somewhere I can see?
08-16-2002, 03:49 PM #14
Hiya. Continued advice is not a problem, I come here to help people
I don't know about other peoples dynamic sites, but mine is based on a text file system, simply because they are more portable than an SQL database.
Heres how it works, without going into a lot of code...
index.php loads. The variable 'page' has not been set. in other words, index.php?page= does not say anything. in this instance, load my default text.
On the left, I have code ( class.quietdean.php ) that looks for a certain directory ( /data ) and looks for files with a suffix of .txt .
For each file it finds, it fills in a link like this
<a href="index.php?page=filename">First Line of Text in the textfile</a> </a>
because I made this a loop. it finds every file and lists them as a link. if the link has a variable called page, it will open variable.txt and insert it in the 'content' area of index.php instead of the default text.
In this way, I have created a page that creates its own links from the contants of '/data' directory. How lazy am I...
the only tricky step was the 'next' and 'back' links, for them, I created an offset array of data defining the layout/order of the pages.
If you would like a copy of class.quietdean.php , jus say. i will email it to you happily. tho to be honest, classes are not the easiest way to get into php
Last edited by QuietDean; 08-16-2002 at 03:52 PM.
08-18-2002, 04:38 AM #15
More questions here, too, for QuietDean:
1. First of all, it appears this system depends upon one being with a web host (server) that allows user created .php (or similar server-side) 'program' files. Is that true or is there a way to do this from any host server?
2. What most interests me about this is the ability to place headings and/or tails on a page without having to use frames. For starters, I'd like to be able to place my generic signature and copyright notice at the bottom of each and every page by referencing just one file. At present, I add it to each and every of the 700+ .htm/.html files at my various sites.
The same could go for a heading that would contain the actual UNIQUE URL to each page along with the generic page navigation aides. In this case, the creation process would include the unique level 3 and level 2 names (sub-domain and domain) for common .com (level 1) URLs.
Have you done something like that with .php or some other process?