I am new to XOOPS and designed a new homepage for www.marketagenda.com with html and CSS. I am trying to implement it in XOOPS. I don't want to change the main styles.css, because the rest of the site needs to stay the same. I am only changing the homepage, so I created a new CSS file named index.css and put it in the same directory as styles.css
I inserted the html into the module, and when I preview it, some of the text is not where it is supposed to be. Can anyone tell me what the problem might be? I would really appreciate your help.
here is the html & CSS code for reference:
<!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" />
<title>Untitled Document</title>
</head>
<link href="http:/www.marketagenda.com/themes/market/index.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-image: url(images/bluebackground.jpg);
background-repeat: repeat-x;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
.style2 {
font-family: Arial;
font-weight: bold;
font-size: 14px;
color: #009900;
}
.style3 {
font-family: Arial;
font-size: 11px;
}
.style5 {font-size: 11px}
.style10 {color: #0033CC}
.style11 {
font-size: 10px;
color: #009900;
font-family: Arial;
font-weight: bold;
}
-->
</style></head>
<body>
<div class="container" id="container">
<div class="login" id="login">Registered Users Login: <br>
<!-- saved from url=(0022)http://internet.e-mail -->
<br>
<form style="margin-top: 0px;" action="<{$xoops_url}>/user.php" method="post">
<span style="font-size: 9px">
<input name="uname" type="text" class="inputBox" style='width:130px' onFocus='if(this.value == "Username: ") this.value=""' value="Username" size="12" maxlength="25"/>
<br>
</span>
<input name="pass" type="password" class="inputBox" style='width:130px' onFocus='if(this.value == "Password: ") this.value=""' value="password" size="12" maxlength="32" />
<br/>
<br>
<a href="<{$xoops_url}>/user.php"><img src="images/login_button.jpg" width="37" height="17" border="0"></a>
<input type="checkbox" name="rememberme" value="On" class ="formButton" />
Remember me <a href="<{$xoops_url}>/user.php"></a><br>
<input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />
<input type="hidden" name="op" value="login" />
<br>
<a href="http://www.marketagenda.com/user.php#lost">Lost Password?</a><br>
<a href="https://www.marketagenda.com/register_ep.php">Event Planners Register Here</a><br>
<br>
<a href="https://www.marketagenda.com/register_ep.php"></a>
</form>
</div>
<div class="center" id="center"><br>
<br>
<br>
<br>
<br>
<span class="style2"><br>
Wall Street’s FREE comprehensive<br>
source for financial event information:</span><br>
<br>
<div class="bullettext style5" id="bullettext"><img src="images/greenbullet.jpg" width="8" height="8"> Road Shows<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Conference Calls<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Conference & Tradeshow Schedules<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Conference Calls & Webcasts<br>
<img src="images/greenbullet.jpg" width="8" height="8"> CEO & Analyst Interviews<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Analyst Meetings<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Research Reports<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Breaking News<br>
<img src="images/greenbullet.jpg" width="8" height="8"> Investment Tools</div>
<br>
<br>
<br>
<span class="style2"> How does marketAgenda work?<br>
<br>
</span>1. Event planners enter data on upcoming
financial<br>
events for public companies including:
road shows, tradeshows, conferences, webcasts,
conference<br>
calls, CEO interviews, IPOS, filings,
earnings releases,<br>
analyst meetings, stock splits,
and stock dividends.
<p>2. Our system matches events to your investment<br>
preferences and sends a custom e-mail newsletter<br>
to you. <br>
<br>
3. You click on events in the newsletter to find out<br>
more details. You can also search
our
event database<br>
by industry, location, market
cap or security type.</p>
<br>
<span class="style3"><br>
</span></div>
<div class="rightcolumn" id="rightcolumn">Find out when<br>
companies are <br>
having financial <br>
events in your<br>
area with our<br>
web calendar,<br>
which provides<br>
financial event <br>
data matched to <br>
your preferences.</div>
<div class="calendartext" id="calendartext"><span class="style10"><a href="https://www.marketagenda.com/register_ep.php">Click here</a></span> to view our<br>
<span class="style11">WEB CALENDAR</span></div>
<div class="footer" id="footer">Bookstore | Recommend Us | Partners | Advertise | Contact Us | Privacy | Terms of Use</div>
</div>
</body>
</html>
Here is the CSS code:
#container {
text-align: center;
height: 600px;
width: 800px;
background-image: url(Images/index_background.jpg);
padding: auto;
background-repeat: no-repeat;
margin: auto;
}
#login {
width: 257px;
float: left;
height: 160px;
padding-top: 400px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
font-family: Arial;
font-size: 11px;
color: #FFFFFF;
text-align: left;
}
#center {
float: left;
width: 280px;
height: 556px;
text-align: left;
padding-left: 30px;
font-family: Arial;
font-size: 11px;
padding-top: 7px;
}
#bullettext {
padding-left: 15px;
font-family: Arial;
font-size: 11px;
line-height: normal;
}
#rightcolumn {
float: left;
height: 140px;
padding-top: 405px;
font-family: Arial;
font-size: 11px;
text-align: left;
padding-left: 8px;
}
#calendartext {
float: left;
padding-top: 500px;
font-family: Arial;
font-size: 10px;
clear: right;
}
#calendartext a:link {
color: #3366cc;
text-decoration: underline;
}
#calendartext a:hover {
color: #009900;
text-decoration: underline;
}
#footer {
height: 20px;
float: left;
width: 488px;
font-family: Arial;
font-size: 11px;
text-align: left;
padding-left: 312px;
padding-top: 5px;
clear: both;
}
