Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > wrapper problems with CSS

Reply
Thread Tools

wrapper problems with CSS

 
 
Gavin
Guest
Posts: n/a
 
      06-07-2005
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 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[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;


 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      06-07-2005
Gavin wrote:

> Here my code below.


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.


[snip a /lot/ of code]

> #maincontent {
> width: 525px;
> left: 140px;
> position: absolute;
> top: 170px;
> text-align: left;
> height: auto;
> }


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.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: David Bowie - Beauty And The Beast
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Problems with a wrapper class for session object (revisited) John Mullin ASP .Net 0 11-07-2004 10:29 PM
Garbage collection problems with a c++ wrapper for a module James S Python 2 07-20-2004 01:22 AM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments