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
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
CODE
<!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>
25 Mar, 2008 - 10:17 AM
| 