Click here to Skip to main content
13,868,581 members

Web Development

 
GeneralRe: Launch a form from local HDD Pin
_Flaviu27-Nov-18 7:22
member_Flaviu27-Nov-18 7:22 
GeneralRe: Launch a form from local HDD Pin
F-ES Sitecore27-Nov-18 7:33
mveF-ES Sitecore27-Nov-18 7:33 
GeneralRe: Launch a form from local HDD Pin
_Flaviu27-Nov-18 9:47
member_Flaviu27-Nov-18 9:47 
GeneralRe: Launch a form from local HDD Pin
F-ES Sitecore28-Nov-18 0:11
mveF-ES Sitecore28-Nov-18 0:11 
GeneralRe: Launch a form from local HDD Pin
_Flaviu28-Nov-18 0:22
member_Flaviu28-Nov-18 0:22 
GeneralRe: Launch a form from local HDD Pin
F-ES Sitecore28-Nov-18 0:38
mveF-ES Sitecore28-Nov-18 0:38 
GeneralRe: Launch a form from local HDD Pin
_Flaviu29-Nov-18 3:27
member_Flaviu29-Nov-18 3:27 
Questionlearning CSS Pin
_Q12_20-Nov-18 12:52
member_Q12_20-Nov-18 12:52 
I am learning CSS so dont shoot me with bad attitude.

In this code I am learning how to use sprite in CSS.
<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
	<style>
	body {background-color: powderblue;}
	#img1{
		background: url("testCSS.png") 0px 0px;		/*select which sprite to show;*/
		background-repeat: no-repeat;
		width: 60; height: 30px; 					/*resize border for image;*/
		background-size: 100px 50px;				/*resize image (best not to resize);*/
		}
	#img2{
		position: absolute;
		width: 25px; height: 25px; 				    /*resize border for image;*/
		left: 50px;  top: 50px;

        background: url("testCSS.png") -0px -25px;
		background-size: 100px 50px;				/*resize image (best not to resize);*/
		}
	#img3{
		position: absolute;
		width: 25px; height: 25px;
		left: 100px;  top: 100px;

		background-image: url("testCSS.png") ;
		background-size: 100px 50px;
		background-position: 75px 25px;
        }
	.square{
		position: absolute;
        width: 30px; height: 30px; ;
		left: 150px;  top: 150px;

        Background-color: #FF0000;
    }
   	</style>

</head>
<body>
	<img id="img1" src="test.png" > hi1</img>
	<img id="img2" src="test.png" > hi2</img>
	<img id="img3" src="test.png" > hi3</img>

	<div class="square">box</div>
</body>



</html>


I have a real problem to resolve, that's why I have to learn this CSS ?language?helper?
I have 1350 images to load into a single plain html page. The images, i made them as small as I could 150x120; barely to distinguish the message. And is taking 20 seconds until the page is finished loading. At higher resolution per image, higher load time!
I want the page to load close to instant.
It's not for a public website, its a local file only for me.
And I google-find that there are some ways to shorten load time.
The best one that suit my case are the sprites. I read about them all day. And this code is my practice on this thing. But I am worried about it. Probably i am so new to this thing.

This code here; every img# instance i have here, is loading !A NEW! png image?
If it does, it is loading a ton of images and it beats the purpose of using sprites.
I want to load one time the sprite image(in a string variable) and reference it in CSS code.
Again, i am new to this thing. Please make some sense for me.
Thank you!
#img1{
    background: url("testCSS.png") 0px 0px;
    }
#img2{
    background: url("testCSS.png") -0px -25px;
    }
#img3{
    background-image: url("testCSS.png") ;
    }

AnswerRe: learning CSS Pin
Nathan Minier21-Nov-18 2:10
professionalNathan Minier21-Nov-18 2:10 
GeneralRe: learning CSS Pin
_Q12_21-Nov-18 4:45
member_Q12_21-Nov-18 4:45 
AnswerRe: learning CSS Pin
W Balboos11-Dec-18 9:30
mveW Balboos11-Dec-18 9:30 
GeneralRe: learning CSS Pin
_Q12_11-Dec-18 15:45
member_Q12_11-Dec-18 15:45 
GeneralRe: learning CSS Pin
W Balboos12-Dec-18 1:53
mveW Balboos12-Dec-18 1:53 
QuestionDomain Masking (SOLVED) Pin
samflex16-Nov-18 5:00
membersamflex16-Nov-18 5:00 
AnswerRe: Domain Masking Pin
Richard Deeming16-Nov-18 7:43
mveRichard Deeming16-Nov-18 7:43 
GeneralRe: Domain Masking Pin
samflex16-Nov-18 8:29
membersamflex16-Nov-18 8:29 
QuestionUnderstanding (or not) Sessions and session_regenerate_id Pin
MikeD 29-Nov-18 8:16
memberMikeD 29-Nov-18 8:16 
QuestionSystem.net.http.httprequestexception Error while copying content to a stream' on 401 API Response Pin
BalasubramanianK8-Nov-18 0:30
memberBalasubramanianK8-Nov-18 0:30 
AnswerRe: System.net.http.httprequestexception Error while copying content to a stream' on 401 API Response Pin
Nathan Minier14-Nov-18 4:25
professionalNathan Minier14-Nov-18 4:25 
NewsMessage Closed Pin
7-Nov-18 12:15
memberBowser Films7-Nov-18 12:15 
QuestionOraOLEDB error '80040e4b' Pin
samflex5-Nov-18 11:31
membersamflex5-Nov-18 11:31 
QuestionWhy so many style sheets use a instead of button? Pin
maze326-Oct-18 7:27
professionalmaze326-Oct-18 7:27 
AnswerRe: Why so many style sheets use a instead of button? Pin
Eddy Vluggen26-Oct-18 8:08
mveEddy Vluggen26-Oct-18 8:08 
GeneralMessage Closed Pin
24-Oct-18 21:12
memberjain sah24-Oct-18 21:12 
GeneralMessage Closed Pin
24-Oct-18 21:12
memberjain sah24-Oct-18 21:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Advertise | Privacy | Cookies | Terms of Service
Web02 | 2.8.190214.1 | Last Updated 18 Feb 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid