need help with css sprites Options

[falcon]

CSS Sprites-PageBreeze1

What I am trying to accomplish is:
1. convert pictures to sprites
2. have it display correctly for different screen sizes
3. have it display correctly for different browsers (note: IE is the worst)
The website currently in tables because I could not get it to display correctly in CSS
I believe I need "if IE then ..." to display correctly in CSS
The CSS Sprites Generator:
https://www.hscripts.com/tools/css-sprites-...rator/index.php
The 16 image sprite "image_3699" it is stored in "Images" folder
- - -
Any help would be appreciated
Let me know if more information is needed. If code is needed, let me know what code
Thank You
falcon

The webpage:
http://freetutorials.name/Reference1/PageB...creenshots.html
The sprite
image_3699

Pagebreeze image 3699
#image1 { background-image: url(./image_3699.png); background-position: -7px 0px; width: 969px; height: 616px; }
#image2 { background-image: url(./image_3699.png); background-position: -6px -616px; width: 970px; height: 609px; }
#image3 { background-image: url(./image_3699.png); background-position: -4px -1225px; width: 972px; height: 615px; }
#image4 { background-image: url(./image_3699.png); background-position: -5px -1840px; width: 971px; height: 610px; }
#image5 { background-image: url(./image_3699.png); background-position: -5px -2450px; width: 971px; height: 617px; }
#image6 { background-image: url(./image_3699.png); background-position: -6px -3067px; width: 970px; height: 612px; }
#image7 { background-image: url(./image_3699.png); background-position: -8px -3679px; width: 968px; height: 618px; }
#image8 { background-image: url(./image_3699.png); background-position: -1px -4297px; width: 975px; height: 613px; }
#image9 { background-image: url(./image_3699.png); background-position: -4px -4910px; width: 972px; height: 612px; }
#image10 { background-image: url(./image_3699.png); background-position: -5px -5522px; width: 971px; height: 618px; }
#image11 { background-image: url(./image_3699.png); background-position: -4px -6140px; width: 972px; height: 616px; }
#image12 { background-image: url(./image_3699.png); background-position: -6px -6756px; width: 970px; height: 613px; }
#image13 { background-image: url(./image_3699.png); background-position: 0px -7369px; width: 976px; height: 616px; }
#image14 { background-image: url(./image_3699.png); background-position: 0px -7985px; width: 976px; height: 616px; }
#image15 { background-image: url(./image_3699.png); background-position: -9px -8601px; width: 967px; height: 613px; }
#image16 { background-image: url(./image_3699.png); background-position: -5px -9214px; width: 971px; height: 621px; }

[Christian J]

Here's a quick idea on how to do it with CSS, but without sprites. Haven't tested older MSIE versions, but I assume it will work in those currently used.

CODE

<style>
section {
display: table;
width: 100%;
max-width: 2000px;
border: solid blue;
}

section div {display: table-row;}

section div p {
margin: 0;
padding: 2em;
border: solid red;
}

section div p img {min-width: 100%;}

@media (min-width: 1000px) {
    section div p {display: table-cell;}
}
</style>

<section>
<div>
<p><img src="pic1.jpg" alt="">caption text</p>
<p><img src="pic2.jpg" alt="">caption text</p>
</div>

<div>
<p><img src="pic3.jpg" alt="">caption text</p>
<p><img src="pic4.jpg" alt="">caption text</p>
</div>
</section>

In windows less than 1000px wide a single column CSS table is created, which should be helpful on small mobile screens. Not sure about the exact value though, I'm not up to date on mobile screens and their resolutions. Also the largest width of the IMG elements shouldn't exceed the image files' intrinsic widths, since that would reduce image quality.

In windows wider than 1000px, a two column CSS table layout is created.

The images are 100% wide in their columns, but the SECTION element has a max-width of 2000px to prevent too large images on high resolution screens. But perhaps the user should be allowed to change his own browser window width, in which case the max-width property should be removed from the stylesheet.

[falcon]

Here's a quick idea on how to do it with CSS, but without sprites. Haven't tested older MSIE versions, but I assume it will work in those currently used.

