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; } |
falcon |
Aug 12 2017, 01:36 AM
Post
#2
|
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: 29th March 2024 - 07:13 AM |