Printing out style sheets question (very basic)

I’m making pages of lyrics that will feed off a main page not on my site. On their site, the names of songs will appear, and when clicked on, the lyrics on my site will pop up in another window that can just be closed when they’re done looking at the lyrics. The remote site has a color scheme of white text on black background.

On my site, to make the pages look uniform wrt font style and keeping with their background, I made a .css file and put a link into the top of each lyric page. My problem is that when the remote owner went to print out one of the song lyrics, it printed in white on black! On my computer, it doesn’t do that, it prints grey text on a white background.

Short of losing the original color scheme and making the pages black text on white, how can I make sure the random person’s printer doesn’t go and use up all their black ink by printing a black background?

I know there’s a way to do it in style sheets by adding something to the .css file, and I went looking for pages that explained how, but I couldn’t understand the instructions, which seemed to take for granted that the person reading had in-depth knowledge of style sheets. That’s not me, I’m a total newbie. I need to know exactly what to add where.

Also, how can I even test it? My printer doesn’t print a black background anyway. I’d hate to ask someone else to test it and it not work and it uses a chunk of their blank ink.
Here’s a link to one of the pages: http://happyrhodes.org/findmelyrics/oneandmany.html (yes, I am into very very simple html. I hate source pages that are messy and hard to read)

The header says (I purposely typed hmtl so it wouldn’t have a problem showing up):

<hmtl>
<head>
<title>Happy Rhodes lyrics - One And Many</title>
<link rel=“stylesheet” href=“happylyrics.css”>
</head>

The .css file looks like this:

BODY {background: black; color: white; font: 12pt Comic Sans MS;}
H1 {font: 14pt Comic Sans MS; font-variant:small-caps}
.copywrite { font-family: Comic Sans MS; font-size: 10pt }
.chorus { margin-left: 0.5in }
.chorus2 { margin-left: 0.8in }

(The Comic Sans was not my idea, btw)

Simple enough, so what do I add that will speak to all the different printers out there?

Unrelated…I couldn’t get this page to work with style sheets, and ended up using a kluged table. If I knew more about style sheets I’m sure I could do it, since that’s the whole point of style sheets. I tried using the original Word document transported into Front Page, but the result was a nightmare. If I changed anything it broke, and I couldn’t figure out how it worked in the first place. Beyond that, the source code looked like a jungle. I like to be able to make and view pages in Notepad and see at a glance what’s going on. Needless to say, I will never get a job doing web pages. Complicated and messy are like badges of honor.

Thanks in advance for any tips.

Prints grey on white for me.

Try a ‘print’ button that takes them to a reformatted page with white background and black text, then automatically prints the document and closes the window.

Just a thought.

Thank you for checking it out. I appreciate your time. I’m not an absolute html beginner, but I wouldn’t have the faintest idea how to go about doing that. I can make a black on white html page, I can make a button, and I know how to link, but how do I control someone else’s printer and close the page? That seems at least as complicated as doing it the css way (whatever way that may be).

I forgot to add that Happy (they’re her lyrics) has a Mac and is on AOL. I’m not sure which caused her printer to print white on black.

Just add this to the bottom of your CSS file:


@media print
{
body {background:white; color:black}
}

That’ll invert the colors, but only when the page is printed, not when it’s viewed.

And about the second page (treehouse), what exactly were you trying to accomplish? Seems like the style sheets are doing their job… the page is colored right, just laid out in a table as well. Was there something else you wanted the CSS to do?

In IE for Windows, at least, there’s a setting to print background colors. By default, it’s off. If you went to print this very page right now, the background colors of each post (light gray) would not print. However if you went to TOOLS - INTERNET OPTIONS… - ADVANCED and scrolled down to the “Printing” option and checked “Print Background Colors and Images” then you’d get the gray. I had turned this on once to get a good printout and had forgotten about it. Wasted a darn good bit of ink next time I printed.

