Hey, sorry am having a bit of a play with using prototype for the first time.
Here is my sample code :
Obviously prototype is just prototype.
Now, the thing is, I have removed the padding/margin from all of the elements in the page, and if you mouseover/out them, they highlight or unhighlight. What I can't work out is, the space between the words.
Each space is put in because in the HTML I have line breaks etc but what I want to know is, where in html or css is it specified the size of a space / line break? If this was xml, I'd expect those words to be lined up into a single word, yet because it is xhtml, it automatically puts in spaces.
So, why, and how can I remove it without putting everything on one line?
Here is my sample code :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<!-- Pure.html to be used with Pure.css
By Craig Moore 18/1/2007 -->
<link rel=stylesheet href="pure.css" />
<script type="text/javascript" src="prototype.js"></script>
<script>
var MyPage = {
Init : function() {
// Does nothing yet
},
ActivateEffect : function(idOfItem) {
var items = $$(idOfItem);
for (counter = 0; counter < items.length; counter ++)
items[counter].setStyle("background : #f00; color : #fff;");
},
ResetEffect : function(idOfItem) {
var items = $$(idOfItem);
for (counter = 0; counter < items.length; counter ++)
items[counter].setStyle("background:#fff; color : #000;");
}
//$$("body").onload = initialise();
};
</script>
<title>Pure.html</title>
</head>
<body>
<div id="header" onMouseOver="MyPage.ActivateEffect('#header')" onMouseOut="MyPage.ResetEffect('#header')">header</div>
<div id="navigation" onMouseOver="MyPage.ActivateEffect('#navigation')" onMouseOut="MyPage.ResetEffect('#navigation')">navigation</div>
<div class="content" onMouseOver="MyPage.ActivateEffect('.content')" onMouseOut="MyPage.ResetEffect('.content')">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div id="footer" onMouseOver="MyPage.ActivateEffect('#footer')" onMouseOut="MyPage.ResetEffect('#footer')">footer</div>
</body>
</html>
Code:
/*
Pure.css for use with Pure.html
By Craig Moore 18/1/2007
*/
html {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
div {
display : inline;
margin: 0px;
padding: 0px;
}
a {
margin: 0px;
padding: 0px;
}Obviously prototype is just prototype.
Now, the thing is, I have removed the padding/margin from all of the elements in the page, and if you mouseover/out them, they highlight or unhighlight. What I can't work out is, the space between the words.
Each space is put in because in the HTML I have line breaks etc but what I want to know is, where in html or css is it specified the size of a space / line break? If this was xml, I'd expect those words to be lined up into a single word, yet because it is xhtml, it automatically puts in spaces.
So, why, and how can I remove it without putting everything on one line?