No replies
xxParfait
Offline
newbie
Canada
Last seen: 12 years 51 weeks ago
Canada
Timezone: GMT-4
Joined: 2009-10-11
Posts: 1
Points: 1

Hello!

I thank you in advanced for all your help! I have created a layout with CSS and was trying to arrange my Main Content Box over the background image which I had no problem positioning, unfortunately I can't figure out why it is linking to the wrong page. (It is linking to my updates page although I have specifically marked my main.html to show up.

Layout HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="mistyle.css" />
 
</head>
 
<body>
<div class="nav">
<img src="navigation1.png">
</div>
 
<div class="header">
<img src="header1.png">
</div>
 
<div class="main">
<img src="main1.png">
</div>
 
 
<div class="updates">
<img src="updates1.png">
</div>
 
<div class="main2">
<iframe src="main.html" name="main" width="431" height="291" frameborder="0" scrolling="no"></iframe>
</div>
 
<div class="updates2">
<iframe src="updates.html" name="updates" width="449" height="70" frameborder="0" scrolling="no"></iframe>
</div>
 
 
</body>
</html>

My Layout CSS

body 
{
	background-color:#1c1a25;
	width: 630px;
	height: 567px;
	font-style : normal;
	font-weight : normal;
	font-size : 8pt;
	font-family : verdana;
	color:#FFFFFF;
	text-decoration : none;
}
 
a
{
	color: #000000;
	text-decoration: none;
}
 
a:link
{
	text-decoration: underline;
	color:#b3529a;}
}
 
a:visited
{
	text-decoration: underline;
	color:#6466ca;}
}
 
a:active
{
	text-decoration: underline;
	color:#b3529a;
}
 
a:hover
{
	text-decoration: underline;
	color:#f9a4e1
}
 
 
div.header
{
	background: no-repeat;
	margin-top: -567px;
	margin-left: 430px;
}
 
 
div.nav
{
	background: no-repeat;
	margin-top: 20px;
	margin-left: 300px;
}
 
div.main
{
	background: no-repeat;
	margin-top: 10px;
	margin-left: 430px;
 
}
 
div.main2
{
	position: absolute;
	margin-top: -450px;
	margin-left: 451px;
	width: 431px;
	height: 291px;
	overflow:inherit;
 
}
 
div.updates
{
	background: no-repeat;
	margin-top: 10px;
	margin-left: 435px;
 
}
 
div.updates2
{
	position: absolute;
	margin-top: -89px;
	margin-left: 451px;
	width: 449px;
	height: 73px;
	overflow:inherit;
}

My Main Page

<html>
<head>
 
<link rel="stylesheet" type="text/css" href="textstyle.css" />
 
</head>
 
<body>
 
Welcome to <b>Magically Insane</b>; my personal site!
<p>
Here you will find out more about myself, and a collection of the work that I do!
 
</body>
</html>

My Text CSS

body 
{
	background-color:#494d5b;
	font-style : normal;
	font-weight : normal;
	font-size : 8pt;
	font-family : verdana;
	color:#FFFFFF;
	text-decoration : none;
}
 
a
{
	color: #000000;
	text-decoration: none;
}
 
a:link
{
	text-decoration: underline;
	color:#b3529a;}
}
 
a:visited
{
	text-decoration: underline;
	color:#6466ca;}
}
 
a:active
{
	text-decoration: underline;
	color:#b3529a;
}
 
a:hover
{
	text-decoration: underline;
	color:#f9a4e1
}

What is showing up: