|
|
Posted by Gavin on 06/07/05 14:55
Please help me! I am pulling my hair out trying to learn this CSS thingy!!!!
Here my code below. The wrapper container should hold all other items on
the page. If I put a border around the wrapper box, its fine if the content
doesn't go below the bottem of the menu, but if it does, the wrapper doesn't
expand to fit. Please help.
Gavin.
Main Page:
<?php
$page = $_GET["page"];
$menu = $_GET["menu"];
if ($page == "")
{
$page="home";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>Lister Radio - The Voice of The Community, The Music Of Your
Life</TITLE>
<meta name="keywords" content="Lister, Radio, Lister Radio, Station,
Stevenage, Hospital, Lister Radio Station, Lister Hospital, FM, AM, LPFM,
LPAM, Voluntary, Music, Entertainment, Herts, Hertfordshire">
<meta name="description" content="Lister Radio is a voluntary service
supplying music and entertainment to the patients of the Lister Hospital in
Stevenage. We also broadcast on LPFM for the residential homes around the
area.">
<META NAME="Author" CONTENT="webmaster@listerradio.com">
<LINK HREF="misc/lister.css" REL="stylesheet" TYPE="text/css">
<SCRIPT src="misc/drop_down.js" type=text/JavaScript></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id=wrapper>
<div id=maincontent>
<?php include("inc/".$page.".php"); ?>
</div>
<div id=menubar>
<ul id="nav">
<li><a href="main.php">Home</a></li>
<li><a href="#">On Air >></a>
<ul>
<li><a href="#">Listen Online</a></li>
<li><a href="main.php?page=rslsch">Schedule</a></li>
<li><a href="main.php?page=bits">Bits N Pieces</a></li>
</ul>
</li>
<li><a href="main.php?page=donations">Donations</a></li>
<li><a href="#">News >></a>
<ul>
<li><a href="main.php?page=news/news04">News 2004</a></li>
<li><a href="main.php?page=news/news05">News 2005</a></li>
</ul>
</li>
<li><a href="main.php?page=events">Coming Events</a></li>
<li><a href="main.php?page=pevents">Past Events >></a>
<ul>
<li><a href="main.php?page=pevents/xmas">Christmas</a></li>
<li><a href="main.php?page=pevents/lions">Lions Firworks</a></li>
<li><a href="main.php?page=pevents/rsl2004">RSL 2004</a></li>
</ul>
</li>
<li><a href="/forum/" target="_blank">Forum</a></li>
<li><a href="main.php?page=mem">Membership</a></li>
<li><a href="main.php?page=funds">Fundraising</a></li>
<li><a href="main.php?page=links">Links</a></li>
<li><a href="#">About Us >></a>
<ul>
<li><a href="main.php?page=aboutus">Who we are</a></li>
<li><a href="main.php?page=mission">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Contact Us >></a>
<ul>
<li><a href="main.php?page=rslcontact">RSL Details</a></li>
<li><a href="main.php?page=contactus">General Contacts</a></li>
</ul>
</li>
</ul>
</div>
<div id="rightcol">
<h1><br>
<strong>Website News</strong></h1>
<p> <strong>11/04/05</strong><br>
Lister hits the air waves at 5pm today </p>
<p><strong>11/04/05</strong><br>
Website relaunched for the start of RSL 2005.</p>
<SCRIPT TYPE="text/javascript">
<!--
emailE=('webmaster@' + 'listerradio.com')
document.write('<A href="mailto:' + emailE + '">' + 'Webmaster' +
'<\/a>')
//-->
</script>
<br>
<br>
<!-- START OF ADDME LINK -->
<a href="http://www.addme.com"><img
src="http://www.addme.com/button2.gif"
alt="Search Engine Submission and Internet Marketing" width="88" height="31"
border="0"></a>
<!-- END OF ADDME LINK -->
</div>
<div id=titlebar> <img src="images/LRBar.gif" alt="LR Title Bar"
width="755" height="150" border="1">
</div>
</div>
</body>
</html>
CSS File:
#sched a:link, #sched a:active, #sched a:visited, #sched a {
text-decoration: none; color: #000000 }
#sched a:hover {
text-decoration: none;
color: #FFFFFF;
background-repeat: no-repeat;
}
#rightcol {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-small;
color: #0033FF;
text-decoration: none;
position: absolute;
width: 130px;
left: 0px;
top: 450px;
}
#rightcol h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
font-weight: bold;
color: #0000CC;
text-decoration: none;
}
body {
font-style: normal;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
text-align: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 130px;
border-bottom: 1px solid #ccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 129px;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover {
color: #E2144A;
background: #f9f9f9;
} /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul {
display: block;
top: 0px;
} /* The magic */
h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
color: #000000;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #999999;
text-transform: uppercase;
}
#titlebar {
padding: 0px;
width: 755px;
height: 150px;
top: 0px;
left: 0px;
position: absolute;
}
#menubar {
position: absolute;
width: 130px;
left: 0px;
top: 170px;
}
#maincontent {
width: 525px;
left: 140px;
position: absolute;
top: 170px;
text-align: left;
height: auto;
}
#footer {
position: relative;
width: 755px;
text-align: center;
height: 100px;
top: 600px;
}
#wrapper{
padding: 0px;
width: 760px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
text-align: left;
text-decoration: none;
position: relative;
border: medium dotted;
height: auto;
}
JS File (if needed):
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Navigation:
[Reply to this message]
|