The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> need help with css sprites
falcon
post Apr 19 2017, 10:52 PM
Post #1


Newbie
*

Group: Members
Posts: 12
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; }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
falcon
post Aug 12 2017, 01:36 AM
Post #2


Newbie
*

Group: Members
Posts: 12
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 &amp; 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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   Thank You for the code, will try it. Will respond ...   Apr 20 2017, 09:48 PM
falcon   Thank You for the code, will try it. Will respond...   Apr 22 2017, 08:54 PM
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


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2017 - 03:34 PM