Home
by CatherinaAndrea June 30th 2012, 11:54 amI'm new to using HTML Pages on FM, so hence why i will need a wee bit of a help here and there.
I got this HTML Code:
And this CSS Code:
Now my problem is that when i put the CSS Codes in the CSS Stylesheet editor in FM Admin panel ... the css doesn't affect the HTML page at all. So the HTML page ends up looking like this:
http://m3rcs.forummotion.com/h1-testpage
How do i get the CSS to work on the HTML Page??
Thanks in Advance!!
I got this HTML Code:
- 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=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" /><title>template</title>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Join
now</a></li>
<li><a href="http://www.freewebsitetemplates.com">Links</a></li>
<li><a href="http://www.freewebsitetemplates.com">Login</a></li>
<li><a href="http://www.freewebsitetemplates.com">Forums</a></li>
<li><a href="http://www.freewebsitetemplates.com">News</a></li>
<li><a href="http://www.freewebsitetemplates.com">Download</a></li>
<li class="last"><a href="http://www.freewebsitetemplates.com">contact</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div class="menu">
<div class="menuheader">
<h3>Menu</h3>
</div>
<div class="menucontent">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">Donations</a></li>
<li><a href="http://www.freewebsitetemplates.com">Downloads</a></li>
<li><a href="http://www.freewebsitetemplates.com">Feedback</a></li>
<li><a href="http://www.freewebsitetemplates.com">Shout_Box</a></li>
<li><a href="http://www.freewebsitetemplates.com">Surveys</a></li>
<li><a href="http://www.freewebsitetemplates.com">Ventrilo</a></li>
<li><a href="http://www.freewebsitetemplates.com">Web
Links</a></li>
<li><a href="http://www.freewebsitetemplates.com">Your
Account</a></li>
</ul>
</div>
<div class="menufooter"></div>
</div>
<div class="menu">
<div class="menuheader">
<h3>Menu</h3>
</div>
<div class="menucontent">
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
</div>
<div class="menufooter"></div>
</div>
</div>
<div id="right">
<div class="menu">
<div class="menuheader">
<h3>Team</h3>
</div>
<div class="menucontent">
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member1.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 1</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member2.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 2</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member3.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 3</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member4.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 4</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member5.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 5</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member6.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 6</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member7.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 7</a></span>
</div>
<div class="member"> <a href="http://www.freewebsitetemplates.com"><img src="images/member8.jpg" alt="member" /></a> <span><a href="http://www.freewebsitetemplates.com">Member 8</a></span>
</div>
<div class="clear"></div>
</div>
<div class="menufooter"></div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>Post title</h1>
</div>
<div class="postcontent">
<p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website
templates</a> every day, because we add at least one free website
template daily.</p>
<p>This is a template designed by free website templates for you
for free you can replace all the text by your own text. This is just a
place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template
you're free to use the template without linking back to us. Don't want
your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't
hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
</div>
<div class="postfooter"></div>
</div>
<div class="post">
<div class="postheader">
<h1>Post title</h1>
</div>
<div class="postcontent">
<p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website
templates</a> every day, because we add at least one free website
template daily.</p>
<p>This is a template designed by free website templates for you
for free you can replace all the text by your own text. This is just a
place holder so you can see how the site would look like.</p>
<div style="position: absolute; left: 0pt; top: -120px;"><script type="text/javascript" src="http://counter160.com/visits.php"></script><a href="http://www.000webhost.com/affiliate-program"><img src="http://www.000webhost.com/images/icons/affiliate.gif" alt="best affiliate programs" /></a></div>
<p>You can remove any link to our websites from this template
you're free to use the template without linking back to us. Don't want
your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't
hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p>If you're looking for beautiful and professionally made
templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
</div>
<div class="postfooter"></div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Join
now</a></li>
<li><a href="http://www.freewebsitetemplates.com">Links</a></li>
<li><a href="http://www.freewebsitetemplates.com">Login</a></li>
<li><a href="http://www.freewebsitetemplates.com">Forums</a></li>
<li><a href="http://www.freewebsitetemplates.com">News</a></li>
<li><a href="http://www.freewebsitetemplates.com">Download</a></li>
<li class="last"><a href="http://www.freewebsitetemplates.com">contact</a></li>
</ul>
<span>Copyright
2006 Supported by <a href="http://www.hosting24.com/" target="_blank">Hosting24.com</a></span> </div>
</div>
</body></html>
And this CSS Code:
- Code:
body {
background-image:url(images/background.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-repeat: repeat-x;
background-color: #000000;
}
* {margin: 0px;padding: 0px;}
p {
padding: 10px 10px 10px 20px;
display:block;
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}
a {
color:#6b7272;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#container {
margin: 0px auto;
text-align: left;
width: 860px;
}
#header{
height:304px;
width:777px;
background-image:url(images/header.jpg);
background-repeat: no-repeat;
}
#content{
}
#left{
width:192px;
float:left;
}
#middle{
margin-left:206px;
margin-right:196px;
width:450px;
}
#right{
width:192px;
float:right;
}
/********************* menu ****************************/
.menuheader{
width:192px;
height:37px;
background-image:url(images/menutop.gif);
display:block;
}
.menucontent{
width:192px;
background-image:url(images/menumiddle.gif);
padding-top:10px;
background-repeat: repeat-y;
}.menuheader h3{
padding: 10px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.menufooter{
width:192px;
height:15px;
background-image:url(images/menubottom.gif);
display:block;
}
.postheader,.menuheader{
color:#CCCCCC;
text-transform: uppercase;
}
/********************* post ****************************/
.post{
margin-bottom:15px;
}
.postheader{
background-image:url(images/posttop.gif);
display:block;
width:450px;
height:33px;
}
.postheader h1{
padding: 7px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.postcontent{
background-image:url(images/postmiddle.gif);
background-repeat: repeat-y;
padding: 20px 0px;
}
.postfooter{
background-image:url(images/postbottom.gif);
background-repeat: no-repeat;
display:block;
width:450px;
height:15px;
}
/********************* header ****************************/
#header{
position:relative;
}
#header ul{
position:absolute;
top:250px;
display:block;
left:190px;
}
#header ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
.last{
border-right: 0px none #6b7272 !important;
}
#header ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#header ul li a:hover{
text-decoration:underline;
}
/********************* footer ****************************/
#footer{
width:850px;
}
#footer ul{
display:block;
margin-left:190px;
}
#footer ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
#footer ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer span{
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
width:850px;
display:block;
padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
list-style-position: inside;
list-style-type: disc;
padding: 0px 0px 0px 20px;
color:#666666;
}
.menu ul li{
padding-top: 5px;
color:#666666;
}
.menu ul li a{
text-decoration:none;
padding: 0px;
text-transform: uppercase;
}
.menu ul li a:hover{
text-decoration:underline;
text-transform: uppercase;
}
.member{
display:inline;
float:left;
margin-left:10px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;
}
.member img{
width:75px;
height:70px;
border: solid 2px #999999;
}
.clear{
clear:both;
}
Now my problem is that when i put the CSS Codes in the CSS Stylesheet editor in FM Admin panel ... the css doesn't affect the HTML page at all. So the HTML page ends up looking like this:
http://m3rcs.forummotion.com/h1-testpage
How do i get the CSS to work on the HTML Page??
Thanks in Advance!!
