wrapper problems with CSS

G

Gavin

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="(e-mail address removed)">
<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>
&nbsp;
<!-- 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;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
 
E

Els

Gavin said:
Here my code below.
Click to expand...

Please don't copy paste code, provide a URL instead.
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.
Click to expand...

[snip a /lot/ of code]
#maincontent {
width: 525px;
left: 140px;
position: absolute;
top: 170px;
text-align: left;
height: auto;
}
Click to expand...

position:absolute takes the element out of the normal flow.
The wrapper box doesn't "see" the #maincontent, so it won't expand to
fit either.

I can't give you a ready solution without diving into your code, which
I'm not keen to do atm. General solution: don't use position:absolute
on the #maincontent, but find another way of placing it where you
want. If it's a page with a floated menu of 140px to the left, just
give the #maincontent a left margin of 140px and don't position it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Not sure why drop-down is not working. 2
Need help with code on website (noob) 2
Dropdown menu in a fixed navbar 2
Horizontal menu bar header 2
I need help fixing my website 2
Interfering CSS 1
Align img inside nav tabs section 5

Members online

No members online now.
Total: 69 (members: 0, guests: 69)
Robots: 475

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top