CODE

<style>
section {
display: table;
width: 100%;
max-width: 2000px;
border: solid blue;
}

section div {display: table-row;}

section div p {
margin: 0;
padding: 2em;
border: solid red;
}

section div p img {min-width: 100%;}

- - - -
Here is the Code with your suggestion for CSS for the images
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html>
      <head>
         <title>PageBreeze HTML Editor Screenshots</title>
            <meta name="description" content="FTP Client, FTP software (file transfer protocol) allows you to transfer files between your local computer and a server on the Internet. It includes transfer resume, drag and drop support, file viewing & editing, file sharing">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="ROBOTS" content="ALL">
         <link rel="stylesheet" type="text/css" href="2%20col.css">
         <link rel="stylesheet" type="text/css" href="classic.css">
      <link rel="stylesheet" type="text/css" href="menu.css">
   <style type="text/css">
.rightcol {                            /* 2 column - right column  50% */
    float: right
    width: 49.5%;
}
.leftcol {                            /* 2 column - left column  50% */
    float: left;
    width: 49.5%;
    border: 0px;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.lecol {width:39.0%;}
.mdcol {width:39.0%;}
.rcol {width:19.0%;}
</style>
<![endif]-->
</head>
<body>
<!--========== Banner ==========-->
<div id="header">
<img
src="../Images/PageBreeze Insert Special Character.png" width="30%" height="35%" align="left" alt="ftp"><img src="../Images/PageBreeze Publish(FTP).png" width="30%" height="30%" align="right" alt="ftp">
  <center><h2>PageBreeze HTML Editor Screenshots</h2>
  <p> PageBreeze Free HTML Editor  is an award-winning HTML Editor which has both visual (WYSIWYG) and HTML tag/source modes. PageBreeze Free HTML Editor's design emphasizes simplicity and ease-of-use. You'll find that you'll be creating great looking websites almost instantly--with virtually no learning curve</p><br>
    <a id="homelink" href="../index.html">home</a><br><br>
      <font size="+1"><strong>Related HTML Editors</strong><br><a href="https://www.freehtmlvalidator.com/">CSE HTML validator</a></font><br><br>
    <font size="+1"><strong>Related subjects</strong><br>
    <a href="FTP_client.html">FTP Tutorials</a>   <a href="http://freetutorials.name/Reference1/ftp_client.html#Reviews">FTP Reviews</a>   <a href="html_tutorials.html">HTML Tutorials</a>   <a href="http://freetutorials.name/Reference1/Web%20Site%20SEO.html">WebSite SEO</a><br>
    <a href="html%20editors.html">HTML Editors</a>   <a href="DHTML%20tutorials.html">DHTML Tutorials</a>   <a href="Java_tutorials.html">Java tutorials</a>   <a href="Design%26Photo_tutorials.html">Design & Photo</a></font><br><br></center>
</div><br />
<font size="+2"><strong>Introduction:</strong></font><font size="+1"> PageBreeze color-coded HTML source (tag) editor. You can switch between HTML source and visual modes at any time with a click of the mouse, and any changes you have made will instantly be reflected in both modes. </font><br><br>
<center>
<font size="+1" color="red">Web Hosting By BlueHost   Click BlueHost banner (below) for more information</font>   <img src="../Images/red%20arrow%20down.jpg" width="1%" height="1%" align="bottom" alt="ftp"><br><br>
<!--======== BlueHost Ads =========-->
<p> <a href="http://www.bluehost.com/track/freetut2/"><img src="../Images/Bluehost.png" width="50%" height="10%" align="bottom" alt="bluehost"></a>
<!--======== End BlueHost Ads =========-->
</center><br>


<dl>
  <dt><table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
      <td width="100%"> <b>PageBreeze Editor Screenshots</b><br>
      <a href="http://www.pagebreeze.com/">PageBreeze Editor Download</a>   </td></table>
      <dd><font size="+1"><strong>Freeware:</strong></font></dd><br>
  <dt><table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
      <td width="50%"> <img src="../Images/PageBreeze.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%"> <img src="../Images/PageBreeze File.png" width="90%" height="90%" align="right" alt="Editor"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 1. PageBreeze</strong></td>
      <td width="50%">            <strong>fig. 2. PageBreeze File</strong></td>
    </tr>
    <tr>
      <td width="50%"> <img src="../Images/PageBreeze Edit.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%"> <img src="../Images/PageBreeze View.png" width="90%" height="90%" align="right" alt="Editor"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 3. PageBreeze Edit</strong></td>
      <td width="50%">            <strong>fig. 4. PageBreeze View</strong></td>
    </tr>
    <tr>
      <td width="50%"> <img src="../Images/PageBreeze Insert.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%"> <img src="../Images/PageBreeze Table.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 5. PageBreeze Insert</strong></td>
      <td width="50%">            <strong>fig. 6. PageBreeze Table</strong></td>
    </tr>
        <tr>
      <td width="50%"> <img src="../Images/PageBreeze Insert Graphic.png" width="90%" height="90%" align="left"></td>
      <td width="50%"> <img src="../Images/PageBreeze Insert Image.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 7. PageBreeze Insert Graphic</strong></td>
      <td width="50%">            <strong>fig. 8. PageBreeze Insert Image</strong></td>
    </tr>
        <tr>
      <td width="50%"> <img src="../Images/PageBreeze Insert Special Character.png" width="90%" height="90%" align="left"></td>
      <td width="50%"> <img src="../Images/PageBreeze Publish(FTP).png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 9. PageBreeze Insert Special Character</strong></td>
      <td width="50%">            <strong>fig. 10. PageBreeze Publish(FTP)</strong></td>
    </tr>
    <tr>
      <td width="50%"> <img src="../Images/PageBreeze Form.png" width="90%" height="90%" align="left"></td>
      <td width="50%"> <img src="../Images/PageBreeze Tools.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 11. PageBreeze Form</strong></td>
      <td width="50%">            <strong>fig. 12. PageBreeze Tools</strong></td>
    </tr>
    
     <tr>
      <td width="50%"> <img src="../Images/PageBreeze Help.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%"> <img src="../Images/PageBreeze Help Topics.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 13. PageBreeze Help</strong></td>
      <td width="50%">            <strong>fig. 14. PageBreeze Help Topics</strong></td>
    </tr>
         <tr>
      <td width="50%"> <img src="../Images/PageBreeze Visual Editor.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%"> <img src="../Images/PageBreeze HTML Source.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">      <strong>fig. 15. PageBreeze Visual Editor</strong></td>
      <td width="50%">            <strong>fig. 16. PageBreeze HTML Source</strong></td>
    </tr>          
    </table>
  </dl>

<!--==== bottom menu ====-->
<br>
  <dt><table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
<td><div style="text-align: center;"><a href="FTP_client.html">FTP Tutorials</a>  |  <a href="http://freetutorials.name/Reference1/ftp_client.html#Reviews">FTP Reviews</a>  |  <a href="html_tutorials.html">HTML Tutorials</a>  |  <a href="http://freetutorials.name/Reference1/Web%20Site%20SEO.html">WebSite SEO</a>  |  <a href="html editors.html">HTML Editors</a>  |  <a href="DHTML tutorials.html">DHTML Tutorials</a>  |  <a href="Java_tutorials.html">Java tutorials</a>  |  <a href="Design%26Photo_tutorials.html">Design & Photo</a></td></tr>          
    </table>
  </dl><br><br>
<center>
<!--======== Google Ads =========-->
<script type="text/javascript"><!--
google_ad_client = "pub-7493545689925893";
/* 728x90, created 11/6/08 */
google_ad_slot = "9957049103";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center><br>
<dl class="clear">
<dd><center><font size="-1">
FREE TUTORIALS © copyright 2000-2017 @ Cadet Career Counseling all rights reserved </font></center></dd>
<dd><center>Contact Webmaster at:<a href="mailto:navyfalcon1@gmail.com">(navyfalcon) e-mail</a></center></dd>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3640264-1";
urchinTracker();
</script>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=4878237;
var sc_invisible=1;
var sc_partition=57;
var sc_click_stat=1;
var sc_security="92a19f70";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="counter on iweb"
href="http://www.statcounter.com/iweb/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/4878237/0/92a19f70/1/"
alt="counter on iweb" ></a></div></noscript></dl>
<!-- End of StatCounter Code -->
</body>
</html>

This did reduce the code some. Your code was great
The right images are smaller than the left, I think that is because it is not centered (not sure)
A web page analyzer said
TOTAL_OBJECTS - Caution. You have 16 total objects on this page. From 12 to 20 objects per page, the latency due to object overhead makes up from 75% to 80% of the delay of the average web page.
This is why I want to use CSS Sprites.
Thank You
falcon

@media (min-width: 1000px) {
section div p {display: table-cell;}
}
</style>

<section>
<div>
<p><img src="pic1.jpg" alt="">caption text</p>
<p><img src="pic2.jpg" alt="">caption text</p>
</div>

<div>
<p><img src="pic3.jpg" alt="">caption text</p>
<p><img src="pic4.jpg" alt="">caption text</p>
</div>
</section>[/code]
In windows less than 1000px wide a single column CSS table is created, which should be helpful on small mobile screens. Not sure about the exact value though, I'm not up to date on mobile screens and their resolutions. Also the largest width of the IMG elements shouldn't exceed the image files' intrinsic widths, since that would reduce image quality.

In windows wider than 1000px, a two column CSS table layout is created.

The images are 100% wide in their columns, but the SECTION element has a max-width of 2000px to prevent too large images on high resolution screens. But perhaps the user should be allowed to change his own browser window width, in which case the max-width property should be removed from the stylesheet.

[Christian J]

A web page analyzer said
TOTAL_OBJECTS - Caution. You have 16 total objects on this page. From 12 to 20 objects per page, the latency due to object overhead makes up from 75% to 80% of the delay of the average web page.
This is why I want to use CSS Sprites.

Maybe "objects" means things like external ("render blocking") scripts or stylesheets? Your code example above contains three external javascripts (for ads and tracking), these will likely have the main impact on page rendering delay. In comparison, a few images shouldn't cause any significant rendering delay.

Keep in mind that companies like Google are not primarily trying to help sites be user-friendly, rather they want to make site visitors click the ads on your site. Because of this Google encourages sites to optimize everything else, so the ads are not delayed too much. (If Google really wanted pages to render fast it should suggest that its own ad scripts were removed, but of course that will never happen.)

In any case you shouldn't resort to use CSS sprites instead of proper IMG elements just because Google's scripts slows down page rendering, that would be focusing on the wrong things. I don't even think Google would approve of such extreme measures.

[falcon]

A web page analyzer said
TOTAL_OBJECTS - Caution. You have 16 total objects on this page. From 12 to 20 objects per page, the latency due to object overhead makes up from 75% to 80% of the delay of the average web page.
This is why I want to use CSS Sprites.

Maybe "objects" means things like external ("render blocking") scripts or stylesheets? Your code example above contains three external javascripts (for ads and tracking), these will likely have the main impact on page rendering delay. In comparison, a few images shouldn't cause any significant rendering delay.

Keep in mind that companies like Google are not primarily trying to help sites be user-friendly, rather they want to make site visitors click the ads on your site. Because of this Google encourages sites to optimize everything else, so the ads are not delayed too much. (If Google really wanted pages to render fast it should suggest that its own ad scripts were removed, but of course that will never happen.)

In any case you shouldn't resort to use CSS sprites instead of proper IMG elements just because Google's scripts slows down page rendering, that would be focusing on the wrong things. I don't even think Google would approve of such extreme measures.

- - - - -
Thank You
I misunderstood The "TOTAL OBJECTS" because I have 16 pictures and they said I have 16 total objects.
falcon

[pandy]

No, I don't think you did. I think objects means anything that's loaded separately but is rendered on the page. I.e. images, movies and sound clips.

But I agree with Christian. Don't listen too much to Google. The images are the whole purpose of the page. Of course they should be inline images.