I am webmaster for Parnassus Records (<!-- w --><a class="postlink" href="http://www.parnassusrecords.com">www.parnassusrecords.com</a><!-- w -->)
Our main business is selling Classical LPs via mail order. We have been publishing catalogs on paper for 35 years and we've been posting them on the web fo a while too
.
The problem is that because the web presentation is merely a replication of the paper catalog, the pages are *huge*.
It seems to me that I *should* be able to use CSS to decrease the weight of my pages, but I am running into trouble.
Here is the HTML code as it is now:
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Allegro</b></FONT><br>
P308 <b>LP0011</b> 1598 Beethoven: Sonatas #30 & 31. PETRI. A-, FOT; 1/4" X $20
<br>
P308 <b>LP0012</b> AL 54 Mozart: Sonatas, K. 280, 282, & 284. HAMBRO. A, LSM $10
<br>
P308 <b>LP0013</b> LEG 9020 Salvatore BACCALONI aria & duet recital. A. Vinyl pressing $6
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Amadeo</b></FONT><br>
P308 <b>LP0014</b> AVRS 204 St S Beethoven: Sonatas #8, 23, & 26. GULDA. A $12
<br>
P308 <b>LP0015</b> AVRS 6204 Boyce: Symphony #3; Purcell: The Married Beau--Suite; Bartok: Divertimento for Strings. DE STOUTZ, Zurich CO. A $6
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Amon Ra</b></FONT><br>
P308 <b>LP0016</b> SAR 15 S Beethoven: An die ferne Geliebte; Lieder. PARTRIDGE (t), BURNETT (Rosenberger fp. c. 1800). A, LSM. English texts $10
and so on and so on for about 1600 more items. ( This comes from <!-- m --><a class="postlink" href="http://www.parnassusrecords.com/p308.htm">http://www.parnassusrecords.com/p308.htm</a><!-- m --> )
Each record company has its own name. I want to maintain those names in a different color and font than the regular text.
If I use the <p> tag in front of every record company and close it at the end of that line, I get an ugly effect where the company names are floating up above the citations.
If I use a <h3> tag in front of the company I get the same thing.
Question: Is there any tag which CSS will recognise that I can use to denote these companies? Is there a tag which can be applied only to certain portions of the regular text of the page?You might try <span>Hello zipszig,
After viewing the source of the URL you provided CSS could definately lower the page loading time, aswell as make it easier to add more things. Infact, you could convert your site to a CSS layout very easily, and then you would save bandwidth, and also increase the page loading time. Is that what you are looking for? I couldn't really tell what you were asking for in your original post.
Thanks.
Neczy,
Thanks for your post:
---
You wrote:
After viewing the source of the URL you provided CSS could definately lower the page loading time, aswell as make it easier to add more things.
====>> well, these catalog pages do not need anything added to them as they are merely supposed to duplicate paper catalgs of already defined lists.
---
You wrote:
Infact, you could convert your site to a CSS layout very easily, and then you would save bandwidth, and also increase the page loading time.
=====>>Typo? surely you mean *decrease* the page loading time? That is what I really want. To be able to load the same amount of information in less time. I already do things like eliminate periods at the end of citations and before prices to get the page weight down.
---
You wrote:
Is that what you are looking for? I couldn't really tell what you were asking for in your original post.
=======>> What I am really hoping for is a way to make the lines of text which look like this:
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b> Record Company Name </b></FONT><br>
shorter. For instance
<br> <insert some attribute here which is able to be modified by a css> <b> Record Company Name </b> <close attribute> <br>
Where the attribute to be entered does NOT separate this line from the line below it with whitepace (which is what was happening when i used <p> and <h4> attributes.
Cheers to all for any suggestions
zipYes, that was a typo. Sorry about that, and yes there is a very easy way to get rid of all of those font tags. What you have are lists, so you should use an unordered list for all of that. If you give me a moment I can make a simple mock up for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Style type="text/css">
h3 {
font-family: tahoma;
font-weight: bold;
color: #800000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
</Style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Site</title>
</head>
<body>
<h3>Cetra</h3>
<ul>
<li>P308 <b>LP0172</b> LO 1 (3) Gounod: Faust. KIRSTEN, DI STEFANO, TAJO, WARREN; PELLETIER (Met.Opera, 1949). A $40</li>
<li>308 <b>LP0173</b> LO 16 (3) Verdi: Nabucco. CALLAS, BECHI, NERONI; GUI, Teatro San Carlo, Naples (1949). A. Italian libretto $30</li>
<li>P308 <b>LP0174</b> LO 26 (3) Verdi: Aida. MILANOV, CASTAGNA, MARTINELLI, BONELLI; PELLETIER (Met. Opera, 1943). A. Italian libretto $30</li>
<li>P308 <b>LP0175</b> LO 28 (2) Verdi: La Traviata. CALLAS, DI STEFANO, BASTIANINI; GIULINI, La Scala (1955). A. Booklet, Ital. libretto $15</li>
<li>P308 <b>LP0176</b> LO 5 (3) Verdi: I Vespri Siciliani. CALLAS, MASCHERINI, KOKOLIOS, CHRISTOFF; E. KLEIBER, Teatro Communale, Florence (March 26, 1951). A. Program notes $25</li>
<li>P308 <b>LP0177</b> LO 519 (2) Weber: Euryanthe Overture; Brahms: Haydn Variations; Schubert: Symphony #8; Beethoven: Symphony #5. FURTWAENGLER, Berlin PO (Paris, 1954). A, LSM $25</li>
<li>P308 <b>LP0178</b> LO 56 (4) Boito: Nerone. PICCHI, PETRI, GUELFI, LAZZARINI, DE CAVALIERI, MAZZOLI; CAPUANA, Teatro San Carlo, Naples (1957). A. Booklet $20</li>
<li>P308 <b>LP0179</b> LPC 1211 (3) Rossini: Il Barbiere di Siviglia. SIMIONATO, INFANTINO, TADDEI, BADIOLI; PREVITALI. A, FOT. Libretto, long box $15</li>
<li>P308 <b>LP0180</b> LPC 1264 (3) Paisiello: Nina. GATTI, GIOIA, FERRIN; GERELLI. A. Italian libretto. Top of spine damaged $17</li>
<li>P308 <b>LP0181</b> LPC 55034 Mascagni: Isabeau--exc. POBBE, FERRARO, ROLA; SERAFIN, Sanremo SO. A, FOT $8</li>
<li>P308 <b>LP0182</b> LPC 55069 Chloe ELMO/Gianna PEDERZINI recital (5 items each). A $12</li>
</ul>
</body>
</html>
All I did was take an except of the text you had, and then put it into an unordered list.
Now, what all this does. I marked the titles of the lists in <h3> tags, and then in the <head> of the document styled the <h3> so that the color matched the previous text color. I then set the margin and padding to 0. Next, I marked up the lists in a <ul> and put the <li>'s around the list items. Nice and neat. If you apply it to your whole page, following my lead, your site should load much faster.
After looking at your page a bit though, should these lists be in tables instead? This is tabular data if I'm reading this correctly.I agree. And with tables, you could get rid of your <b> tags, and simply have the TDs with the LP numbers with the following styling.
td.lp{
text-weight:bolder;
}
Then you'd have:
<tr>
<td>308</td>
<td class="lp">LP0173</td>
<td>(3) Verdi: Nabucco. CALLAS, BECHI, NERONI; GUI, Teatro San Carlo, Naples (1949). A. Italian libretto $30</td>
</tr>
And have the second <td> in each table row be of the "lp" class. Then you'd have the text in Bold anyways. Of course, you could break that up into further table cells.
Tables aren't evil, they're just used wrong WAY too often.Both excellent suggestions. Though the "bolder" language doesnt seem to be working for me right now, I'll bang on it some more.
This *is* tabular data (our catalog number, record company number, format, contents, price), but it is not presented as such. In fact I WISH I could make it more so, but the program which produceds this is DataEase and it costs too much to migrate to another highly flexible and tweakable program like Filemaker.
Thanks again for all your help. Will report back with success and figures of slimming pages.
zipI think that should be font-weight:bold rather than text-weight:bolder but that's just off the top of my head.font-weight:bolder; will make it as bold as possible, you can also give it a number value like 700
Our main business is selling Classical LPs via mail order. We have been publishing catalogs on paper for 35 years and we've been posting them on the web fo a while too
.
The problem is that because the web presentation is merely a replication of the paper catalog, the pages are *huge*.
It seems to me that I *should* be able to use CSS to decrease the weight of my pages, but I am running into trouble.
Here is the HTML code as it is now:
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Allegro</b></FONT><br>
P308 <b>LP0011</b> 1598 Beethoven: Sonatas #30 & 31. PETRI. A-, FOT; 1/4" X $20
<br>
P308 <b>LP0012</b> AL 54 Mozart: Sonatas, K. 280, 282, & 284. HAMBRO. A, LSM $10
<br>
P308 <b>LP0013</b> LEG 9020 Salvatore BACCALONI aria & duet recital. A. Vinyl pressing $6
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Amadeo</b></FONT><br>
P308 <b>LP0014</b> AVRS 204 St S Beethoven: Sonatas #8, 23, & 26. GULDA. A $12
<br>
P308 <b>LP0015</b> AVRS 6204 Boyce: Symphony #3; Purcell: The Married Beau--Suite; Bartok: Divertimento for Strings. DE STOUTZ, Zurich CO. A $6
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b>Amon Ra</b></FONT><br>
P308 <b>LP0016</b> SAR 15 S Beethoven: An die ferne Geliebte; Lieder. PARTRIDGE (t), BURNETT (Rosenberger fp. c. 1800). A, LSM. English texts $10
and so on and so on for about 1600 more items. ( This comes from <!-- m --><a class="postlink" href="http://www.parnassusrecords.com/p308.htm">http://www.parnassusrecords.com/p308.htm</a><!-- m --> )
Each record company has its own name. I want to maintain those names in a different color and font than the regular text.
If I use the <p> tag in front of every record company and close it at the end of that line, I get an ugly effect where the company names are floating up above the citations.
If I use a <h3> tag in front of the company I get the same thing.
Question: Is there any tag which CSS will recognise that I can use to denote these companies? Is there a tag which can be applied only to certain portions of the regular text of the page?You might try <span>Hello zipszig,
After viewing the source of the URL you provided CSS could definately lower the page loading time, aswell as make it easier to add more things. Infact, you could convert your site to a CSS layout very easily, and then you would save bandwidth, and also increase the page loading time. Is that what you are looking for? I couldn't really tell what you were asking for in your original post.
Thanks.
Neczy,Thanks for your post:
---
You wrote:
After viewing the source of the URL you provided CSS could definately lower the page loading time, aswell as make it easier to add more things.
====>> well, these catalog pages do not need anything added to them as they are merely supposed to duplicate paper catalgs of already defined lists.
---
You wrote:
Infact, you could convert your site to a CSS layout very easily, and then you would save bandwidth, and also increase the page loading time.
=====>>Typo? surely you mean *decrease* the page loading time? That is what I really want. To be able to load the same amount of information in less time. I already do things like eliminate periods at the end of citations and before prices to get the page weight down.
---
You wrote:
Is that what you are looking for? I couldn't really tell what you were asking for in your original post.
=======>> What I am really hoping for is a way to make the lines of text which look like this:
<br><FONT SIZE=3 COLOR=#800000 FACE=TAHOMA><b> Record Company Name </b></FONT><br>
shorter. For instance
<br> <insert some attribute here which is able to be modified by a css> <b> Record Company Name </b> <close attribute> <br>
Where the attribute to be entered does NOT separate this line from the line below it with whitepace (which is what was happening when i used <p> and <h4> attributes.
Cheers to all for any suggestions
zipYes, that was a typo. Sorry about that, and yes there is a very easy way to get rid of all of those font tags. What you have are lists, so you should use an unordered list for all of that. If you give me a moment I can make a simple mock up for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Style type="text/css">
h3 {
font-family: tahoma;
font-weight: bold;
color: #800000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
</Style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Site</title>
</head>
<body>
<h3>Cetra</h3>
<ul>
<li>P308 <b>LP0172</b> LO 1 (3) Gounod: Faust. KIRSTEN, DI STEFANO, TAJO, WARREN; PELLETIER (Met.Opera, 1949). A $40</li>
<li>308 <b>LP0173</b> LO 16 (3) Verdi: Nabucco. CALLAS, BECHI, NERONI; GUI, Teatro San Carlo, Naples (1949). A. Italian libretto $30</li>
<li>P308 <b>LP0174</b> LO 26 (3) Verdi: Aida. MILANOV, CASTAGNA, MARTINELLI, BONELLI; PELLETIER (Met. Opera, 1943). A. Italian libretto $30</li>
<li>P308 <b>LP0175</b> LO 28 (2) Verdi: La Traviata. CALLAS, DI STEFANO, BASTIANINI; GIULINI, La Scala (1955). A. Booklet, Ital. libretto $15</li>
<li>P308 <b>LP0176</b> LO 5 (3) Verdi: I Vespri Siciliani. CALLAS, MASCHERINI, KOKOLIOS, CHRISTOFF; E. KLEIBER, Teatro Communale, Florence (March 26, 1951). A. Program notes $25</li>
<li>P308 <b>LP0177</b> LO 519 (2) Weber: Euryanthe Overture; Brahms: Haydn Variations; Schubert: Symphony #8; Beethoven: Symphony #5. FURTWAENGLER, Berlin PO (Paris, 1954). A, LSM $25</li>
<li>P308 <b>LP0178</b> LO 56 (4) Boito: Nerone. PICCHI, PETRI, GUELFI, LAZZARINI, DE CAVALIERI, MAZZOLI; CAPUANA, Teatro San Carlo, Naples (1957). A. Booklet $20</li>
<li>P308 <b>LP0179</b> LPC 1211 (3) Rossini: Il Barbiere di Siviglia. SIMIONATO, INFANTINO, TADDEI, BADIOLI; PREVITALI. A, FOT. Libretto, long box $15</li>
<li>P308 <b>LP0180</b> LPC 1264 (3) Paisiello: Nina. GATTI, GIOIA, FERRIN; GERELLI. A. Italian libretto. Top of spine damaged $17</li>
<li>P308 <b>LP0181</b> LPC 55034 Mascagni: Isabeau--exc. POBBE, FERRARO, ROLA; SERAFIN, Sanremo SO. A, FOT $8</li>
<li>P308 <b>LP0182</b> LPC 55069 Chloe ELMO/Gianna PEDERZINI recital (5 items each). A $12</li>
</ul>
</body>
</html>
All I did was take an except of the text you had, and then put it into an unordered list.
Now, what all this does. I marked the titles of the lists in <h3> tags, and then in the <head> of the document styled the <h3> so that the color matched the previous text color. I then set the margin and padding to 0. Next, I marked up the lists in a <ul> and put the <li>'s around the list items. Nice and neat. If you apply it to your whole page, following my lead, your site should load much faster.
After looking at your page a bit though, should these lists be in tables instead? This is tabular data if I'm reading this correctly.I agree. And with tables, you could get rid of your <b> tags, and simply have the TDs with the LP numbers with the following styling.
td.lp{
text-weight:bolder;
}
Then you'd have:
<tr>
<td>308</td>
<td class="lp">LP0173</td>
<td>(3) Verdi: Nabucco. CALLAS, BECHI, NERONI; GUI, Teatro San Carlo, Naples (1949). A. Italian libretto $30</td>
</tr>
And have the second <td> in each table row be of the "lp" class. Then you'd have the text in Bold anyways. Of course, you could break that up into further table cells.
Tables aren't evil, they're just used wrong WAY too often.Both excellent suggestions. Though the "bolder" language doesnt seem to be working for me right now, I'll bang on it some more.
This *is* tabular data (our catalog number, record company number, format, contents, price), but it is not presented as such. In fact I WISH I could make it more so, but the program which produceds this is DataEase and it costs too much to migrate to another highly flexible and tweakable program like Filemaker.
Thanks again for all your help. Will report back with success and figures of slimming pages.
zipI think that should be font-weight:bold rather than text-weight:bolder but that's just off the top of my head.font-weight:bolder; will make it as bold as possible, you can also give it a number value like 700