2 Replies - 754 Views - Last Post: 25 March 2008 - 11:43 AM

#1 revolution14  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 11-December 07

Should this Html code be written in css?

Post icon  Posted 25 March 2008 - 11:17 AM

Hello there!

I have a basic understanding of html and i have created basic websites however as part of a course i am doing i now am learning css. Basically i need to create a web site which uses an external css file however i am somewhat confused as to what content should be scripted in the css file.

The Screenshot you can see below is the splash page to my website. It consits of 4 images these are

Posted Image


1. The black border
2. The main In The Know Logo
3. A rollover image which changes the colour of the logo
4. The enter button (is inserted as an image because a custom font is used)

All these images are layerd ontop of eachother using absolute positioning and zindex.


Their are two hyperlinks, The main logo and the enter button are linked to page 2.



Now for my question?

Because this first page uses only images, is there really much use for a style sheet? I am having difficulty understanding where to draw the line between the Xhtml file and the css file! Should i purely use the Css file for formatting text? Please help!!

below is my Xhtml code for the first page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>In The Know</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style2 {
	font-size: 18px;
	font-family: "Courier New", Courier, monospace;
	color: #000000;
	font-weight: bold;
}
#apDiv1 {
	position:absolute;
	left:50px;
	top:30px;
	width:1054px;
	height:649px;
	z-index:3;
}
#apDiv2 {
	position:absolute;
	left:12px;
	top:70px;
	width:806px;
	height:428px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:2px;
	top:2px;
	width:953px;
	height:596px;
	z-index:1;
	visibility: visible;
}
#apDiv4 {
	position:absolute;
	left:196px;
	top:200px;
	width:1111px;
	height:629px;
	z-index:3;
	visibility: visible;
}
body {
	background-color: #FFFFFF;
}
#apDiv5 {
	position:absolute;
	left:764px;
	top:282px;
	width:116px;
	height:164px;
	z-index:4;
	visibility: visible;
}
#apDiv6 {
	position:absolute;
	left:389px;
	top:433px;
	width:50px;
	height:13px;
	z-index:4;
	visibility: visible;
}
#apDiv7 {
	position:absolute;
	left:74px;
	top:36px;
	width:807px;
	height:506px;
	z-index:5;
	visibility: visible;
}
#apDiv8 {
	position:absolute;
	left:170px;
	top:80px;
	width:604px;
	height:392px;
	z-index:6;
	visibility: visible;
}
#apDiv9 {
	position:absolute;
	left:458px;
	top:481px;
	width:50px;
	height:11px;
	z-index:7;
	visibility: visible;
}
-->
</style>
</head>

<body onload="MM_preloadImages('file:///C|/Documents and Settings/Administrator/My Documents/in the know/logos etc/photoshop files/logo final5 copy.jpg','../../My Documents/in the know/Website/Main Logo 2.jpg')">
<div id="apDiv6"><a href="file:///C|/Documents and Settings/Administrator/My Documents/Untitled-2.html"><img src="file:///C|/Documents and Settings/Administrator/My Documents/in the know/logos etc/final logo design/Enter.jpg" alt="Click Here To Enter" width="48" height="9" /></a></div>
<div id="apDiv7"><img src="../../My Documents/in the know/Website/bordermain.JPG" width="800" height="500" align="absmiddle" /></div>
<div id="apDiv8"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LOGO','','../../My Documents/in the know/Website/Main Logo 2.jpg',1)"><img src="../../My Documents/in the know/Website/Main Logo 1.jpg" alt="Click Here To Enter" name="LOGO" width="600" height="400" border="0" id="LOGO" /></a></div>
<div id="apDiv9"><img src="../../My Documents/in the know/Website/EnterbuttonMain.jpg" alt="Click Here To Enter" width="48" height="9" /></div>
</body>

</html>




Is This A Good Question/Topic? 0
  • +

Replies To: Should this Html code be written in css?

#2 supersloth  Icon User is offline

  • serial frotteur - RUDEST MEMBER ON D.I.C.
  • member icon


Reputation: 4496
  • View blog
  • Posts: 28,404
  • Joined: 21-March 01

Re: Should this Html code be written in css?

Posted 25 March 2008 - 11:40 AM

all of this:

<style type="text/css">
<!--
.style2 {
	font-size: 18px;
	font-family: "Courier New", Courier, monospace;
	color: #000000;
	font-weight: bold;
}
#apDiv1 {
	position:absolute;
	left:50px;
	top:30px;
	width:1054px;
	height:649px;
	z-index:3;
}
#apDiv2 {
	position:absolute;
	left:12px;
	top:70px;
	width:806px;
	height:428px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:2px;
	top:2px;
	width:953px;
	height:596px;
	z-index:1;
	visibility: visible;
}
#apDiv4 {
	position:absolute;
	left:196px;
	top:200px;
	width:1111px;
	height:629px;
	z-index:3;
	visibility: visible;
}
body {
	background-color: #FFFFFF;
}
#apDiv5 {
	position:absolute;
	left:764px;
	top:282px;
	width:116px;
	height:164px;
	z-index:4;
	visibility: visible;
}
#apDiv6 {
	position:absolute;
	left:389px;
	top:433px;
	width:50px;
	height:13px;
	z-index:4;
	visibility: visible;
}
#apDiv7 {
	position:absolute;
	left:74px;
	top:36px;
	width:807px;
	height:506px;
	z-index:5;
	visibility: visible;
}
#apDiv8 {
	position:absolute;
	left:170px;
	top:80px;
	width:604px;
	height:392px;
	z-index:6;
	visibility: visible;
}
#apDiv9 {
	position:absolute;
	left:458px;
	top:481px;
	width:50px;
	height:11px;
	z-index:7;
	visibility: visible;
}
-->
</style>


is your css, not your xhtml, you can include that in an external stylesheet. it will do everything exactly the same way as it does now, the main advantage however is that it helps to clearly define your content and how you style your content. this wont be noticeable on such a small page, but in a big application it is very helpful.
Was This Post Helpful? 0
  • +
  • -

#3 revolution14  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 11-December 07

Re: Should this Html code be written in css?

Posted 25 March 2008 - 11:43 AM

Rite ok i think i understand now! i understand the benefits of having external style sheets as it is easy to make changes etc. Thanks for your Quick reply.


Saved me some time twiddling my thumbs and messing around on youtube


:D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1