PDA

Click to See Complete Forum and Search --> : left hand gutter

2muchtime
10-01-2003, 11:58 PM
hello all,

this is (I think) an interesting problem. My friend needs a way to stop the content from displaying under the left nav bar. He wants it to the right of the bar, and not to wrap around under it. No tables, he hasn't gotten divs to work, but they would be acceptable. For some reason he wants the org/himself to remain anon, so please ignore those things. Anyway, heres the code(mostof it). If you need more files just ask


<body>
<table class="topBar" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="200" height="100" valign="middle" align="center" onMouseOver="hideActiveMenu()">
<img border="0" src="images/phoenix.gif" width="104" height="104" alt="Phoenix logo">
</td>
<td height="100" valign="middle" align="center" onMouseOver="hideActiveMenu()">
<h1>The anonymous organization</h1>7075 CAMPUS ROAD - somecity, CA 93021 - (805) 378-1444
</td>
</tr>
</table>
<ul class="leftNav">
<li onMouseOver="hideActiveMenu()"><a href="index.html">Home</a>
<li onMouseOver="hideActiveMenu()"><a href="calendar.html">Calendar</a>
<li onMouseOver="hideActiveMenu()"><a href="contact.html">Contact</a>
<li class="spacer">&nbsp;
<li onMouseOver="showMenu('m1')">
<a href="assignments/index.html" onMouseOut="hideActiveMenu()">Assignments</a>
<img src="images/arrow.gif" width="6" alt=" >" height="12">
<ul id="m1" onMouseOut="hideActiveMenu()">
<li><a href="assignments/juniors/index.html">Juniors</a>
<li><a href="assignments/juniors/links.html">Junior Class Related Links</a>
<li><a href="http://livebyte.com/phoenix/" target="_blank">Seniors</a>
<li><a href="assignments/seniorProject/index.html">Senior Project</a>
</ul>
<li onMouseOver="showMenu('m2')">
<a href="grades/index.html" onMouseOut="hideActiveMenu()">Grades</a>
<img src="images/arrow.gif" width="6" alt=" >" height="12">
<ul id="m2" onMouseOut="hideActiveMenu()">
<li><a href="grades/juniors/index.shtml">Juniors</a>
<!--a href="http://ades/juniors/index.shtml">Juniors</a>-->
<li><a href="http://om/phoenix/" target="_blank">Seniors</a>
</ul>
<li onMouseOver="showMenu('m3')">
<a href="counseling/index.html" onMouseOut="hideActiveMenu()">Counseling</a>
<img src="images/arrow.gif" alt=" >" width="6" height="12">
<ul id="m3" onMouseOut="hideActiveMenu()">
<li><a href="counseling/gradReqs/index.html">HS Graduation Requirements</a>
<li><a href="counseling/collegeEligibility/index.html">College Eligibility Requirements</a>
<li><a href="http://www.assist.org/" target="_blank">California Student Transfer Information</a>
<li><a href="counseling/SAT_ACTinfo/index.html">SAT/ACT Info</a>
<li><a href="counseling/financialAid/index.html">Financial Aid Info</a>
<li><a href="counseling/studySkills/index.html">Study Skills</a>
<li><a href="counseling/scholarships/index.html">Scholarship Info</a>
</ul>
<li onMouseOver="showMenu('m4')">
<a href="advancedLearning/index.html" onMouseOut="hideActiveMenu()">Advanced Learning</a>
<img src="images/arrow.gif" alt=" >" width="6" height="12">
<ul id="m4" onMouseOut="hideActiveMenu()">
<li><a href="advancedLearning/gate/index.html">Gate</a>
<li><a href="advancedLearning/scholarships/index.html">Scholarships</a>
<li><a href="advancedLearning/careers/index.html">Careers</a>
<li><a href="advancedLearning/college/index.html">College Events & Info</a>
</ul>
<li class="spacer">&nbsp;
<li onMouseOver="showMenu('m5')">
<a href="news/index.html" onMouseOut="hideActiveMenu()">News</a>
<img src="images/arrow.gif" width="6" alt=" >" height="12">
<ul id="m5" onMouseOut="hideActiveMenu()">
<li><a href="news/juniors/index.html">Juniors</a>
<li><a href="news/seniors/index.html">Seniors</a>
<li><a href="news/asb/index.html">A.S.B.</a>
<li><a href="news/events/index.html">Events</a>
<li><a href="news/pssa/index.html">PSSA Info</a>
</ul>
<li onMouseOver="showMenu('m6')">
<a href="about/index.html" onMouseOut="hideActiveMenu()">About Us</a>
<img src="images/arrow.gif" width="6" alt=" >" height="12">
<ul id="m6" onMouseOut="hideActiveMenu()">
<li><a href="about/staff/index.html">Staff</a>
<li><a href="about/campus/index.html">Campus</a>
<li><a href="about/program/index.html">The Program</a>
</ul>
<li onMouseOver="showMenu('m7')">
<a href="links/index.html" onMouseOut="hideActiveMenu()">Links</a>
<img src="images/arrow.gif" width="6" alt=" >" height="12">
<ul id="m7" onMouseOut="hideActiveMenu()">
<li><a href="http://www.somecity.cc.ca.us/" target="_blank">somecity College</a>
<li><a href="http://www.pk.k12.ca.us/" target="_blank">somecity Unified School District</a>
<li><a href="http://www.cagifted.org/" target="_blank">California Association for the Gifted</a>
<li><a href="links/index.html">More Links...</a>
</ul>
</ul>
<!--DoNotDeleteThisComment:_Content_Begin-->
<p>All dates are subject to change</p>
<br clear=left>
<table border="1" cellpadding="0" cellspacing="1" class="firstCalendarTable">
<tr>
<td width="100%" colspan="7" align="center">
<h2>January 2003</h2>
</td>
</tr>
<tr>
<td width="14%">Sunday</td>
<td width="14%">Monday</td>
<td width="14%">Tuesday</td>
<td width="14%">Wednesday</td>
<td width="14%">Thursday</td>
<td width="15%">Friday</td>
<td width="15%">Saturday</td>
</tr>
<tr>
<td width="42%" height="70" valign="top" colspan="3">Golden
State Exam Month for Government and Written Language.&nbsp; Dates to be
determined</td>
<td width="14%" height="70" valign="top" class="holiday">1<br>
New Year's Day</td>
<td width="14%" height="70" valign="top" class="holiday">2</td>
<td width="15%" height="70" valign="top" class="holiday">3<br>
Registration Deadline for 2/8 ACT
<p>&nbsp;</p>
</td>
<td width="15%" height="70" valign="top" class="holiday">4</td>
</tr>
<tr>
<td width="14%" height="70" valign="top" class="holiday">5</td>
<td width="14%" height="70" valign="top">6<br>
Classes Resume</td>
<td width="14%" height="70" valign="top" class="pssa">7<br>
PSSA Meeting, 6:30pm
<p>&nbsp;</p>
</td>
<td width="14%" height="70" valign="top">8</td>
<td width="14%" height="70" valign="top">9</td>
<td width="15%" height="70" valign="top">10</td>
<td width="15%" height="70" valign="top">11</td>
</tr>
<tr>
<td width="14%" height="70" valign="top">12</td>
<td width="14%" height="70" valign="top">13</td>
<td width="14%" height="70" valign="top">14</td>
<td width="14%" height="70" valign="top">15</td>
<td width="14%" height="70" valign="top">16</td>
<td width="15%" height="70" valign="top">17</td>
<td width="15%" height="70" valign="top">18<br>
</td>
</tr>
<tr>
<td width="14%" height="70" valign="top">19</td>
<td width="14%" height="70" valign="top" class="holiday">20<br>
Martin Luther King Holiday-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
No Classes</td>
<td width="14%" height="70" valign="top">21</td>
<td width="14%" height="70" valign="top">22</td>
<td width="14%" height="70" valign="top">23</td>
<td width="15%" height="70" valign="top">24</td>
<td width="15%" height="70" valign="top">25<br>
SAT I/II
<p>Krispy Kreme Sale Site: TBD</p>
</td>
</tr>
<tr>
<td width="14%" height="70" valign="top">26</td>
<td width="14%" height="70" valign="top">27</td>
<td width="14%" height="70" valign="top">28</td>
<td width="14%" height="70" valign="top">29</td>
<td width="14%" height="70" valign="top">30</td>
<td width="15%" height="70" valign="top">31<br>
Ground Hog Job Shadow Day</td>
<td width="15%" height="70" valign="top">&nbsp;</td>
</tr>
</table>

