The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> need help with css sprites
falcon
post Apr 19 2017, 10:52 PM
Post #1


Newbie
*

Group: Members
Posts: 10
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
Darin McGrew
post Apr 20 2017, 12:19 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,257
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2017, 06:10 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,747
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 20 2017, 10:15 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,702
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 20 2017, 01:10 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 20 2017, 10:29 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,702
Joined: 10-August 06
Member No.: 7



QUOTE(falcon @ Apr 20 2017, 05:52 AM) *

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. unsure.gif

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; }




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 20 2017, 09:48 PM
Post #6


Newbie
*

Group: Members
Posts: 10
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 22 2017, 08:54 PM
Post #7


Newbie
*

Group: Members
Posts: 10
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>&nbsp;&nbsp;&nbsp;<a href="http://freetutorials.name/Reference1/ftp_client.html#Reviews">FTP Reviews</a>&nbsp;&nbsp;&nbsp;<a href="html_tutorials.html">HTML Tutorials</a>&nbsp;&nbsp;&nbsp;<a href="http://freetutorials.name/Reference1/Web%20Site%20SEO.html">WebSite SEO</a><br>
    <a href="html%20editors.html">HTML Editors</a>&nbsp;&nbsp;&nbsp;<a href="DHTML%20tutorials.html">DHTML Tutorials</a>&nbsp;&nbsp;&nbsp;<a href="Java_tutorials.html">Java tutorials</a>&nbsp;&nbsp;&nbsp;<a href="Design%26Photo_tutorials.html">Design &amp; Photo</a></font><br><br></center>
</div><br />
<font size="+2"><strong>Introduction:</strong></font><font size="+1">&nbsp;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&nbsp;&nbsp;&nbsp;Click BlueHost banner (below) for more information</font>&nbsp;&nbsp;&nbsp;<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%">&nbsp;<b>PageBreeze Editor Screenshots</b><br>
      <a href="http://www.pagebreeze.com/">PageBreeze Editor Download</a>&nbsp;&nbsp;&nbsp;</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%">&nbsp;<img src="../Images/PageBreeze.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze File.png" width="90%" height="90%" align="right" alt="Editor"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 1. PageBreeze</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 2. PageBreeze File</strong></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Edit.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze View.png" width="90%" height="90%" align="right" alt="Editor"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 3. PageBreeze Edit</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 4. PageBreeze View</strong></td>
    </tr>
    <tr>
      <td width="50%">&nbsp<img src="../Images/PageBreeze Insert.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Table.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 5. PageBreeze Insert</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 6. PageBreeze Table</strong></td>
    </tr>
        <tr>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Insert Graphic.png" width="90%" height="90%" align="left"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Insert Image.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 7. PageBreeze Insert Graphic</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 8. PageBreeze Insert Image</strong></td>
    </tr>
        <tr>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Insert Special Character.png" width="90%" height="90%" align="left"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Publish(FTP).png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 9. PageBreeze Insert Special Character</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 10. PageBreeze Publish(FTP)</strong></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Form.png" width="90%" height="90%" align="left"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Tools.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 11. PageBreeze Form</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 12. PageBreeze Tools</strong></td>
    </tr>
    
     <tr>
      <td width="50%">&nbsp<img src="../Images/PageBreeze Help.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze Help Topics.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 13. PageBreeze Help</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 14. PageBreeze Help Topics</strong></td>
    </tr>
         <tr>
      <td width="50%">&nbsp<img src="../Images/PageBreeze Visual Editor.png" width="90%" height="90%" align="left" alt="Editor"></td>
      <td width="50%">&nbsp;<img src="../Images/PageBreeze HTML Source.png" width="90%" height="90%" align="right"></td>
    </tr>
    <tr>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>fig. 15. PageBreeze Visual Editor</strong></td>
      <td width="50%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://freetutorials.name/Reference1/ftp_client.html#Reviews">FTP Reviews</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="html_tutorials.html">HTML Tutorials</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://freetutorials.name/Reference1/Web%20Site%20SEO.html">WebSite SEO</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="html editors.html">HTML Editors</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="DHTML tutorials.html">DHTML Tutorials</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="Java_tutorials.html">Java tutorials</a>&nbsp;&nbsp;|&nbsp;&nbsp;<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 &copy; 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 22 2017, 09:02 PM
Post #8


Newbie
*

Group: Members
Posts: 10
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;}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2017, 06:47 AM
Post #9


.
********

Group: WDG Moderators
Posts: 7,702
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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2017, 12:14 PM
Post #10


.
********

Group: WDG Moderators
Posts: 7,702
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 23 2017, 10:19 PM
Post #11


Newbie
*

Group: Members
Posts: 10
Joined: 30-August 14
Member No.: 21,482



QUOTE(Christian J @ Apr 23 2017, 09:14 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 24 2017, 08:24 PM
Post #12


Newbie
*

Group: Members
Posts: 10
Joined: 30-August 14
Member No.: 21,482



QUOTE(Christian J @ Apr 23 2017, 09:14 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 25 2017, 12:55 PM
Post #13


.
********

Group: WDG Moderators
Posts: 7,702
Joined: 10-August 06
Member No.: 7



It would be easier to understand your replies if you don't write inside the quoted text...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 26 2017, 06:03 PM
Post #14


.
********

Group: WDG Moderators
Posts: 7,702
Joined: 10-August 06
Member No.: 7



QUOTE(falcon @ Apr 25 2017, 03:24 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Apr 26 2017, 07:01 PM
Post #15


Newbie
*

Group: Members
Posts: 10
Joined: 30-August 14
Member No.: 21,482



QUOTE(Christian J @ Apr 26 2017, 04:03 PM) *

QUOTE(falcon @ Apr 25 2017, 03:24 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2017, 05:46 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,747
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Aug 9 2017, 12:23 AM
Post #17


Newbie
*

Group: Members
Posts: 10
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
falcon
post Aug 12 2017, 01:36 AM
Post #18


Newbie
*

Group: Members
Posts: 10
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

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

 



- Lo-Fi Version Time is now: 22nd October 2017 - 11:21 PM