Menu
Okay, this is gonna be a LONG post, since I wanna show what-all’s going into this. The page displays fine in Slopera, but Internet Exploder and Fireflop are throwing a tantrum.
First off, setup.css (controls all pages on my site.)
[B].counter{
text-align: center;
font-size: large;
margin-top: 20px;
}
.space{
margin-top: 20px;
}
div.center{
text-align: center;
}
a{
text-decoration: underline overline;
}
h1{
font-size: xx-large;
text-align: center;
font-weight: lighter;
}
h1.warn{
font-family: Block, Verdana, Arial, Helvetica, sans-serif;
color: #FFFF00;
}
h2{
font-size: x-large;
text-align: center;
font-weight: lighter;
}
h3{
font-weight: lighter;
}
strong.censor{
color: #FFFFFF;
font-weight: lighter;
}
p{
text-indent: 30px;
margin-top: 0;
margin-bottom: 0;
}
img{
border: 0;
}
img.left{
float: left;
padding; 30px;
}
br.clear{
clear: left;
}
dt{
margin-top: 20px;
}
ul{
list-style-type: none;
}
Next up: frames.css (Controls pages that used to go into the main frameset, can’t be arsed to change the name.)
[B]div#title{
height: 60px;
width: 100%;
margin-top: 5px;
padding: 0;
text-align: center;
border-style: solid;
border-width: 1px;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: #00ffff;
}
div#container{
margin-top: -60px;
height: 100%;
}
div#content{
padding: 5px;
margin-left: 150px;
margin-right: 5px;
margin-top: 60px;
border-style: solid;
border-width: 1px;
border-top: 0;
border-bottom: 0;
border-right: 0;
border-color: #00ffff;
}
div#menu{
position: absolute;
margin-left: 5px;
width: 140px;
}
.framelink{
text-align: center;
font-size: x-large;
}
a:link{
color: #00CCFF;
}
a:visited{
color: #0088FF;
}
a:hover{
color: #00FFFF;
}
a:active{
color: #00AAFF;
}
body{
margin-left: 0;
margin-right: 0;
padding: 0;
background: #000039;
color: #00CCFF;
}
h1{
color: #00FFFF;
font-family: “Old English Text MT”, Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
h2{
color: #00FFFF;
text-align: center;
font-size: x-large;
}
h3{
color: #00FFFF;
text-align: center;
font-size: x-large;
text-decoration: underline;
}
strong{
color: #00FFFF;
}
li.button{
height: 40px;
}
Lastly, my HTML:
[B]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“
<html lang=”en” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”content-script-type” content=”text/javascript”>
<meta name=”Content-Style-Type” content=”text/css”>
<meta name=”Author” content=”John-David Kraaikamp”>
<meta name=”Description” content=”Mr. Initial Man’s Furnation Site”>
<meta name=”Keywords” content=”Furry, anthro, anthropomorphic, writing”>
<title>
Mr. Initial Man Info
</title>
<link type=”text/css” rel=”stylesheet” href=”../CSS/setup.css”>
<link type=”text/css” rel=”stylesheet” href=”../CSS/frames.css”>
<style type=”text/css”>
#header {
margin-bottom: 10px;
padding: 10px;
}
ul{
margin: 0 auto;
}
ul#linkalign{
width: 500px;
}
#left {
margin-top: 30px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
width: 200px;
float: left;
}
#right {
margin-top: 30px;
margin-right: 10px;
margin-left: 10px;
padding: 10px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id=”title”>
<img src=”../Graphics/Frametitles/aboutme.PNG” alt=”About Me” width=”502″ height=”55″>
</div>
<div id=”container”>
<div id=”menu”>
<ul>
<li style=”margin-top: 5px;” class=”button”><a href=”main.html”><img src=”../Graphics/Buttons/home.PNG”alt=”Home”></a></li>
<li class=”button”><a href=”me.html”><img src=”../Graphics/Buttons/me.PNG”alt=”About Me”></a></li>
<li class=”button”><a href=”library.html”><img src=”../Graphics/Buttons/library.PNG”alt=”Library”></a></li>
<li class=”button”><a href=”gallery.html”><img src=”../Graphics/Buttons/gallery.PNG”alt=”Art Gallery”></a></li>
<li class=”button”><a href=”show.html”><img src=”../Graphics/Buttons/show.PNG”alt=”Mr. Initial Man Show”></a></li>
<li class=”button”><a href=”wswf.html”><img src=”../Graphics/Buttons/wswf.PNG”alt=”The Wild Side Wrestling Federation”></a></li>
<li class=”button”><a href=”links.html”><img src=”../Graphics/Buttons/links.PNG”alt=”Links”></a></li>
<li class=”button”><a href=”thanks.html”><img src=”../Graphics/Buttons/thanks.PNG”alt=”Thanks”></a></li>
<li class=”button”><a href=”guestbook.html”><img src=”../Graphics/Buttons/guestbook.PNG”alt=”Guestbook”></a></li>
<li class=”button”><a href=”contact.html”><img src=”../Graphics/Buttons/contact.PNG”alt=”Contact Me!”></a></li>
</ul>
</div>
<div id=”content”>
<h1>The Two Mr. Initial Men</h1>
<p>So, which Mr. Initial Man do you want to know? The Real Me, or my fursona, the Wrasslin’ Lynx? Or, maybe you want to read about my life
on my LiveJournal, or about my music.</p>
<ul id=”linkalign”>
<li id=”left” class=”framelink”>
<a href=”../Mister_Initial_Man/me1.html”>
<img src=”../Graphics/Thumbnails/john-david-thumb.PNG” alt=”John-David” height=”166″ width=”154″ style=”padding: 5px;”><br>
The Real Me</a>
</li>
<li id=”right” class=”framelink”>
<a href=”/Mister_Initial_Man/me2.html”>
<img src=”../Graphics/Thumbnails/mim-smirk-thumb.PNG” alt=”Jack Daniels” height=”166″ width=”154″ style=”padding: 5px;”><br>
The Wrasslin’ Lynx</a>
</li>
</ul>
<ul style=”clear:both; margin-top:30px;”>
<li class=”framelink”>
<a href=”
</li>
<li class=”framelink”>
<a href=”/Mister_Initial_Man/me3.html”>Musical Me</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Just to let you know, Furnation doesn’t seem to support SSIs.
What’s going on here is in Firefox and Internet Explorer, the menu div appears WAY out of whack. It’s way up and right to where I want it. What I’m trying to do is get the lower right-hand frame to scroll independantly of the rest of the page (like it did when I use frames.)
The relevant URLS are:
[url]http://www.Furnation.com/Mister_Initial_Man/New_Site/Frames/me.html
[url]http://www.Furnation.com/Mister_Initial_Man/New_Site/CSS/frames.css
[url]http://www.Furnation.com/Mister_Initial_Man/New_Site/CSS/setup.css