| Author |
Message |
Scott
tutorialtoday.com
Joined: 24 Mar 2005
Posts: 2600
Location: Mississauga, Ontario
|
 Posted: Thu Feb 14, 2008 9:28 pm Post subject: Learning CSS (for tableless layouts) |
 |
|
Is there any good sites for learning about making layouts with divs and CSS? I already know some CSS and HTML, because I have made countless layouts using tables but I have never tried using divs and I don't know where to start.
_________________
Tutorial Management Script - Version 1.3 Released
TutorialToday - Up and running, submit your tutorials!
Linux Tutorials - Coming Soon |
|
| Back to top |
|
| |
krt
...
Joined: 11 Jan 2005
Posts: 4627
Location: Down Under
|
| Posted: Thu Feb 14, 2008 10:56 pm Post subject: |
|
|
Just practice and you will get there. Look at a few samples and aspects such as structure / presentation separation, handling of rendering engine differences etc. Don't worry too much about perfection as those two aspects I mentioned don't go well together.
CSS showcase sites often list sites that generally follow guidelines in most important areas.
And don't get suckered into using tableless layouts. Due to non-standardisation in rendering engines, tables still have their place. Of course, if it is for a distributed script, such as your tutorial system, it pays off to use a more structured approach that cannot be achieved with tables. |
|
| Back to top |
|
| |
Scott
tutorialtoday.com
Joined: 24 Mar 2005
Posts: 2600
Location: Mississauga, Ontario
|
| Posted: Thu Feb 14, 2008 11:19 pm Post subject: |
|
|
Well people are complaining they find it too messy (currently with tables) and also I want to keep up with trends like doing tableless layouts and using lots of CSS.
_________________
Tutorial Management Script - Version 1.3 Released
TutorialToday - Up and running, submit your tutorials!
Linux Tutorials - Coming Soon |
|
| Back to top |
|
| |
ClickFanatic
Est. 2005
Joined: 18 Jan 2005
Posts: 3877
Location: A particular geographic area
|
| Posted: Fri Feb 15, 2008 9:26 am Post subject: |
|
|
CSS itself is not very difficult. The trick is to know what certain rules do to your layout in certain contexts.
Especially positioning is a tricky subject to master. The only way to really learn it is by doing it often, looking at other layouts, reading tips and tricks on websites (A List Apart has some nice positioning related articles in its archives) and making mistakes.
It is very important to accustom yourself with the wide range of CSS properties. A useful reference can be found at W3Schools. You can try the properties and see what they do. Knowing what property can achieve a certain look is useful when developing layouts yourself. Keep the reference handy, though, in case you're not certain what to do.
There are a great deal of selectors, but there are currently very little that are supported by all major browsers. A good resource to learn everything and more about selectors is the Selectutorial.
The above resources should give you a good understanding of how CSS works.
The next big step to modern web content is learning how to create semantically formatted HTML documents. At first you will probably be tempted to use many divs to make CSS positioning easier for you. This will clutter your document, though not as much as table layouts. Challenge yourself to write HTML that is as straightforward as it possibly can be and then try to style it with CSS.
Don't start off with that, though. Focus on using CSS first and then polish your HTML skills.
_________________
Captain Jell-O Buster from the Future
[img]http://feeds.feedburner.com/sparepencil.1.gif[/img] |
|
| Back to top |
|
| |
Scott
tutorialtoday.com
Joined: 24 Mar 2005
Posts: 2600
Location: Mississauga, Ontario
|
| Posted: Mon Feb 25, 2008 6:07 pm Post subject: |
|
|
Well I re-did my tutorial system with all divs and CSS and it is a lot cleaner and more manageable. The only problem I have is the footer, how can I make it so the footer is at the bottom of the page when there isn't enough content to push it down, but I don't want it to stick to the screen when you scroll.
_________________
Tutorial Management Script - Version 1.3 Released
TutorialToday - Up and running, submit your tutorials!
Linux Tutorials - Coming Soon |
|
| Back to top |
|
| |
Kovacs
Pepe El Contratado
Joined: 12 Jun 2005
Posts: 1402
Location: Leeds, UK / Guardamar Del Segura, España / Cayey, Puerto Rico
|
| Posted: Mon Feb 25, 2008 6:28 pm Post subject: |
|
|
| Scott wrote: | | Well I re-did my tutorial system with all divs and CSS and it is a lot cleaner and more manageable. The only problem I have is the footer, how can I make it so the footer is at the bottom of the page when there isn't enough content to push it down, but I don't want it to stick to the screen when you scroll. |
In short... you don't. Either you can use empty DIVs with heights as content for the time being or just wait until you have real content to push it down. You could try absolute positioning but I wouldn't recommend it.
_________________
I Love Rebecca More Than Anything In The World <3
Yo Amo A Rebecca Más Que Nada En El Mundo <3 |
|
| Back to top |
|
| |
Necromis
Lifeless on my Boat
Joined: 11 Apr 2005
Posts: 742
Location: USA
|
| Posted: Wed Feb 27, 2008 12:01 pm Post subject: |
|
|
| What about using a containing divider for the body and giving percentage heights. Say Header height 20%, body height 80%, and footer height 20%. |
|
| Back to top |
|
| |
Kovacs
Pepe El Contratado
Joined: 12 Jun 2005
Posts: 1402
Location: Leeds, UK / Guardamar Del Segura, España / Cayey, Puerto Rico
|
| Posted: Wed Feb 27, 2008 12:57 pm Post subject: |
|
|
| Necromis wrote: | | What about using a containing divider for the body and giving percentage heights. Say Header height 20%, body height 80%, and footer height 20%. |
Hmmm... you'd have to be careful if you used this method because once your content goes over these heights, the DIVs don't stretch and the content goes over them, so content which should be in your body starts overspilling into your footer. Only browser this doesn't happen in (which is VERY surprising) is IE7, which stretches.
Personally I've never used percentages to define heights of DIVs, only on widths, so I couldn't really offer any further advice on this without playing around with some code for a bit.
Plus, if you are using background images this can be quite tricky since the size of elements on your page depends on the user's screen resolution. I've never found it practical other than for widths on liquid designs... of which I have done one in my whole life 
_________________
I Love Rebecca More Than Anything In The World <3
Yo Amo A Rebecca Más Que Nada En El Mundo <3 |
|
| Back to top |
|
| |
Rashy
Lifeless Person
Joined: 25 Sep 2006
Posts: 651
|
| Posted: Wed Feb 27, 2008 4:12 pm Post subject: |
|
|
| Kovacs wrote: |
Hmmm... you'd have to be careful if you used this method because once your content goes over these heights, the DIVs don't stretch and the content goes over them, so content which should be in your body starts overspilling into your footer. Only browser this doesn't happen in (which is VERY surprising) is IE7, which stretches.
|
| Code: |
div#content{overflow:scroll;} |
Should solve that problem... it would still be rather messy though: you would have scroll bars all over the place, especially if the visitors' browser isn't the full height of the screen.
_________________
Rashy! |
|
| Back to top |
|
| |
Kovacs
Pepe El Contratado
Joined: 12 Jun 2005
Posts: 1402
Location: Leeds, UK / Guardamar Del Segura, España / Cayey, Puerto Rico
|
| Posted: Wed Feb 27, 2008 4:40 pm Post subject: |
|
|
| Rashy wrote: | | Kovacs wrote: |
Hmmm... you'd have to be careful if you used this method because once your content goes over these heights, the DIVs don't stretch and the content goes over them, so content which should be in your body starts overspilling into your footer. Only browser this doesn't happen in (which is VERY surprising) is IE7, which stretches.
|
| Code: |
div#content{overflow:scroll;} |
Should solve that problem... it would still be rather messy though: you would have scroll bars all over the place, especially if the visitors' browser isn't the full height of the screen. |
Yeah, scroll bars on DIVs are rather terrible and spoil any decent design.
Either way, I still think the best option is to fill the content DIV with another empty DIV that has a height or other blank content until their is some content in their to do it for you.
_________________
I Love Rebecca More Than Anything In The World <3
Yo Amo A Rebecca Más Que Nada En El Mundo <3 |
|
| Back to top |
|
| |
krt
...
Joined: 11 Jan 2005
Posts: 4627
Location: Down Under
|
| Posted: Wed Feb 27, 2008 7:04 pm Post subject: |
|
|
This is probably about as cross browser compatible as you are going to get for footers positioned at bottom of browser viewport or content (whichever is lower):
http://www.themaninblue.com/ex.....rStickAlt/ |
|
| Back to top |
|
| |
Kovacs
Pepe El Contratado
Joined: 12 Jun 2005
Posts: 1402
Location: Leeds, UK / Guardamar Del Segura, España / Cayey, Puerto Rico
|
| Posted: Wed Feb 27, 2008 7:07 pm Post subject: |
|
|
Just a small question but... is this page going to permanently have very little content? Or is it going to be just for a short while? Or some other kind of situation?
_________________
I Love Rebecca More Than Anything In The World <3
Yo Amo A Rebecca Más Que Nada En El Mundo <3 |
|
| Back to top |
|
| |
|
|
|
Forum FAQs 
Knowledge Base 
Memberlist 
Usergroups 
Hosting
Register
Donate 
Profile 
Log in 
