 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; } |
  |
 
|
  |
Replies
| falcon |
Apr 20 2017, 09:48 PM
Post
#2
|
|
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
#3
|
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
QUOTE(falcon @ Apr 20 2017, 06:48 PM)  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> |
|
|
|
Posts in this topic
falcon need help with css sprites Apr 19 2017, 10:52 PM
Darin McGrew If you use CSS sprites, then make sure the images ... Apr 20 2017, 12:19 AM
pandy I don't understand what exactly you need help ... Apr 20 2017, 06:10 AM Christian J
I agree with Darin though. Don't think those ... Apr 20 2017, 10:15 AM Christian J
2. have it display correctly for different screen... Apr 20 2017, 10:29 AM falcon CSS code
*{margin:auto;}
/* background col... Apr 22 2017, 09:02 PM Christian J I meant the HTML version with sprites (that goes a... Apr 23 2017, 06:47 AM Christian J Here's a quick idea on how to do it with CSS, ... Apr 23 2017, 12:14 PM falcon
Here's a quick idea on how to do it with CSS,... Apr 23 2017, 10:19 PM falcon
Here's a quick idea on how to do it with CSS,... Apr 24 2017, 08:24 PM Christian J
A web page analyzer said
TOTAL_OBJECTS - Caution.... Apr 26 2017, 06:03 PM falcon
A web page analyzer said
TOTAL_OBJECTS - Caution... Apr 26 2017, 07:01 PM pandy No, I don't think you did. I think objects mea... Apr 27 2017, 05:46 AM Christian J It would be easier to understand your replies if y... Apr 25 2017, 12:55 PM falcon http://forums.htmlhelp.com/lofiversion/index.php/t... Aug 9 2017, 12:23 AM falcon
<!doctype HTML >
<html>
... Aug 12 2017, 01:36 AM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 09:00 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC