Hello all, I was hoping someone would be kind enough to give me some advice.
I am trying to learn how to create websites and am picking bits and bobs up along the way. I have so far been creating my design in Photoshop, then slicing and exporting the HTML and images. I know that this only gives me a basic HTML, and I appreciate that it is stopping me from learning the code, but I have found that it has given me a good place to start as watching tutorials of folk just typing code into a blank page was very daunting. I spent ages reading posts and struggled to make sense of it, but starting with something on the page has meant that I can change, add and start to learn, but it does mean I get stuck at the basics. As I am learning bits and watching/reading more tutorials I am beginning to write my own code, but its early days.
I have been trying to learn how to use CSS sprites, and although I understand the concept and how to make the actual sprite, I am struggling to get this to work within the HTML code. I have read numerous tutorials, but they all focus on the CSS and not how to implement it into the HTML. I realise that this is very basic, but as I said I am new and just learning so please be gentle - I am trying my best.
I have created a simple 600px x 600px image and used a sprite generator (just for quickness, I do understand how its made), and this generator also spits out the lines for the HTML. But its not working - none of the images load, and I don't know what I am doing wrong. I have pasted in both the CSS and HTML below and would really appreciate it if someone could point me in the right direction. I am sure to you experienced guys it will be very obvious.....
CSS
}
.sprites {
background-image : (images/world.png);
background-color : transparent;
background-repeat : no-repeat;
}
#img1_jpg {
height : 300px;
width : 300px;
background-position : -0px -0px;
}
#img2_jpg {
height : 300px;
width : 300px;
background-position : -300px -0px;
}
#img3_jpg {
height : 300px;
width : 300px;
background-position : -600px -0px;
}
#img4_jpg {
height : 300px;
width : 300px;
background-position : -900px -0px;
}
HTML
<html>
<head>
<title>Untitled-10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="images/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="600" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="sprites" id="img1_jpg"></div> </td>
<td>
<div class="sprites" id="img2_jpg"></div></td>
</tr>
<tr>
<td>
<div class="sprites" id="img3_jpg"></div></td>
<td>
<div class="sprites" id="img4_jpg"></div></td>
</tr>
</table>
</body>
</html>
I am trying to learn how to create websites and am picking bits and bobs up along the way. I have so far been creating my design in Photoshop, then slicing and exporting the HTML and images. I know that this only gives me a basic HTML, and I appreciate that it is stopping me from learning the code, but I have found that it has given me a good place to start as watching tutorials of folk just typing code into a blank page was very daunting. I spent ages reading posts and struggled to make sense of it, but starting with something on the page has meant that I can change, add and start to learn, but it does mean I get stuck at the basics. As I am learning bits and watching/reading more tutorials I am beginning to write my own code, but its early days.
I have been trying to learn how to use CSS sprites, and although I understand the concept and how to make the actual sprite, I am struggling to get this to work within the HTML code. I have read numerous tutorials, but they all focus on the CSS and not how to implement it into the HTML. I realise that this is very basic, but as I said I am new and just learning so please be gentle - I am trying my best.
I have created a simple 600px x 600px image and used a sprite generator (just for quickness, I do understand how its made), and this generator also spits out the lines for the HTML. But its not working - none of the images load, and I don't know what I am doing wrong. I have pasted in both the CSS and HTML below and would really appreciate it if someone could point me in the right direction. I am sure to you experienced guys it will be very obvious.....
CSS
}
.sprites {
background-image : (images/world.png);
background-color : transparent;
background-repeat : no-repeat;
}
#img1_jpg {
height : 300px;
width : 300px;
background-position : -0px -0px;
}
#img2_jpg {
height : 300px;
width : 300px;
background-position : -300px -0px;
}
#img3_jpg {
height : 300px;
width : 300px;
background-position : -600px -0px;
}
#img4_jpg {
height : 300px;
width : 300px;
background-position : -900px -0px;
}
HTML
<html>
<head>
<title>Untitled-10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="images/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="600" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="sprites" id="img1_jpg"></div> </td>
<td>
<div class="sprites" id="img2_jpg"></div></td>
</tr>
<tr>
<td>
<div class="sprites" id="img3_jpg"></div></td>
<td>
<div class="sprites" id="img4_jpg"></div></td>
</tr>
</table>
</body>
</html>