HOWEVER, your friend is on a Mac using AOL which is the farthest you can get from IE on Windows :slight_smile: So I’m assuming there’s not the same setting for her and you’ll need to make an alternate page.

Just do this - make a link at the bottom of the page that says “Printable Version”. Link that to “oneandmany2.html” that has a black-on-white scheme using a different set of styles (maybe even with no tabbed layout, just to be sure it prints correctly). Whoever wants to can print from there.

You’ll have to do that for all the lyrics pages, but that’s about the easiest route. I can’t think of a way to manipulate other peoples’ printers…

As for that page you’re having a problem with, with styles…what exactly is the problem? Layout? Font? Where do you want things to be?

Ah! Thank you for this. I believe it may have worked. Before adding it, when I printed out a page, it printed light gray but readable text on white. After adding it, it prints out black text on white.

Whether it will work for her is the big test. I’m almost afraid to ask her, because if for some reason it doesn’t work, I’ll be making her use up even more of her blank ink.

I think I don’t know enough about style sheets to answer that question. When I transported it from Word to Front Page it was in a style sheet, lots of “spans” and “classes” and whatnot. Every line had crap…wait…I’m going to, again, take the original doc file, save it as a web page, then open it in Front Page…

Using your trick of the code tag, this is the mess that comes out:


<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="TREE_HOUSE_files/filelist.xml">
<title>TREEHOUSE</title>
<!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Revision>2</o:Revision>
  <o:TotalTime>0</o:TotalTime>
  <o:Created>2005-04-13T23:46:00Z</o:Created>
  <o:LastSaved>2005-04-13T23:46:00Z</o:LastSaved>
  <o:Pages>1</o:Pages>
  <o:Words>123</o:Words>
  <o:Characters>702</o:Characters>
  <o:Lines>5</o:Lines>
  <o:Paragraphs>1</o:Paragraphs>
  <o:CharactersWithSpaces>824</o:CharactersWithSpaces>
  <o:Version>11.5606</o:Version>
 </o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:SpellingState>Clean</w:SpellingState>
  <w:PunctuationKerning/>
  <w:ValidateAgainstSchemas/>
  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
  <w:Compatibility>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
   <w:DontGrowAutofit/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
 </w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" LatentStyleCount="156">
 </w:LatentStyles>
</xml><![endif]-->
<style>
<!--
 /* Font Definitions */
 @font-face
	{font-family:"Comic Sans MS";
	panose-1:3 15 7 2 3 3 2 2 2 4;
	mso-font-charset:0;
	mso-generic-font-family:script;
	mso-font-pitch:variable;
	mso-font-signature:647 0 0 0 159 0;}
@font-face
	{font-family:Times;
	panose-1:2 2 6 3 5 4 5 2 3 4;
	mso-font-charset:0;
	mso-generic-font-family:roman;
	mso-font-pitch:variable;
	mso-font-signature:536902279 -2147483648 8 0 511 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:"";
	margin:0in;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	mso-bidi-font-size:10.0pt;
	font-family:Times;
	mso-fareast-font-family:Times;
	mso-bidi-font-family:"Times New Roman";}
pre
	{margin:0in;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Courier New";
	mso-fareast-font-family:"Times New Roman";}
span.SpellE
	{mso-style-name:"";
	mso-spl-e:yes;}
