Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Saving time with CSS?

Saving time with CSS?
Thread Tools
Mac Enthusiast
Join Date: Mar 2001
Location: NC, USA
Status: Offline
Reply With Quote
Mar 14, 2002, 11:38 PM
 
I run a small website for a non-profit monthly newspaper. For the past 10 months, I have kept the same design (using tables for layout.) It's a basic layout with the paper's banner across the top, issue number beneath, navigation on the left, a vertical hairline, stories on the right, and navigation on the bottom. It works well enough, although the code is a little messy.

So, for ten months the routine has been the same. After finishing the paper and sending it to the printers, I would make the site from there. Copy all the articles from each section into a separate AppleWorks document, export to a html file (since we do a Spanish section, this saves a lot of time by coding special characters for me), open with text edit, clean up html, copy, and paste into a prepared layout file. Multiply by nine or ten. Two or so hours later, publish.

Well, the site was due for an overhaul. Nothing major, just clean up some things and tweak the layout a little. You know, pretty it up some. I pulled down my enormous copy of "HTML Publishing on the Internet: Second Edition" (a book which is slightly less interesting than the name suggests) and opened up to the "Tables 'n such" chapter. At the beginning of the chapter, there was a nice little paragraph telling me I should really look into CSS for layout work. Being an open minded sort of person I said, "OK."

After a few minutes reading, I was ecstatic. I liked that idea of having one document with style sheets for all my pages. That would certainly make future tweaks quicker. I also liked how much cleaner the code looked to me. But I was absolutely thrilled when I read about
<BLOCKQUOTE><font size="1"face="Geneva, Verdana, Arial">code:</font><HR><pre><font size=1 face=courier>include-source: url(<font color = red>"content.html"</font>);</font>[/code].
I could just upload my text edit files and save myself 45 minutes to boot.

At that point, I started coding a little mock up index page to see if it would work for our site. It was really going great. Then I hit a snag. I couldn't force the navigation section down to the bottom as it's own separate element (ie. full across the bottom no matter how long the page is since they vary and you can't set it as an absolute.) I could stick it at the end of the content element, so it is workable.

The next problem I hit was with "include-source". It refused to include any source. Then I realised that my book is four years old and they may have never implemented that feature. Then I thought, perhaps external style sheets don't work either (but was too tired to test it.)

The questions:
Is it possible to grab content from another document using CSS (using include-source or other statement?) Also, do external style sheets work? And can I force an element to go to the bottom of the page (no matter how long or short the content in another element is?)

Thanks for any advice you may have. For reference, you can see our current site at www.trianglefreepress.com and an example of what I'm doing with CSS at tfptrial.html.

Cheers!
Satellite deployment by:
Ace Moving Co.
     
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Mar 15, 2002, 08:58 AM
 
I think I may recently have discovered a way to force absolutes to the bottom of a page. It seems to work in IE and Netscape; I haven't tried Opera out yet. But I'm pretty sure that this will break IE4/Win, so you'll have to use the @import trick.

The idea is actually fairly simple. All you do is set height:100% on the HTML tag itself, via:<BLOCKQUOTE><font size="1"face="Geneva, Verdana, Arial">code:</font><HR><pre><font size=1 face=courier>
html {
height:<font color = blue>100</font>%;
}
</font>[/code]
After that, you should be able to make use of absolute positioning, if you wish. However, remember that setting attributes on the HTML tag breaks IE4 (and I think NS4 just ignores it).

I still have to test this one out a bit more. But from what little I've done, it seems to work.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Mar 15, 2002, 11:20 AM
 
Well, depending on how much JavaScript and CSS you know, this could be really easy.

I set your page up here:
http://homepage.mac.com/registered_u...gle/index.html

Here's how it works, in a nutshell:

The page loads. In the head tag, the page pulls all the CSS information from a file called "style.css" (I tweaked it a bit)

I left your side links in the HTML document.

Then, the browser gets to the content section. Here, the page calls for another external file called "content1.js" It's a simple Javascript file. It uses the writeln command to write your content dynamically to the page. (if you set up the external JavaScript files with variables for the healines, bylines, and paragraphs, you'll do much less html coding -- but one step at a time.) Anyway, the Javascript writes the copy to the document, and it uses the all the settings set up in the CSS descriptions. Cool, huh?

Finally, the page gets to the footer, and that too is now located externally in anoter JavaScript file called "footer.js" This is especially handy for a big site. You can start using a link to your footer on all your pages so if you have to update them, you make the update in one place only.

If you're not familiar with JavaScript and CSS, this might seem daunting. But take a few minutes to look at it, download the files (they are all text files) and see if this what you need.
     
Mac Elite
Join Date: Sep 2000
Location: Baltimore
Status: Offline
Reply With Quote
Mar 15, 2002, 01:36 PM
 
Wow, great job unregeisterd lot of effort for someone you don't know. That's what I like about these Mac boards.
     
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Mar 15, 2002, 03:00 PM
 
I'm just glad I can help out. I am learning about all this stuff myself at the moment and these help sessions are a great exercise for me, and I'm more than happy to share what I know.

By the way, this book is where it all comes from. This book rocks.

P.S. Don't look at that site in Netscape4. Netscape4 is horribly disobedient when it comes to CSS. But, NS6 is OK, so with any luck, people will stop using NS4 in favor of W3C standards-compliant browsers.
     
MacmanX  (op)
Mac Enthusiast
Join Date: Mar 2001
Location: NC, USA
Status: Offline
Reply With Quote
Mar 15, 2002, 06:54 PM
 
You guys rock! I'll start working on the code tomorrow and let everyone know the result. Also, it just so happens that I bought that exact book this morning. What a lucky coincidence. Thanks again!

Cheers!
Satellite deployment by:
Ace Moving Co.
     
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Mar 18, 2002, 08:52 PM
 
As for the include-source thing. I'd suggest you use Server-Side Includes for that (include-source did not make it into CSS).

SSI support is built into most Web servers, and it has the advantage of working even in browsers which can't do JavaScript. It's pretty simple stuff too. For including a document, you just do the following:

&lt;!--#include virtual="name-of-file" --&gt;

...noting that name-of-fileis the path to the file on your server, not a URL for the file. This will work with almost any Web server, though you may have to rename your .html files to .shtml to make sure it works out.

You can find more of a tutorial on Server-Side Includes here. Keep in mind that SSI isn't a full-fledged scripting language like PHP; it was meant for simple tasks, and serves that purpose very well, but as a result it's simple to pick up. You'll have enough for what you want to do in just minutes.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
   
Thread Tools
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Top
Privacy Policy
All times are GMT -5. The time now is 12:48 PM.
All contents of these forums © 1995-2011 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.7 © 2000-2011, Jelsoft Enterprises Ltd., Content Relevant URLs by vBSEO 3.3.2