Monday, September 19, 2005


This has become a rather frustrating exercise. The site is up, but it's not quite as I had hoped.

The adress is: www.itp.nyu.edu/~tra225/

The site should look something like the above image, but depending on your browser, it might look rather different. This was a bit of a shock. I had taken a lot of time to figure out all the code to create alignment and positioning, only to see it completely ignored by Firefox (see image below). It looks perfect on Explorer 5.2 for Mac (yay!), and almost perfect on Explorer 6.0 on the pc.



I think that my problems arise from my use of "absolute" values in my CSS. Not really sure, it's just a guess.

I also failed to figure out how to create text as links without html placing an underline under the type. Another odd thing in my code is that I don't have anything in the "body", all my stuff is in the header tags. The site still works, but not using the body tags might make it less versatile, especially if I wanted to replace the images with text.

Here is the code for the site:

HTML:

title>TA's Portfolio /title>
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
link href="two.css" rel="stylesheet" type="text/css">
/head>
body>
/body>
h1>Terence Arjo/h1>
h2>Images from California/h2>
h3>_/img>_/h3>
h5>_a href="page2.html"_next_/a>_/h5>
h6>to get to arjodesign.com click _a href="http://www.arjodesign.com">here_/a>_/h6>

CSS:

body { background-color: #FFFFFF;
background-image: url(background-image-2.gif);
background-repeat: no-repeat;
background-position: 60px 50px;
}

a {
color: #660000;
font: normal 14px Georgia, "Times New Roman", Times, serif;
}


h1, {
color: #000033;
font: normal 24px Georgia, "Times New Roman", Times, serif;
position: absolute;
left: 85px;
top: 65px;
}

h2, {
color: #1D9CD1;
font: normal 20px Georgia, "Times New Roman", Times, serif;
position: absolute;
left: 420px;
top: 65px;
}

h3, {
position: absolute;
left: 200px;
top: 130px;
}

h4, {
color: #660000;
left: 200px;
top: 400px;
position: absolute;
}
h5, {
color: #660000;
left: 492px;
top: 400px;
position: absolute;
}

h6, {
color: 000000;
left: 492px;
top: 455px;
position: absolute;