<br><table border="1" cellpadding="0" cellspacing="1" class="calendarTable">
<tr>
<td width="100%" colspan="7" align="center">
<h2>February 2003</h2>
</td>
</tr>
<tr>
<td width="14%">Sunday</td>
<td width="14%">Monday</td>
<td width="14%">Tuesday</td>
<td width="14%">Wednesday</td>
<td width="14%">Thursday</td>
<td width="15%">Friday</td>
<td width="15%">Saturday</td>
</tr>
<tr>
<td width="85%" height="70" valign="top" colspan="6">&nbsp;</td>
<td width="15%" height="70" valign="top">1<br>
Chinese New Year</td>
</tr>
<tr>
<td width="14%" height="70" valign="top">2</td>
<td width="14%" height="70" valign="top">3</td>
<td width="14%" height="70" valign="top">4</td>
<td width="14%" height="70" valign="top" class="pssa">5<br>
PSSA meeting 7:30pm (Winter General Meeting And Open House)
</td>
<td width="14%" height="70" valign="top">6</td>
<td width="15%" height="70" valign="top">7</td>
<td width="15%" height="70" valign="top">8</td>
</tr>
<tr>
<td width="14%" height="70" valign="top">9</td>
<td width="14%" height="70" valign="top">10</td>
<td width="14%" height="70" valign="top">11</td>
<td width="14%" height="70" valign="top">12</td>
<td width="14%" height="70" valign="top">13<br>
End of the 1st Quarter</td>
<td width="15%" height="70" valign="top" class="holiday">14<br>
Presidents Day Holiday
<p>(St.) Valentines Day</p>
</td>
<td width="15%" height="70" valign="top">15</td>
</tr>
</table>
<br><table border="1" cellpadding="0" cellspacing="1" class="calendarTable">
<tr>
</table>
<br><table border="1" cellpadding="0" cellspacing="1" class="calendarTable">
<tr>
</table>
<p>All dates are subject to change</p>
<!--DoNotDeleteThisComment:_Content_End-->
<br clear=left>
<table class="bottomBar" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>The anonymous organization - 7075 Campus Road - somecity, CA 93021 - (805) 378-1444</td></tr>
</table>
</body>
</html>
2muchtime
10-02-2003, 12:08 AM
Here is the css for the page:

