Shiny Grimer
Active member
- Pronoun
- she/her, they/them
www.crittercryptics.com/noahate_earthbound.shtml
In IE7, the text that says 'Diamond/Pearl/Platinum' spills outside the box - rather than going to a new line, it keeps on going and passes the menu. Should I put a line break there to force it to a new line, or is there a better solution?
I've been trying to get Duplighost style to get a Drop-Down menu that uses only CSS but I've only succeeded in partly messing up the rest of my layout and getting a headache. I did something like this: http://www.alistapart.com/articles/dropdowns but the text ends vertical and not horizontal (I copy/pasted it from the source and it ended up like that. Maybe I'm missing something overly obvious) . I want something like on that pretty example page where the categories are horizontal and when you hover over them, the first level shows up. I might even have a second level, but I don't care much about that right now.
Interestingly enough, in IE7, the drop down drops to the right of the text instead of the left. Is this going to be an annoyance?
Also, I added the ul id="nav" and changed the doctrine to XHTML since the drop-down wasn't working with HTML 4.01. Now the other styles are freaky. That is the only thing I've done to the HTML other than the script - the other two styles are untouched.
(By the way, I'm aware that in Duplighost style, I got the CSS straight from the source and it still has the comments. I'll get rid of that later when I figure out how to non-screwify my layout.)
Oh yeah, code and HTML and stuff.
Help would really be appreciated. I know I'm just bothering people, but messing around with code has never been something that I appreciated/was good at doing and I'm bothered.
In IE7, the text that says 'Diamond/Pearl/Platinum' spills outside the box - rather than going to a new line, it keeps on going and passes the menu. Should I put a line break there to force it to a new line, or is there a better solution?
I've been trying to get Duplighost style to get a Drop-Down menu that uses only CSS but I've only succeeded in partly messing up the rest of my layout and getting a headache. I did something like this: http://www.alistapart.com/articles/dropdowns but the text ends vertical and not horizontal (I copy/pasted it from the source and it ended up like that. Maybe I'm missing something overly obvious) . I want something like on that pretty example page where the categories are horizontal and when you hover over them, the first level shows up. I might even have a second level, but I don't care much about that right now.
Interestingly enough, in IE7, the drop down drops to the right of the text instead of the left. Is this going to be an annoyance?
Also, I added the ul id="nav" and changed the doctrine to XHTML since the drop-down wasn't working with HTML 4.01. Now the other styles are freaky. That is the only thing I've done to the HTML other than the script - the other two styles are untouched.
(By the way, I'm aware that in Duplighost style, I got the CSS straight from the source and it still has the comments. I'll get rid of that later when I figure out how to non-screwify my layout.)
Oh yeah, code and HTML and stuff.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Critter Cryptics</title>
<link rel="stylesheet" type="text/css" href="http://www.crittercryptics.com/shadow.css">
<link rel="alternate stylesheet"
type="text/css" href="http://www.crittercryptics.com/shadow.css"
title="shadow" />
<link rel="alternate stylesheet"
type="text/css" href="http://www.crittercryptics.com/duplighost.css"
title="duplighost" />
<link rel="alternate stylesheet"
type="text/css" href="http://www.crittercryptics.com/giygas.css"
title="giygas" />
<script type="text/javascript"
src="http://www.crittercryptics.com/styleswitcher.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
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;
//--><!]]></script>
</head>
<body>
<div id="container">
<div id="header" align="center">
</div>
<div id="leftmenu">
<ul id="leftmenu">
<li><strong>Sitely</strong>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<br>
<li><strong>General</strong>
<ul>
<li><a href="http://www.crittercryptics.com/collector's coins.shtml">Collector's Coins</a></li>
<li><a href="http://www.crittercryptics.com/accesories_nintendo.shtml">Nintendo Stuff</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<br>
<li><strong>Pokemon (General and other games)</strong>
<ul>
<li><a href="http://www.crittercryptics.com/stadiums_pokemon.shtml">Stadium 1 and 2</a></li>
<li><a href="http://www.crittercryptics.com/class_pokemon.shtml">Pokemon Classifications</a></li>
<li><a href="http://www.crittercryptics.com/extras_pokemon.shtml">The Third Games</a></li>
<li><a href="http://www.crittercryptics.com/events_pokemon.shtml">Pokemon Events</a></li>
</ul>
</li>
<br>
<li><strong>Red/Blue/Yellow</strong>
<ul>
<li><a href="http://www.crittercryptics.com/glitches_pokemon.shtml">Glitches</a></li>
</ul>
</li>
<br>
<li><strong>Gold/Silver/Crystal</strong>
<ul>
<li><a href="http://www.crittercryptics.com/free_pokemon.shtml">*Free* Pokemon</a></li>
<li><a href="http://www.crittercryptics.com/radio_pokemon.shtml">Radio Ga-ga</a></li>
</ul>
</li>
<br>
<li><strong>Ruby/Sapphire/Emerald</strong>
<ul>
<li><a href="http://www.crittercryptics.com/soot_pokemon.shtml">Soot and Glass</a></li>
</ul>
</li>
<br>
<li><strong>Diamond/Pearl/Platinum</strong>
<ul>
<li><a href="http://www.crittercryptics.com/honey_pokemon.shtml">Surviving Sweet Honey</a></li>
</ul>
</li>
<br>
<li><strong>EarthBound</strong>
<ul>
<li><a href="http://www.crittercryptics.com/darkside earthbound.shtml">Mother's Dark Side</a></li>
<li><a href="http://www.crittercryptics.com/popculture_earthbound.shtml">Pop Culture Refs</a></li>
<li><a href="http://www.crittercryptics.com/noahate_earthbound.shtml">Does NOA hate Mother?</a></li>
<li><a href="http://www.crittercryptics.com/musicquiz_earthbound.shtml">Music Quiz</a></li>
<li><a href="http://www.crittercryptics.com/motherost_earthbound.shtml">Mother OST</a></li>
<li><a href="http://www.crittercryptics.com/challenges_earthbound.shtml">Challenges</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<p><script type="text/javascript"
src="styleswitcher.js"></script>
<a href="#"
onclick="setActiveStyleSheet('shadow');
return false;">Shadow Queen Style</a>
<a href="#"
onclick="setActiveStyleSheet('duplighost');
return false;">Duplighost Style</a>
<a href="#"
onclick="setActiveStyleSheet('giygas');
return false;">Giygas Style</a>
<br><br>
Code:
body {
color:#000000;
font-family:verdana, sans-serif;
font-size:8pt;
background:#FFFFFF;
margin:5;
padding:5;
}
a:link, a:visited {
text-decoration:underline;
color:#8866C0;
}
a:active {
text-decoration:underline;
color:#8C70BA;
}
img {
border:0px;
}
#header {
text-align:center;
height:150px;
width:700px;
background-image:url(http://img231.imageshack.us/img231/4121/shadowqueenbannercopy1js.png);
margin:auto;
}
#header img {
margin:auto;
}
#container {
position:relative;
width:100%;
}
#content {
margin-left:145px;
margin-right:145px;
padding:6px;
border:1px solid #6e1593;
clear: left;
}
#leftmenu {
position:absolute;
left:0;
top:0;
width:130px;
padding:5px;
border:1px solid #6e1593;
text-align:left;
background-image:url(http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png);
background-repeat:repeat-y
}
#leftmenu a:hover {
text-decoration:underline overline;
background-color:#342252;
color:#b087cd;
width:130px;
}
.quote {
border:1px solid #6e1593;
background-color:#b087cd;
color:#742ea4;
padding:5px;
}
h3 {
color:#d1a2e4;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 10em;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
}
#rightmenu a {
display:block !important;
width:180px;
}
#rightmenu {
padding:10;
padding-top:31px;
list-style-type:none;
position:absolute;
right:0;
top:0;
border:1px solid #6e1593;
width:130px;
background-image:url(http://www.dragonflycave.com/forums/imagehosting/3544778953393ed.png);
}
#rightmenu li {
margin:0;
padding:0;
}
#rightmenu li a img {
height:4;
width:0;
position:absolute;
top:0px;
right:18px;
}
#rightmenu li a:hover img {
height:31px;
width:88px;
}
#center {
text-align:center;
}
Help would really be appreciated. I know I'm just bothering people, but messing around with code has never been something that I appreciated/was good at doing and I'm bothered.