need help with css sprites |
need help with css sprites |
falcon |
Apr 19 2017, 10:52 PM
Post
#1
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
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; } |
Darin McGrew |
Apr 20 2017, 12:19 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
If you use CSS sprites, then make sure the images in them are optional decorative images, and that the content is accessible without them. They rely on background images, and there are a number of reasons why your visitors might enforce their own color schemes, overriding your design's colors and backgrounds, including background images.
|
pandy |
Apr 20 2017, 06:10 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't understand what exactly you need help with. Your page uses ordinary images, not sprites. Can you show us a page where you actually use the sprite?
I agree with Darin though. Don't think those images should be sprites. |
Christian J |
Apr 20 2017, 10:15 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I agree with Darin though. Don't think those images should be sprites. Me too. Sprites might be used if a page contains lots of files (like dozens of icons, scripts and stylesheets), since today's browsers download a few big files faster than many small ones, due to a limited number of HTTP connections. But for this particular page there's no technical need for sprites, also ordinary images in IMG elements are more suitable for usability reasons. |
Christian J |
Apr 20 2017, 10:29 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
2. have it display correctly for different screen sizes 3. have it display correctly for different browsers (note: IE is the worst) We would need to see both the images, HTML and CSS to help with this. But again, it's better to use IMG elements. QUOTE I believe I need "if IE then ..." to display correctly in CSS That was only supported in IE9 and older: https://en.wikipedia.org/wiki/Conditional_comments QUOTE Couldn't find that image. QUOTE 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; } The above CSS might be simplified if you use both classes and IDs in the HTML: CODE .sprite {background-image: url(./image_3699.png);} #image1 { background-position: -7px 0px; width: 969px; height: 616px; } #image2 {background-position: -6px -616px; width: 970px; height: 609px; } #image3 {background-position: -4px -1225px; width: 972px; height: 615px; } |
falcon |
Apr 20 2017, 09:48 PM
Post
#6
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
Thank You for the code, will try it.
Will respond with the results also the html code, the css code and the image sprite Thank You again falcon |
falcon |
Apr 22 2017, 08:54 PM
Post
#7
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
Thank You for the code, will try it. Will respond with the results also the html code, the css code and the image sprite Thank You again falcon - - - - HTML Code 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 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"> } <style type="text/css"> .sprite {background-image: url(./image_3699.png);} #image1 { background-position: -7px 0px; width: 969px; height: 616px; } #image2 {background-position: -6px -616px; width: 970px; height: 609px; } #image3 {background-position: -4px -1225px; width: 972px; height: 615px; } #image4 { background-position: -5px -1840px; width: 971px; height: 610px; } #image5 { background-positioni: -5px -2450px; width: 971px; height: 617px; } #image6 { background-position: -6px -3067px; width: 970px; height: 612px; } #image7 { background-position: -8px -3679px; width: 968px; height: 618px; } #image8 { background-position: -1px -4297px; width: 975px; height: 613px; } #image9 { background-position: -4px -4910px; width: 972px; height: 612px; } #image10 { background-position: -5px -5522px; width: 971px; height: 618px; } #image11 { background-position: -4px -6140px; width: 972px; height: 616px; } #image12 { background-position: -6px -6756px; width: 970px; height: 613px; } #image13 { background-position: 0px -7369px; width: 976px; height: 616px; } #image14 { background-position: 0px -7985px; width: 976px; height: 616px; } #image15 { background-position: -9px -8601px; width: 967px; height: 613px; } #image16 { background-position: -5px -9214px; width: 971px; height: 621px; } </style> </head> <body> <!--========== Banner ==========--> <div id="header"> <img src="../Images/PageBreeze Visual Editor.png" width="30%" height="35%" align="left" alt="ftp"><img src="../Images/PageBreeze HTML source.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) (left image) and HTML tag/source modes (right image). 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><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> |
falcon |
Apr 22 2017, 09:02 PM
Post
#8
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
CSS code
CODE *{margin:auto;} /* background color #FAEBD7= Antique White */ body{background-color:#FAEBD7;font-family:"Times New Roman", Times, serif;font-size:90%;color:#000000;padding:10px;} /* color #800080= Purple */ a:hover{color:purple;background-color:white;font-weight:bold;} #header{text-align:center;border:1px solid darkblue;5px 50% no-repeat;} #header b{display:block;min-height:120px;margin:0px;padding:0 200px;font-weight:normal;} * html #header b{height:200px;} #header h1{text-align:center;color:#FF0000;font-size:180%;margin-bottom:10px;} #header h2{text-align:center;color:#FF0000;font-size:130%;margin-bottom:10px;} h3{text-align:center;color:#FF0000;font-size:130%;margin-bottom:10px;} #header h4{color:#FF0000;font-size:100%;margin-bottom:10px;} #homelink{float:left;width:64px;height:20px;background-image:url(../Images/home.gif);background-repeat:no-repeat;margin-top:7px;font-size:1px;color:#428afc;} #articlelink{float:right;width:64px;height:20px;background-image:url(../Images/articles.gif);background-repeat:no-repeat;font-size:1px;color:#3c8ffc;} #forumlink{float:right;width:64px;height:20px;background-image:url(../Images/forum.gif);background-repeat:no-repeat;font-size:1px;color:#3c8ffc;} /* 1 col */ .col{float:left;width:100%;border:1px solid darkblue;margin-bottom:5px;} .col a{margin-left:5px;line-height:1.5ex} .col dt{padding-top:3px;} .col dd{padding:2px 5px 2px 20px;} .col b{display:block;padding:2px 5px 2px 20px;} .col{float:left;width:100%;border:1px solid darkblue;text-align:left;margin-bottom:5px;} /* 2 col */ .leftcol{float:left;width:49.5%;border:1px solid darkblue;margin-bottom:5px;} .rightcol{float:right;width:49.5%;border:1px solid darkblue;margin-bottom:5px;} /* col 80% */ .coll{float:left;width:79.5%;border:1px solid darkblue;margin-bottom:5px;} .coll a, .rcol a{margin-left:5px;line-height:1.5ex} .coll dt, .rcol dt{padding-top:3px;} .coll dd, .rcol dd{padding:2px 5px 2px 20px;} /* col 40% */ .lecol{float:left;width:39.7%;border:1px solid darkblue;margin-bottom:5px;margin:0;padding:0;} .mdcol{float:left;width:39.7%;border:1px solid darkblue;margin-bottom:5px;} /* col 20% */ .rcol{float:right;width:19.7%;border:1px solid darkblue;margin-bottom:5px;} /* 3 col */ .lfcol{float:left;width:32.8%;margin-bottom:5px;} .micol{float:left;width:32.8%;margin-bottom:5px;} .ricol{float:right;width:32.8%;margin-bottom:5px;} .lcol a, .mcol a, .rcol a{margin-left:5px;line-height:1.5ex} .lecol a, .mdcol a, .rcol a{margin-left:5px;line-height:1.5ex} .lecol b, .mdcol b, .rcol b{display:block;padding:2px 5px 2px 20px;} .lecol dt, .mdcol dt, .rcol dt{padding-top:3px;} .lecol dd, .mdcol dd, .rcol dd{padding:2px 5px 2px 20px;} .lcol dt, .mcol dt, .rcol dt{padding-top:3px;} .lcol dd, .mcol dd, .rcol dd{padding:2px 5px 2px 20px;} .lcol b, .mcol b, .rcol b{display:block;padding:2px 5px 2px 20px;} /* 4 col */ .ltcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;} .lmdcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;} .rmdcol{float:left;width:24.7%;border:1px solid darkblue;margin-bottom:5px;} .ritcol{float:right;width:24.7%;border:1px solid darkblue;margin-bottom:5px;} .ltcol a, .lmdcol a, .rmdcol a, .ritcol a{margin-left:5px;line-height:1.5ex} .lftcol{float:left;width:20.2%;border:1px solid darkblue;margin-bottom:5px;} .midlftcol{float:left;width:19.7%;border:1px solid darkblue;margin-bottom:5px;} .midcol{float:left;width:19.0%;border:1px solid darkblue;margin-bottom:5px;} .midrtcol{float:left;width:20.1%;border:1px solid darkblue;margin-bottom:5px;} .rtcol{float:right;width:19.7%;border:1px solid darkblue;margin-bottom:5px;} .lftcol a, .midlftcol a, .midcol a, .midrtcol a, .rtcol a{margin-left:5px;line-height:1.5ex} .lftcol dt, .midlftcol dt, .midcol dt, .midrtcol dt, .rtcol dt{padding-top:3px;} .lftcol dd, .midlftcol dd, .midcol dd, .midrtcol dd, .rtcol dd{padding:2px 5px 2px 20px;} .lftcol b, .midlftcol b, .midcol b, .midrtcol b, .rtcol b{display:block;padding:2px 5px 2px 20px;} .rightcol{float:right;width:49.5%;border:1px solid darkblue;margin-bottom:5px;} .leftcol a, .rightcol a{margin-left:5px;line-height:1.5ex} .leftcol dt, .rightcol dt{padding-top:3px;} .leftcol dd, .rightcol dd{padding:2px 5px 2px 20px;} .leftcol b, .rightcol b{display:block;padding:2px 5px 2px 20px;} .clear{clear:both;height:30px;} |
Christian J |
Apr 23 2017, 06:47 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I meant the HTML version with sprites (that goes along with the CSS in the first post), not the table version...
|
Christian J |
Apr 23 2017, 12:14 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Apr 23 2017, 10:19 PM
Post
#11
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
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%;} - - - - Will try it Thank You falcon - - - - PageBreeze Images Properties General + Details PageBreeze Edit Size: 208 KB (212,992 bytes) Width: 972 pixels Height: 615 pixels PageBreeze File Size: 196 KB (201,097 bytes) Width: 970 pixels Height: 609 pixels PageBreeze Form Size: 213 KB (218,818 bytes) Width: 972 pixels Height: 616 pixels PageBreeze Help Topics Size: 193 KB (198,127 bytes) Width: 967 pixels Height: 613 pixels PageBreeze Help Size: 213 KB (218,935 bytes) Width: 976 bytes Height: 616 bytes PageBreeze HTML Source Size: 125 KB (128,935 bytes) Width: 971 pixels Height: 621 pixels PageBreeze Insert Graphic Size: 135 KB (138,963 bytes) Width: 968 pixels Height: 618 pixels PageBreeze Insert Image Size: 125 KB (128,532 bytes) Width: 975 pixels Height: 613 pixels PageBreeze Insert Special Character Size: 119 KB (122,173 bytes) Width: 972 pixels Height: 612 pixels PageBreeze Insert Size: 210 KB (215,222 bytes) Width: 971 pixels Height: 617 pixels PageBreeze Publish (FTP) Size: 143 KB (146,685 bytes) Width: 971 pixels Height: 618 pixels PageBreeze Table Size: 199 KB (204,118 bytes) Width: 970 pixels Height: 612 pixels PageBreeze Tools Size: 201 KB (206,327 bytes) Width: 970 pixels Height: 613 pixels PageBreeze View Size: 200 KB (205,225 bytes) Width: 971 pixels Height: 610 pixels PageBreeze Visual Editor Size: 199 KB (204,012 bytes) Width: 972 Pixels Height: 612 pixels PageBreeze Size: 15.3 KB (15,762 bytes) Width: 321 pixels Height: 229 pixels - - - - The sprite are verticle 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> 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 |
Apr 24 2017, 08:24 PM
Post
#12
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
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 |
Apr 25 2017, 12:55 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
It would be easier to understand your replies if you don't write inside the quoted text...
|
Christian J |
Apr 26 2017, 06:03 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Apr 26 2017, 07:01 PM
Post
#15
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
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 |
Apr 27 2017, 05:46 AM
Post
#16
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
falcon |
Aug 9 2017, 12:23 AM
Post
#17
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
http://forums.htmlhelp.com/lofiversion/index.php/t59273.html
http://forums.htmlhelp.com/lofiversion/index.php/t59294.html posted: Apr 19 2017 posted: Mar 25 2017 The CSS code you gave helped emensily but the pictures are too high (tried to change height code but did not work). Is there a way to change height and/or width in CSS for them. Then I can change them for desktop, ipad, and cell phone. Thank You falcon |
falcon |
Aug 12 2017, 01:36 AM
Post
#18
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
CODE <!doctype HTML > <html> <head> <title>Fresh FTP with Screenshotsl</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="menu.css"> <style type="text/css"> .rightcol { /* 2 column - right column 50% */ float: left width: 49.5%; } .rcol { /* 2 column - left column 50% */ float: right; width: 49.5%; border: 0px; } </style> <style> /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } </style> Checked this on desktop and iPad. Need further checking but will give the size for different displays (obtained from another forum) adapted to your code. Thank You, your code worked |
Lo-Fi Version | Time is now: 25th April 2024 - 06:49 AM |