(normal.css)

/* for the left Navbar */
.leftNav {
display: block;
float: left;
width: 150px; /* change? */
background-color: #CCCCCC;
color: #000000; font-family: Verdana;
font-size: 0.75em;
/* padding: 2px; */
padding: 0px;
margin: 0px;
list-style-type: none;
}
/* for the items in the left navbar */
.leftNav LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 100%;
display: block;
position: relative;
}
.leftNav LI A {
display: block;
/* another way of width: 100%; that works in mozilla, but not IE */
/* left: 0px;
right: 0px;
width: auto; */
width: 100%;
border: 1px solid #C0C0C0;
padding: 1px;
}
.leftNav LI A:LINK, .leftNav LI A:VISITED {
text-decoration: none;
background-color: #CCCCCC;
color: #000000;
}
.leftNav LI A:HOVER {
text-decoration: none;
background-color: #99CCFF;
color: #000066;
border-style: solid;
border-color: #3333FF
}
.leftNav LI IMG, .leftNav LI IMG {
/* should be the arrow images */
/* position them on the right */
/* noborder */
display: inline;
position: absolute;
right: 0px;
/* I want this aligned in the middle vertically */
/* I don't know how to accomplish it though */
top: 4px;
border-width: 0px;
z-index: 3;
}
/* for the menu-s */
.leftNav LI UL, .menu {
position: absolute;
display: block;
width: 150px; /* change? */
height: auto;
padding: 0px;
margin: 0px;
list-style-type: none;
/* IE5:MAC is picky, percentages put it on the right of the page, not the parent */
left: 100%;
top: 0px;
visibility: hidden;
z-index: 20
}
/* for the menu content */
.leftNav LI UL LI, .menuLink {
background-color: #CCCCCC;
color: #000000;
font-family: Verdana;
font-size: 1em;
padding: 2px;
}
.leftNav LI UL LI TABLE, .menuLink table {
border-style: solid;
border-width: 0px;
}
.leftNav LI UL LI A, .menuLink a {
text-decoration: none;
display: block;
/* another way of width: 100%; that works in mozilla, but not IE */
/* left: 0px;
right: 0px;
width: auto;*/
width: 100%;
border: 1px solid #C0C0C0;
padding: 1px
}
.leftNav LI UL LI A:LINK, .leftNav LI UL LI A:VISITED, .menuLink a:link, .menuLink a:visited {
text-decoration: none;
color: #000000;
background-color: #CCCCCC;
}
.leftNav LI UL LI A:HOVER, .menuLink a:hover {
text-decoration: none;
color: #000066;
background-color: #99CCFF;
border-style: solid;
border-color: #0000FF
}