@page Section1
	{size:8.5in 11.0in;
	margin:1.0in 1.25in 1.0in 1.25in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:10.0pt;
	font-family:"Times New Roman";
	mso-ansi-language:#0400;
	mso-fareast-language:#0400;
	mso-bidi-language:#0400;}
</style>
<![endif]-->
</head>

<body lang=EN-US style='tab-interval:.5in'>

<div class=Section1>

<p class=MsoNormal><span style='font-size:14.0pt;mso-bidi-font-size:10.0pt'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-size:14.0pt;mso-bidi-font-size:10.0pt;
font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>TREEHOUSE<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Memory is longer
than circuits <span style='mso-tab-count:2'> </span>is longer than
October<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Women are better
than numbers, <span style='mso-tab-count:1'> </span>are better than a <span
class=SpellE>treehouse</span><o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Events are bigger
than people<span style='mso-tab-count:2'> </span>are bigger than
life<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Timing is
everything more <span style='mso-tab-count:2'> </span>than
anything else<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>THIS IS MY
TREEHOUSE<span style='mso-tab-count:2'> </span>I BUILT IT THIS
SUMMER<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>AND ONLY THOSE WHO
LIKE ME<span style='mso-tab-count:1'> </span>ARE GONNA BE INVITED IN<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Words are the
weapons of parents <span style='mso-tab-count:1'> </span>the torture of
youth<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Even as grownups
mingle<span style='mso-tab-count:3'> </span>how deep is
the truth<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>Nothing could
outrun the future<span style='mso-tab-count:2'> </span>or deaden the
past<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>If you can’t beat
them you’ll have to <span style='mso-tab-count:1'> </span>surpass them<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>THIS IS MY
TREEHOUSE<span style='mso-tab-count:1'> </span>I BUILT IT THIS SUMMER<o:p></o:p></span></p>

<p class=MsoNormal style='margin-left:2.5in;text-indent:-2.5in'><span
style='font-family:"Comic Sans MS"'>I WISH I COULD INVITE<span
style='mso-tab-count:1'> </span>BUT YOU’VE NEVER BEEN A MEMBER HERE<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><span
style='mso-tab-count:2'> </span>Get away from here<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><span
style='mso-tab-count:2'> </span>It’s my <span class=SpellE>treehouse</span>
<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>THIS IS MY
TREEHOUSE<span style='mso-tab-count:2'> </span>I BUILT IT THIS
SUMMBER<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'>AND ONLY THOSE WHO
LIKE ME <span style='mso-tab-count:1'> </span>ARE GONNA INVITED<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<pre style='line-height:14.4pt'><span style='font-size:10.0pt;font-family:"Comic Sans MS";
color:black'>©2005 by Happy Rhodes / BMI<o:p></o:p></span></pre><pre
style='line-height:14.4pt'><span style='font-size:10.0pt;font-family:"Comic Sans MS";
color:black'>All Rights Reserved<o:p></o:p></span></pre>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><span style='font-family:"Comic Sans MS"'><o:p> </o:p></span></p>

<p class=MsoNormal><o:p> </o:p></p>

</div>

</body>

</html>


It looked fine on a web page, but there are typos and missing words I needed to fix. When I went to fix those, it all broke down. I can’t remember what I did. In any case, it just seemed way too messy for me. Why would each line need a span with the font style and type in it? Isn’t the whole point to have all that relevant stuff at the top of the page? It bothered me way too much, so I did this, putting the fonts in a separate file (since I needed it for more than one page), and this is what’s online now:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Happy Rhodes lyrics - </title>
  <link rel="stylesheet" href="happylyrics.css">
</head>
<h1>Treehouse</h1>

<table border="0" CELLSPACING="0" CELLPADDING=".01">

<tr><td>Memory is longer than circuits<br>Women are better than numbers</td>
       <td>      </td>
          <td>is longer than October<br>are better than a treehouse</td></tr>
<tr><td> </td></tr>

<tr><td>Events are bigger than people<br>Timing is everything more</td>
      <td> </td>
       <td>are bigger than life<br>than anything else</td></tr>
<tr><td> </td></tr>

<tr><td>THIS IS MY TREEHOUSE<br>AND ONLY THOSE WHO LIKE ME</td>
       <td> </td>
          <td>I BUILT IT THIS SUMMER<br>ARE GONNA BE INVITED IN</td></tr>
<tr><td> </td></tr>

<tr><td>Words are the weapons of parents<br>Even as grownups mingle<br>Nothing could outrun the future<br>If you can’t beat them you’ll have to</td>
       <td> </td>
          <td>the torture of youth<br>how deep is the truth<br>or deaden the past<br>surpass them</td></tr>

<tr><td> </td></tr>

<tr><td>THIS IS MY TREEHOUSE<br>I WISH I COULD INVITEYOU</td>
       <td> </td>
          <td>I BUILT IT THIS SUMMER<br>BUT YOU’VE NEVER BEEN A MEMBER HERE</td></tr>

<tr><td> </td></tr>

<tr><td><p class="chorus2">Get away from here<br>It’s my treehouse</p></td></tr>

<tr><td> </td></tr>

<tr><td>THIS IS MY TREEHOUSE<br>AND ONLY THOSE WHO LIKE ME</td>
       <td> </td>
          <td>I BUILT IT THIS SUMMER<br>ARE GONNA BE INVITED</td></tr>

<tr><td> </td></tr>
</table>

<p class="copywrite"><font face="Times New Roman">©</font>2005 Happy Rhodes / BMI<br>
All Rights Reserved</p>

</body>
</html>

It’s not perfect. I don’t know enough about html and tables to know if I’m supposed to be using all those non-breaking spaces, but I sure like the look
of it (the source code) better than the Front Page junk.

This is the source code for one of the other songs, not in a table:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Happy Rhodes lyrics - Find Me</title>
  <link rel="stylesheet" href="happylyrics.css">
</head>
<body>

<h1>Find Me</h1>

<p>Find me, I’m right here floating<br>
I’ve been here for days, trying to keep the deep <br>
Beneath my feet</p>

<p>Now I can feel you flying overhead<br>
But I’m swallowed in the waves <br>
and I wonder how many days more<br>
You’ll search for me<br>
<SPAN STYLE="margin-left: 0.5in">Oh god please find me alive</SPAN></p>

<p>Lose me in twilight, hopeless<br>
I can’t feel my legs<br>
I never noticed before how water’s like air<br>
<SPAN STYLE="margin-left: 0.5in">Oh god please find me alive</SPAN></p>

<p>Find me, I’m right here descending<br>
I feel the weight of it<br>
Light is fading out, as angels kiss my feet</p>

<p>Now all that I can think of, shivering away<br>
Is my fourth birthday<br>
When my guardians threw me away oh love,<br>
You didn’t find me<br>
<SPAN STYLE="margin-left: 0.5in">Why didn’t you find me alive?</SPAN></p>

<p class="copywrite"><font face="Times New Roman">©</font>2005 Happy Rhodes / BMI<br>
All Rights Reserved</p>
</body>
</html>


Simple, easy-to-read, I love it. Even if a page I made were much more complicated, with menus and images and banners or whatever, I wouldn’t be able to stop myself from messing with the source code, to make it easily readable and understandable. I need to know what’s going on so I can understand it. Again, this is why I’ll never get a job doing web pages.

I just went to where you specified, and yep, mine was turned off too. Her’s must be on by default. I’m thinking, hoping, that Reply’s fix will avoid me having to make separate pages. I won’t know until she tries it. If it works for her without her having to adjust any settings on her computer or printer, it should work for just about anybody. I just have to get up the nerve to ask her to try again.
(Btw, I made those web pages by hand in Notepad. They wouldn’t validate without that DOCTYPE stuff in the header. I found another page with that line, and cut and pasted onto all my pages. Is that gonna be a problem? I don’t even know what it’s for or why it’s necessary.)

I’ll look into the source code as soon as I can, but in the meantime, may I kindly suggest that you switch away from Word and to a real web editor? On a scale from 1 to 10, with 10 being the best, Word gets a -100 trillion for its web editing capabilities. Stay far, faaaaaar away. You’ve already seen the horrors it can cause.

I’d vote for Dreamweaver MX 2004, but if you’re already used to FrontPage, that should be okay too. If you must use something from a Word document, it’d be best to copy and paste everything over (preferrably as plain text) and then re-format it using Frontpage. Never let Word save an HTML file :slight_smile:

Ok, I looked over all the stuff you posted but I’m still not sure what the problem is? Yes, using Word and Frontpage can get messy, but you seemed to have fixed the code already. What more did you want from treehouse.html? Did you want to get rid of the table and make it look like findme.html?

And about the DOCTYPE declaration, that tells the browser what kind of document it’s seeing (such as which particular version of HTML/XHTML). It doesn’t really make a difference unless you want to comply to Web standards. IE and Firefox are both pretty forgiving of little mistakes like that, so the page will work fine even if you leave it out. It just won’t validate (because the standard requires it).

I didn’t explain fully, sorry. I never use Word or Front Page. She sent me an attachment with the lyrics as a DOC file, so I had to open it up in Word. They were all in one big file, so I cut and pasted to make individual lyric pages. It was suggested to me that as long as I had Front Page on my system (though I’d never used it), that I save the doc files as a web page, then open them up in Front Page to make any changes. You’re absolutely right. That’s not a good idea.

I saved them all as html files and put them online. But…I couldn’t get over how messy the source code was, plus I wanted to use a .css file. I said bye-bye to Front Page and I started from scratch, using Notepad, and just typing in the html (which I know the basics of, enough to not have to look up html/head/title/title/head/body/h1/p/body/html, the basis of just about every web page). I looked up on the web how to make a .css file and how to use class and span. All I didn’t know was how to do the printer thing.

Treehouse was an odd case though, because that formatting is how she sent it to me, and I didn’t want to change it. If she typed it that way, I figured it better be on the web page that way. It’s from the point of view of a child, and I assume the song (which I haven’t heard) will have several call and response overdubbed voices (it’s her style). Also, I assume it will look like that in the CD booklet when the album comes out. So it had to be the same.

I went ahead and used the Front Page style sheet, but got sick of looking at it. If something works I want to know how it works. If it doesn’t work (and it broke formatting when I tried to make changes) I want to see what’s wrong that made it break. I couldn’t do that with the Front Page style sheet, so I said bye-bye to it again and started from scratch again with Notepad, using tables, but also using the .css file. Don’t worry about me, I won’t be opening up Front Page again anytime soon. I might as well uninstall the stupid thing.

I have made other web pages, in fact, I html-ized an entire web site back in '96 (http://gaffa.org, no fair laughing at the simple html. I liked it then and I like it now) and back then I used WebEdit. I loved it, I LOVED IT! I’d use it now except it’s too stinking expensive for the current version, and there are shareware programs that are more powerful (not that I need powerful, which is why I don’t use any of them, including Dreamweaver, which is way too much program for my simple needs). I used HoTMetaL PRO for a while too, but haven’t for years.

Now, I pretty much do everything in Notepad, and if I don’t know the numbers I look up background colors (#FF0000 - red! Oooh!) in Paint Shop Pro.

Thanks for your help. And, because I can’t resist an opportunity, if you like amazing female vocals and singer/songwriter/musicians, try a couple of songs on my Samples page. She’s an indie artist so you’ve never heard of her, but she’s extremely good. Heh, you got something her worldwide fans haven’t even gotten, a look at the Treehouse lyrics. No one’s heard that song yet and you and the people reading this are the only ones who’ve seen the lyrics. I know you don’t feel special because of it, but you are. :wink:

Oh oh oh!

Firstly, I applaud your efforts at ditching FrontPage. It is very unkind to web standards and is bent on making markup language nigh impossible to comprehend. The eager webmaster-to-be, thus thoroughly overwhelmed and intimidated, will think twice about learning the stuff on their own and must rely on their software. Notepad’s all you really need. There’s nothing like seeing your first webpage spring forth from code you wrote yourself.

Secondly, go CSS! There are lots of resources out there, you’ve probably found. A good one I’ve found myself going back repeatedly to is www.w3schools.com. And for inspiration and awe, check out the gorgeous CSS goodness from www.csszengarden.com.

Thirdly, to structure a nice and tableless two-column layout, with sections of text side by side, you can position the sections absolutely, to the pixel. Ah, the powers of CSS.



.right-section
{
     position: absolute;
     top: 20px;
     left: 20px;
     width: 200px;
}

.left-section
{
     position: absolute;
     top: 20px;
     left: 240px;
     width: 200px;
}


This creates two “classes,” or groups of definitions you can apply to tags, like this:



<p class="left-section">
Some lyrics<br />
Some more lyrics<br />
</p>


In the above example, the lyrics will show up 240 pixels from the left edge of your browser in a virtual box 200 pixels wide. This will leave you room for the lyrics in “right-section.” Adjust the values as needed.

And best of all, the syntax makes semantic sense! You know exactly what you’ve put into the code and therefore, know exactly what’s coming out.

Ok, it kinda works, but doesn’t. Help! I did a cut and paste, and copied it a few times to simulate more lyrics that would be added, but it all bunches up together. I tried it within a tag and without it. I tried it in the .css file, and I tried all the left hand lyrics first, then the right hand.

Take a look at my test…yikes! What am I doing wrong?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Happy Rhodes lyrics - </title>
  <link rel="stylesheet" href="happylyrics.css">
<style>
.right-section
{
     position: absolute;
     top: 20px;
     left: 20px;
     width: 200px;
}
.left-section
{
     position: absolute;
     top: 20px;
     left: 240px;
     width: 200px;
}</style>

</head>
<body>

<p class="left-section">
Memory is longer than circuits<br />
Women are better than numbers<br />
</p>

<p class="right-section">
is longer than October<br />
  <td>is longer than October<br>are better than a treehouse<br />
</p>
<p class="left-section">
Some lyrics<br />
Some more lyrics<br />
</p>

<p class="right-section">
Some lyrics<br />
Some more lyrics<br />
</p>
<p class="left-section">
Some lyrics<br />
Some more lyrics<br />
</p>

<p class="right-section">
Some lyrics<br />
Some more lyrics<br />
</p>
<p class="left-section">
Some lyrics<br />
Some more lyrics<br />
</p>

<p class="right-section">
Some lyrics<br />
Some more lyrics<br />
</p>

<p class="copywrite"><font face="Times New Roman">©</font>2005 Happy Rhodes / BMI<br>
All Rights Reserved</p>

</body>
</html>

Those are gorgeous, and I think I’ll be spending a lot of time at that w3schools site.

I have a couple of questions though. First, from your code, what the heck is <br />? I haven’t yet found it when I search.

Also, why code so often look like this?


{
blah blah blah
blah blah blah
blah bla
}

Why not just do this?

{blah blah
blah blah
blah blah}


Whoops, I’m sorry. I should’ve elaborated.
<br /> is just the fussy standard-compliant way of writing <br>. The slash inside means that it’s a self-closing tag. Since <br>s don’t have a corresponding closing tag, like <p></p>, it incorporates it in the opening tag. You should do this for other self-contained tags like <img> too. But this is just to discipline the syntax of the code. Having open tags run around unchecked can spill over to leaving other tags, (that actually require closing tags), unclosed and leads to messy coding. Of course, you can ignore this and no browser will care. But it ensures your code will validate.

And I just placed the braces that way because I like how they look, all lined up like that. Just personal preference.
For your code, you’re applying the classes in multiple, separate instances. I should’ve mentioned the classes I posted weren’t meant to be applied more than once. Because each class only has one definition, all the separate instances will follow this and end up occupying the same space. This explains the bunching you saw. Every time you use the left-section class, for example, every paragraph will be placed 20px from the top, 20px from the left.

To remedy, stick all the lyrics you want to belong to the left-section within a single section. That’s when the tag <div> comes in handy. It’s a nice general tag you can wrap around stuff you want to share a common definition. Let’s code.



<div class="left-section">

<p>Some lyrics in the first stanza<br />
Some more<br />
More<br />
And more<br /></p>

<p>Some lyrics in the second stanza<br />
Some more<br />
More<br />
And more<br /></p>

</div>


Here, the class treats everything inside the <div> as a single entity and would only apply the definition once, which is what we intend. Though having <br />s after every line, and two <br />s after a stanza for that blank line will work, I recommending using <p>s to group the lyrics into meaningful units. It’s easier to manage and organize, I’ve found. Repeat with “right-section,” filling in the lyrics you want to be on the right. Now, instead of a a lot of paragraphs running together because they all follow the same definition, you have two distinct, separated defined sections.

It’s nicely intuitive once you work with CSS some more. I learned the most through experimenting and fiddling around with the various values and tags, figuring out what would happen if I did this or put that there. It’s a whole lot of fun, actually. And some of the effects are downright awesome and impossible to do with HTML and tables.

Ah, ok.

Thank you for your explanation. I’m slowly getting it. It’s not perfect yet. I want the lines next to the last lines to be aligned together and I’m playing around with that. More important, I don’t know how to get the name of the song in there. It just appears underneath the first 2 lines.

Here’s my code:


happylyrics.css

.left-section
{
     position: absolute;
     top: 20px;
     left: 20px;
     width: 350px;
     height: 300px;
}
.right-section
{
     position: absolute;
     top: 20px;
     left: 390px;
     width: 350px;
}

treehouse.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Happy Rhodes lyrics - Testing</title>
<link rel="stylesheet" type="text/css" href="happylyrics.css" />

</head>

<body>

<div class="left-section">

<p>Memory is longer than circuits<br />
Women are better than numbers<br />
</p>

<p>Events are bigger than people<br />
Timing is everything more<br />
</p>

<p>THIS IS MY TREEHOUSE<br />
AND ONLY THOSE WHO LIKE ME<br />
</p>

<p>Words are the weapons of parents<br />
Even as grownups mingle<br />
Nothing could outrun the future<br />
If you can't beat them you'll have to<br /></p>

<p>THIS IS MY TREEHOUSE<br />
I WISH I COULD INVITE YOU<br />
</p>

<p align="center">Get away from here<br />
It's my treehouse<br />
</p>

<p>THIS IS MY TREEHOUSE<br />
AND ONLY THOSE WHO LIKE ME<br />
</p>

<p class="copywrite"><font face="Times New Roman">©</font>2005 Happy Rhodes / BMI<br>
All Rights Reserved</p>

</div>

<div class="right-section">
<p>is longer than October<br />
are better than a treehouse<br />
</p>

<p>are bigger than life<br />
than anything else<br />
</p>

<p>I BUILT IT THIS SUMMER<br />
ARE GONNA BE INVITED IN<br />
</p>

<p>the torture of youth<br />
how deep is the truth<br />
or deaden the past<br />
surpass them<br />
</p>

<p>I BUILT IT THIS SUMMER<br />
BUT YOU'VE NEVER BEEN A MEMBER HERE<br />
</p>

<p><font color="black">...<br />
...</font><br />
</p>

<p>I BUILT IT THIS SUMMER<br />
ARE GONNA BE INVITED<br />
</p>

</div>
</body>
</html>

That whole next to last line is problematic. I don’t know about those black … I put in to get a blank space there. With style sheets I’m sure there’s a simple fix for that, and for the title and for putting the copywrite notice at the bottom instead of in the <div>, which just looks odd.

I have been looking at that http://www.w3schools.com/. I think I’ll be spending some time there over the weekend. I agree with you, the one way to learn is to look at how other people do things and try it myself.

If you absolutely must go with CSS, you can make two additional layers (one for the title and one for the copyright notice) and absolutely positioning them above and below the lyrics. But does everything HAVE to be made using CSS? Sometimes, using tables would actually be easier…

If you want to make the table code more readable, you could consider shrinking the table down to one row and two columns. You can then use <br/> to separate the lines and you wouldn’t need one row for every line in the lyrics.