/*

**************************************************************
** for browsers that support such **
**************************************************************

*/
@media screen {
/* for the left Navbar */
.leftNav {
display: block;
float: left;
width: 150px; /* change? */
background-color: #CCCCCC;
color: #000000; font-family: Verdana;
font-size: 0.75em;
/* padding: 2px; */
padding: 0px;
margin: 0px;
list-style-type: none;
/* list-style-image: none;
list-style-position: inside */
}
/* for the items in the left navbar */
.leftNav LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 100%;
display: block;
position: relative;
}
.leftNav LI A {
display: block;
/* another way of width: 100%; that works in mozilla, but not IE */
/* left: 0px;
right: 0px;
width: auto; */
width: 100%;
border: 1px solid #C0C0C0;
padding: 1px
}
.leftNav LI A:LINK, .leftNav LI A:VISITED {
text-decoration: none;
background-color: #CCCCCC;
color: #000000;
}
.leftNav LI A:HOVER {
text-decoration: none;
/* background-color: #FFFFFF; */
background-color: #99CCFF;
color: #000066;
border-style: solid;
border-color: #3333FF
}
.leftNav LI IMG, .leftNav LI IMG {
/* should be the arrow images */
/* position them on the right */
/* noborder */
display: inline;
position: absolute;
right: 0px;
/* I want this aligned in the middle vertically */
/* I don't know how to accomplish it though */
top: 4px;
border-width: 0px;
z-index: 3;
}
/* for the menu-s */
.leftNav LI UL, .menu {
position: absolute;
display: block;
width: 150px; /* change? */
height: auto;
padding: 0px;
margin: 0px;
list-style-type: none;
/* IE5:MAC is picky, percentages put it on the right of the page, not the parent */
left: 100%;
top: 0px;
visibility: hidden;
z-index: 20
}
/* for the menu content */
.leftNav LI UL LI, .menuLink {
background-color: #CCCCCC;
color: #000000;
font-family: Verdana;
font-size: 1em;
padding: 2px;
}
.leftNav LI UL LI TABLE, .menuLink table {
border-style: solid;
border-width: 0px;
}
.leftNav LI UL LI A, .menuLink a {
text-decoration: none;
display: block;
/* another way of width: 100%; that works in mozilla, but not IE */
/* left: 0px;
right: 0px;
width: auto;*/
width: 100%;
border: 1px solid #C0C0C0;
padding: 1px
}
.leftNav LI UL LI A:LINK, .leftNav LI UL LI A:VISITED, .menuLink a:link, .menuLink a:visited {
text-decoration: none;
color: #000000;
background-color: #CCCCCC;
}
.leftNav LI UL LI A:HOVER, .menuLink a:hover {
text-decoration: none;
color: #000066;
background-color: #99CCFF;
border-style: solid;
border-color: #0000FF
}
}


(base.css)

/* base.css
this should be the basic style sheet.
It should be overridden by browser that support the css2 @import
with normal.css

It also should attempt to avoid crashing netscape 4
(which normal.css does)

furthermore, if a new style is to be added, it should be added here
normal.css should contain only improvements off of this style sheet

for more incoherency I shall add that this should only contain
css 1 compativle statements
*/
html, body {
background: #FFFFFF;
color: #000000;
margin: 0px;
font-family: Verdana;
}

body a:link, .link { text-decoration: underline; color: #0033CC; background-color: #FFFFFF }
body a:visited, .visited { text-decoration: underline; color: #C000C0; background-color: #FFFFFF }
body a:active, .active { text-decoration: underline; color: #0000FF; background-color: #FFFFFF }

/* for the spacer in the navigation bar */
spacer {
font-size: 0.75em;
}

/* for the bar at the top of every page */
.topBar {
color: #000000;
background-color: #CCCCCC
}
/* for the bar at the bottom of every page */
.bottomBar {
color: #000000;
background-color: #CCCCCC
}



/* for the calendar */
.holiday {
BACKGROUND-COLOR: #ccffcc;
color: #000000
}
.finals {
BACKGROUND-COLOR: #ff6666;
color: #000000
}
.confrence {
BACKGROUND-COLOR: #99ccff;
color: #000000
}
.pssa {
BACKGROUND-COLOR: #66ffff;
color: #000000
}


/* this hopefully will be overridden by better browsers */
.leftNav {
/* very important !!! */
width: 135px;
color: #000000;
font-family: Verdana;
font-size: 0.75em;
/* font-weight: bold; */
/* should be the same as .navItem a: link and anchor borders */
background-color: #CCCCCC
}

/* for the items in the left navbar */
/* IE5:mac will ignore this to the next comment \*/
.navItem {
position: relative;
}
.navItem a:link, .navItem a:visited {
text-decoration: underline;
background-color: #CCCCCC;
color: #6666FF
}

.navItem a img, .navItem img {
display: none;
border-width: 0px
}


.menu {
}
.menuLink {
color: #CCCCCC;
padding: 0px;
}
.menuLink table {
border-style: solid;
border-width: 0px;
}
.menuLink a:link, .menuLink a:visited, .menuLink div a:link, .menuLink div a:visited {
padding: 0px;
text-decoration: underline;
color: #0000CC;
background-color: #FFFFFF
}
.menuLink a:active, .menuLink div a:active {
color: #000000;
background-color: #FFFFFF
}
/* End IE5 ignore */
Charles
10-02-2003, 05:29 AM
Look under the hood at http://www.saintjohns.ang-md.org/.