Home Register FAQ Members List Search Today's Posts Mark Forums Read  
DesignersTalk > General Forums > Help Me! > what is wrong with me?  
Reply LinkBack Thread Tools Search this Thread
Old 15-10-2005, 12:59   #1 (permalink)
mundi
Registered User
 
Join Date: Oct 2005
Posts: 4
what is wrong with me?
if anyone can help, i cant figure out where im going wrong. i am very new, and im trying to make a dropdown menu, i have the menu fine, the header on the top of the page is there, but i cant find where to move that annoying white space in between or how to center anythin, anyone help me with this???

HTML DOCUMENT

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title>New Page 1</title>
<LINK href="home.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</SCRIPT>
</head>
<SCRIPT language=javascript src="ypSlideOutMenusC.js"></SCRIPT>

<SCRIPT language=javascript src="soopa-rollovers.js"></SCRIPT>

<SCRIPT language=javascript src="menus1.js"></SCRIPT>
<body topmargin="0" leftmargin="0">
<DIV id=wrap>
<DIV id=headerbox>
<DIV class=headerimage><IMG height=105 src="images/logo.jpg" width=778 border=0></DIV></DIV>
<DIV id=navwrap><!-- START #navblock -->
<DIV id=navblock><!-- START #nav -->
<UL id=nav>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category1</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link1</SPAN></A></LI>
<LI><A href="#"><SPAN>Link2</SPAN></A></LI>
<LI><A href="#"><SPAN>Link3</SPAN></A></LI>
<LI><A href="#"><SPAN>Link4</SPAN></A></LI>
<LI><A href="#"><SPAN>Link5</SPAN></A></LI>
</UL>
</LI>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category2</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link11</SPAN></A></LI>
<LI><A href="#"><SPAN>Link12</SPAN></A></LI>
<LI><A href="#"><SPAN>Link13</SPAN></A></LI>
<LI><A href="#"><SPAN>Link14</SPAN></A></LI>
<LI><A href="#"><SPAN>Link15</SPAN></A></LI>
</UL>
</LI>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category3</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link21</SPAN></A></LI>
<LI><A href="#"><SPAN>Link22</SPAN></A></LI>
<LI><A href="#"><SPAN>Link23</SPAN></A></LI>
<LI><A href="#"><SPAN>Link24</SPAN></A></LI>
<LI><A href="#"><SPAN>Link25</SPAN></A></LI>
</UL>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
</body>

</html>
================================================== ========================
menus1_

// JavaScript Document
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);


================================================== =======================
home (css)

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333; LINE-HEIGHT: 1.5em; PADDING-TOP: 0px; FONT-FAMILY: Verdana, sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}
P {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; COLOR: #333333; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: justify
}
UNKNOWN {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; COLOR: #333333; LINE-HEIGHT: 1.3em; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: justify
}
H1 {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H1 A:link {
COLOR: #63d7ff; TEXT-DECORATION: none
}
H1 A:visited {
COLOR: #63d7ff; TEXT-DECORATION: none
}
H1 A:hover {
COLOR: #fff
}
H2 {
MARGIN-TOP: -18px; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #0d8ab5; TEXT-INDENT: 5px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
H4 {
MARGIN-TOP: -18px; FONT-WEIGHT: normal; FONT-SIZE: 10px; MARGIN-LEFT: -140px; WIDTH: 195px; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
UNKNOWN {
MARGIN-TOP: -10px; FONT-WEIGHT: normal; FONT-SIZE: 10px; MARGIN-LEFT: 5px; WIDTH: 195px; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
H5 {
MARGIN-TOP: -5px; FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
UNKNOWN {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TEXT-ALIGN: left
}
#wrap {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -17px auto 0px; WIDTH: 778px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 100%
}
UNKNOWN {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -13px auto 0px; WIDTH: 778px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 100%
}
#navwrap {
PADDING-RIGHT: 0px; MARGIN-TOP: 31px; PADDING-LEFT: 0px; Z-INDEX: 100; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 26px
}
UNKNOWN {
PADDING-RIGHT: 0px; MARGIN-TOP: 31px; PADDING-LEFT: 0px; Z-INDEX: 100; PADDING-BOTTOM: 0px; MARGIN-LEFT: 6px; WIDTH: 100%; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 26px
}
#navblock {
MARGIN-LEFT: 8px; MARGIN-TOP: 0px; FLOAT: left
}
#text {
MARGIN-LEFT: 8px; MARGIN-TOP: -20px; FLOAT: left; COLOR=#fff; CURSOR=hand; TEXT-DECORATION: none
}
#nav {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
#nav UL {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
#nav A {
DISPLAY: block; COLOR: #333; BORDER-BOTTOM-STYLE: none
}
#nav A:hover {
COLOR: #333; BORDER-BOTTOM-STYLE: none
}
#nav LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 22px
}
#nav LI IMG {
MARGIN: 0px
}
#nav LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI UL {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: #000080; LEFT: -999em; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; BORDER-BOTTOM: #00779f 6px solid; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 26px; HEIGHT: auto
}
#nav LI LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #a4d8e9 1px solid; HEIGHT: auto
}
#nav LI LI SPAN {
PADDING-RIGHT: 4px; DISPLAY: block; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 4px; POSITION: relative
}
#nav LI LI A {
DISPLAY: block; COLOR: #fff; TEXT-DECORATION: none
}
#nav LI LI A:visited {
DISPLAY: block; COLOR: #fff; TEXT-DECORATION: none
}
#nav LI LI A:hover {
BACKGROUND: #0d8fbb; COLOR: #fff; TEXT-DECORATION: none
}
#backtopga {
LEFT: 10px; POSITION: absolute; TOP: 8px
}
UNKNOWN {
MARGIN-TOP: 11px; FLOAT: right
}
UNKNOWN {
FLOAT: left
}
#headerbox {
MARGIN-TOP: 17px; WIDTH: 778px
}
UNKNOWN {
MARGIN-TOP: 0px; MARGIN-LEFT: 6px; WIDTH: 778px
}
.headerimage {
MARGIN-TOP: 0px
}
.iconsitemap {
MARGIN-TOP: -100px; BACKGROUND: url(../images/icon_sitemap.gif) no-repeat; MARGIN-LEFT: 303px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -101px; BACKGROUND: url(../images/icon_sitemap.gif) no-repeat; MARGIN-LEFT: 691px; POSITION: absolute
}
.sitemaptext {
MARGIN-TOP: -105px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 327px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -105px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 715px; POSITION: absolute
}
#searchset {
MARGIN-TOP: -72px; MARGIN-LEFT: 440px
}
UNKNOWN {
MARGIN-TOP: -53px; MARGIN-LEFT: 460px
}
#searchset .inputbox {
BORDER-RIGHT: #a4a3a3 1px solid; BORDER-TOP: #a4a3a3 1px solid; MARGIN-TOP: 1px; FONT-SIZE: 11px; BORDER-LEFT: #a4a3a3 1px solid; WIDTH: 180px; COLOR: #000; BORDER-BOTTOM: #a4a3a3 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 15px
}
#searchset #submitbutton {
MARGIN-TOP: 2px; MARGIN-LEFT: 4px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -18px; FLOAT: right; MARGIN-LEFT: 260px
}
#address {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 1px
}
#content {
BORDER-RIGHT: #d4d0c8 1px solid; BORDER-LEFT: #d4d0c8 1px solid; WIDTH: 777px
}
UNKNOWN {
BORDER-RIGHT: #d4d0c8 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 6px; BORDER-LEFT: #d4d0c8 1px solid; WIDTH: 776px; PADDING-TOP: 0px
}
#flashanim {
BORDER-RIGHT: #d4d0c8 1px solid; FLOAT: left; MARGIN-BOTTOM: 5px; WIDTH: 265px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 219px
}
UNKNOWN {
FLOAT: left; WIDTH: 265px; HEIGHT: 219px
}
#maincontent {
MARGIN-TOP: 5px
}
UNKNOWN {
MARGIN-TOP: 0px
}
#newprdmain {
FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 510px; HEIGHT: 220px
}
HTML #newprdmain {
FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 510px; HEIGHT: 220px
}
#newprdheadingbg {
FONT-WEIGHT: bold; FONT-SIZE: 11px; WIDTH: 511px; COLOR: #ffffff; TEXT-INDENT: 6px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 24px; BACKGROUND-COLOR: #666; TEXT-ALIGN: left
}
HTML #newprdheadingbg {
FONT-WEIGHT: bold; FONT-SIZE: 11px; WIDTH: 510px; COLOR: #ffffff; TEXT-INDENT: 6px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 24px; BACKGROUND-COLOR: #666; TEXT-ALIGN: left
}
DL.float-left {
BACKGROUND: #fff; FLOAT: left; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
HTML DL.float-left {
BORDER-RIGHT: #d4d0c8 1px solid; BACKGROUND: #fff; FLOAT: left; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
UNKNOWN {
BORDER-RIGHT: #d4d0c8 1px solid; MARGIN-TOP: 0px; BACKGROUND: #fff; FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
.float-left DT {
PADDING-RIGHT: 10px; MARGIN-TOP: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; COLOR: #000; LINE-HEIGHT: 1.3em; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.float-left DD IMG {
PADDING-RIGHT: 4px; MARGIN-TOP: 6px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; MARGIN-LEFT: -40px; PADDING-TOP: 4px
}
UNKNOWN {
PADDING-RIGHT: 5px; MARGIN-TOP: 14px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN-LEFT: -40px; PADDING-TOP: 5px
}
#prdmap {
MARGIN-LEFT: -102px; WIDTH: 160px; POSITION: absolute; HEIGHT: 70px
}
UNKNOWN {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px; WIDTH: 160px; POSITION: absolute; HEIGHT: 90px
}
#address {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 1px
}
UNKNOWN {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 0px
}
.colorlist {
FONT-SIZE: 11px; COLOR: #990033; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.sitemaplist {
MARGIN-TOP: 30px
}
UNKNOWN {
MARGIN: 30px 0px 0px 8px
}
.list UL {

}
UNKNOWN {

}
.sitemaplist LI {
FONT-WEIGHT: normal; LIST-STYLE-IMAGE: url(../images/bullet_right.gif); MARGIN: 12px 0px 0px -24px
}
UNKNOWN {
MARGIN: 12px 0px 0px -24px
}
#footernav {
PADDING-RIGHT: 0px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: -4px 0px 0px; WIDTH: 778px; PADDING-TOP: 0px; BORDER-BOTTOM: #666666 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; HEIGHT: 23px; BACKGROUND-COLOR: #636363
}
UNKNOWN {
BORDER-TOP: #666666 1px solid; MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; FLOAT: left; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 6px; WIDTH: 778px; BORDER-BOTTOM: #666666 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; HEIGHT: 23px; BACKGROUND-COLOR: #636363
}
#footernav LI {
PADDING-RIGHT: 1px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
UNKNOWN {
PADDING-RIGHT: 1px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
#footernav A {
FLOAT: left; COLOR: #fff; TEXT-DECORATION: none
}
#footernav A:hover {
COLOR: #000
}
#footernav A:active {
COLOR: #000
}
#footernav A:active {
FONT-WEIGHT: normal
}
LI#t-home A {
MARGIN-LEFT: 19px
}
LI#t-boronic A {
MARGIN-LEFT: 34px
}
LI#t-products A {
MARGIN-LEFT: 33px
}
LI#t-custom A {
MARGIN-LEFT: 32px
}
LI#t-techno A {
MARGIN-LEFT: 30px
}
LI#t-about A {
MARGIN-LEFT: 29px
}
LI#t-contact A {
MARGIN-LEFT: 27px
}
LI#t-catalogs A {
MARGIN-LEFT: 28px
}
LI#t-news A {
MARGIN-LEFT: 30px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 82%; BACKGROUND: url(../images/footer1.gif) repeat-x left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 778px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 26px
}
UNKNOWN {
BACKGROUND: url(../images/footer1.gif) no-repeat left top; MARGIN-LEFT: 6px; WIDTH: 778px; POSITION: relative; HEIGHT: 25px
}
.copy {
FONT-SIZE: 10px; MARGIN: 3px 0px 0px -520px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
FONT-SIZE: 10px; MARGIN: 3px 0px 0px -520px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.copy A {
COLOR: #fff
}
.copy A:hover {
COLOR: #ccc
}
.design {
FONT-SIZE: 10px; MARGIN: -20px 0px 0px 220px; COLOR: #000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
MARGIN: -30px 0px 0px 220px
}
.design A {
COLOR: #fff; TEXT-DECORATION: none
}
.design A:hover {
COLOR: #000; TEXT-DECORATION: underline
}
.privacy {
FONT-SIZE: 10px; MARGIN: -21px 0px 0px 660px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
MARGIN: -21px 0px 0px 660px
}
.privacy A {
COLOR: #fff; TEXT-DECORATION: none
}
.privacy A:hover {
COLOR: #000; TEXT-DECORATION: underline
}
UNKNOWN {
PADDING-TOP: 1px; HEIGHT: 25px
}
DIV {
MARGIN-TOP: 0px
}
P {
MARGIN-TOP: 0px
}


================================================== =======================
soopa-rollovers_

/************************************************** *****************
* soopa-rollovers.js
* 7/28/2001
* www.youngpup.net
*
* easiest rollovers on earth, baby!
* see www.youngpup.net for documentation.
************************************************** *****************/
var javascript_version = 1.0;
javascript_version = 1.1;

var newwin;

function launchwin(winurl,winname,winfeatures)
{
newwin = window.open(winurl,winname,winfeatures);
if(javascript_version > 1.0)
{
setTimeout('newwin.focus();',250);
}
}

function sys(){
launchwin('help/sys_type.cfm','help','top=20,left=20,width=448,hei ght=270,toolbar=no,scrollbars=yes');
}

function soopaSetup() {
var img, sh, sn, sd
for (var i = 0; (img = document.images[i]); i++) {
if (img.getAttribute) {

sn = img.getAttribute("src");
sh = img.getAttribute("hsrc");
sd = img.getAttribute("dsrc");

if (sn != "" && sn != null) {
img.n = new Image();
img.n.src = img.src;

if (sh != "" && sh != null) {
img.h = new Image();
img.h.src = sh;
img.onmouseover = soopaSwapOn
img.onmouseout = soopaSwapOff
}

if (sd != "" && sd != null) {
img.d = new Image();
img.d.src = sd;
img.onmousedown = soopaSwapDown
}
}
}
}
}

function soopaSwapOn() {
this.src = this.h.src;
}

function soopaSwapOff() {
this.src = this.n.src;
}

function soopaSwapDown() {
this.src = this.d.src;
this.temp = typeof(document.onmouseup) != 'undefined' && typeof(document.onmouseup) != 'unknown' ? document.onmouseup : "";
soopaSwapUp.img = this;
document.onmouseup = soopaSwapUp;
}

function soopaSwapUp() {
var ths = soopaSwapUp.img;
ths.src = ths.n.src;
if (ths.temp) document.onmouseup = ths.temp;
}

================================================== =======================
ypSlideOutMenusC
/************************************************** ***
* ypSlideOutMenu
* 3/04/2001
*
* a nice little script to create exclusive, slide-out
* menus for ns4, ns6, mozilla, opera, ie4, ie5 on
* mac and win32. I've got no linux or unix to test on but
* it should(?) work...
*
* Revised:
* - 08/29/2002 : added .hideAll()
* - 04/15/2004 : added .writeCSS() to support more
* than 30 menus.
*
* --youngpup--
************************************************** ***/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
ypSlideOutMenu.minCPUResolution = 10
// constructor
function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
}
ypSlideOutMenu.writeCSS = function() {
document.writeln('<style type="text/css">');
for (var id in ypSlideOutMenu.Registry) {
document.writeln(ypSlideOutMenu.Registry[id].css);
}
document.writeln('</style>');
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hideAll = function()
{
var reg = ypSlideOutMenu.Registry
for (menu in reg) {
ypSlideOutMenu.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }
Last edited by mundi : 15-10-2005 at 13:55.
  Reply With Quote
Old 15-10-2005, 13:01   #2 (permalink)
aspiramedia
Unregistered user
 
aspiramedia's Avatar
 
Join Date: Aug 2005
Posts: 312
That's a lot of code to digest all at once!
  Reply With Quote
Old 15-10-2005, 13:17   #3 (permalink)
paulanthony
mingin dawg baitch
 
paulanthony's Avatar
 
Join Date: Apr 2004
Location: Belfast
Posts: 1,041
Send a message via MSN to paulanthony
I dont know whats wrong with you. But lose those Frontpage tags at the top. People here will shoot you down with those puppies intact.
__________________
  Reply With Quote
Old 15-10-2005, 13:54   #4 (permalink)
mundi
Registered User
 
Join Date: Oct 2005
Posts: 4
ok lol.
  Reply With Quote
Old 15-10-2005, 15:00   #5 (permalink)
indranil
Banned
 
indranil's Avatar
 
Join Date: Oct 2005
Location: India
Posts: 75
Send a message via AIM to indranil
mundi, try this. Host these files somewhere, and more people'll check it out. It's just too much code, and too much to read all at once, as aspiramedia said.

And what is wrong with you? A 10 minute interview ought to sort that.
  Reply With Quote
Old 15-10-2005, 21:15   #6 (permalink)
mundi
Registered User
 
Join Date: Oct 2005
Posts: 4
sorry, i have been up for 2 days trying to figure it out lol, really frustrated, any help is GREATLY APPRECIATED!
here you go..

http://www.xvcd.info/test.html
  Reply With Quote
Old 15-10-2005, 21:23   #7 (permalink)
oli
I Call Shenanigans™
 
oli's Avatar
 
Join Date: Feb 2003
Location: Manchester, England.
Posts: 9,971
Quote:
Originally Posted by mundi
if anyone can help, i cant figure out where im going wrong. i am very new, and im trying to make a dropdown menu, i have the menu fine, the header on the top of the page is there, but i cant find where to move that annoying white space in between or how to center anythin, anyone help me with this???

HTML DOCUMENT

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title>New Page 1</title>
<LINK href="home.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</SCRIPT>
</head>
<SCRIPT language=javascript src="ypSlideOutMenusC.js"></SCRIPT>

<SCRIPT language=javascript src="soopa-rollovers.js"></SCRIPT>

<SCRIPT language=javascript src="menus1.js"></SCRIPT>
<body topmargin="0" leftmargin="0">
<DIV id=wrap>
<DIV id=headerbox>
<DIV class=headerimage><IMG height=105 src="images/logo.jpg" width=778 border=0></DIV></DIV>
<DIV id=navwrap><!-- START #navblock -->
<DIV id=navblock><!-- START #nav -->
<UL id=nav>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category1</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link1</SPAN></A></LI>
<LI><A href="#"><SPAN>Link2</SPAN></A></LI>
<LI><A href="#"><SPAN>Link3</SPAN></A></LI>
<LI><A href="#"><SPAN>Link4</SPAN></A></LI>
<LI><A href="#"><SPAN>Link5</SPAN></A></LI>
</UL>
</LI>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category2</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link11</SPAN></A></LI>
<LI><A href="#"><SPAN>Link12</SPAN></A></LI>
<LI><A href="#"><SPAN>Link13</SPAN></A></LI>
<LI><A href="#"><SPAN>Link14</SPAN></A></LI>
<LI><A href="#"><SPAN>Link15</SPAN></A></LI>
</UL>
</LI>
<LI><A href="#"><IMG height=26 alt="Category" src="images/m1.jpg" width=100 border=0><DIV id="text">Category3</DIV></A>
<UL>
<LI><A href="#"><SPAN>Link21</SPAN></A></LI>
<LI><A href="#"><SPAN>Link22</SPAN></A></LI>
<LI><A href="#"><SPAN>Link23</SPAN></A></LI>
<LI><A href="#"><SPAN>Link24</SPAN></A></LI>
<LI><A href="#"><SPAN>Link25</SPAN></A></LI>
</UL>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
</body>

</html>
================================================== ========================
menus1_

// JavaScript Document
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);


================================================== =======================
home (css)

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333; LINE-HEIGHT: 1.5em; PADDING-TOP: 0px; FONT-FAMILY: Verdana, sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}
P {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; COLOR: #333333; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: justify
}
UNKNOWN {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; COLOR: #333333; LINE-HEIGHT: 1.3em; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: justify
}
H1 {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H1 A:link {
COLOR: #63d7ff; TEXT-DECORATION: none
}
H1 A:visited {
COLOR: #63d7ff; TEXT-DECORATION: none
}
H1 A:hover {
COLOR: #fff
}
H2 {
MARGIN-TOP: -18px; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #0d8ab5; TEXT-INDENT: 5px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
H4 {
MARGIN-TOP: -18px; FONT-WEIGHT: normal; FONT-SIZE: 10px; MARGIN-LEFT: -140px; WIDTH: 195px; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
UNKNOWN {
MARGIN-TOP: -10px; FONT-WEIGHT: normal; FONT-SIZE: 10px; MARGIN-LEFT: 5px; WIDTH: 195px; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
H5 {
MARGIN-TOP: -5px; FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
UNKNOWN {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 1.3em; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TEXT-ALIGN: left
}
#wrap {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -17px auto 0px; WIDTH: 778px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 100%
}
UNKNOWN {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -13px auto 0px; WIDTH: 778px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 100%
}
#navwrap {
PADDING-RIGHT: 0px; MARGIN-TOP: 31px; PADDING-LEFT: 0px; Z-INDEX: 100; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 26px
}
UNKNOWN {
PADDING-RIGHT: 0px; MARGIN-TOP: 31px; PADDING-LEFT: 0px; Z-INDEX: 100; PADDING-BOTTOM: 0px; MARGIN-LEFT: 6px; WIDTH: 100%; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 26px
}
#navblock {
MARGIN-LEFT: 8px; MARGIN-TOP: 0px; FLOAT: left
}
#text {
MARGIN-LEFT: 8px; MARGIN-TOP: -20px; FLOAT: left; COLOR=#fff; CURSOR=hand; TEXT-DECORATION: none
}
#nav {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
#nav UL {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
#nav A {
DISPLAY: block; COLOR: #333; BORDER-BOTTOM-STYLE: none
}
#nav A:hover {
COLOR: #333; BORDER-BOTTOM-STYLE: none
}
#nav LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 22px
}
#nav LI IMG {
MARGIN: 0px
}
#nav LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI UL {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: #000080; LEFT: -999em; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; BORDER-BOTTOM: #00779f 6px solid; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 26px; HEIGHT: auto
}
#nav LI LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #a4d8e9 1px solid; HEIGHT: auto
}
#nav LI LI SPAN {
PADDING-RIGHT: 4px; DISPLAY: block; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 4px; POSITION: relative
}
#nav LI LI A {
DISPLAY: block; COLOR: #fff; TEXT-DECORATION: none
}
#nav LI LI A:visited {
DISPLAY: block; COLOR: #fff; TEXT-DECORATION: none
}
#nav LI LI A:hover {
BACKGROUND: #0d8fbb; COLOR: #fff; TEXT-DECORATION: none
}
#backtopga {
LEFT: 10px; POSITION: absolute; TOP: 8px
}
UNKNOWN {
MARGIN-TOP: 11px; FLOAT: right
}
UNKNOWN {
FLOAT: left
}
#headerbox {
MARGIN-TOP: 17px; WIDTH: 778px
}
UNKNOWN {
MARGIN-TOP: 0px; MARGIN-LEFT: 6px; WIDTH: 778px
}
.headerimage {
MARGIN-TOP: 0px
}
.iconsitemap {
MARGIN-TOP: -100px; BACKGROUND: url(../images/icon_sitemap.gif) no-repeat; MARGIN-LEFT: 303px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -101px; BACKGROUND: url(../images/icon_sitemap.gif) no-repeat; MARGIN-LEFT: 691px; POSITION: absolute
}
.sitemaptext {
MARGIN-TOP: -105px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 327px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -105px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 715px; POSITION: absolute
}
#searchset {
MARGIN-TOP: -72px; MARGIN-LEFT: 440px
}
UNKNOWN {
MARGIN-TOP: -53px; MARGIN-LEFT: 460px
}
#searchset .inputbox {
BORDER-RIGHT: #a4a3a3 1px solid; BORDER-TOP: #a4a3a3 1px solid; MARGIN-TOP: 1px; FONT-SIZE: 11px; BORDER-LEFT: #a4a3a3 1px solid; WIDTH: 180px; COLOR: #000; BORDER-BOTTOM: #a4a3a3 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 15px
}
#searchset #submitbutton {
MARGIN-TOP: 2px; MARGIN-LEFT: 4px; POSITION: absolute
}
UNKNOWN {
MARGIN-TOP: -18px; FLOAT: right; MARGIN-LEFT: 260px
}
#address {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 1px
}
#content {
BORDER-RIGHT: #d4d0c8 1px solid; BORDER-LEFT: #d4d0c8 1px solid; WIDTH: 777px
}
UNKNOWN {
BORDER-RIGHT: #d4d0c8 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 6px; BORDER-LEFT: #d4d0c8 1px solid; WIDTH: 776px; PADDING-TOP: 0px
}
#flashanim {
BORDER-RIGHT: #d4d0c8 1px solid; FLOAT: left; MARGIN-BOTTOM: 5px; WIDTH: 265px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 219px
}
UNKNOWN {
FLOAT: left; WIDTH: 265px; HEIGHT: 219px
}
#maincontent {
MARGIN-TOP: 5px
}
UNKNOWN {
MARGIN-TOP: 0px
}
#newprdmain {
FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 510px; HEIGHT: 220px
}
HTML #newprdmain {
FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 510px; HEIGHT: 220px
}
#newprdheadingbg {
FONT-WEIGHT: bold; FONT-SIZE: 11px; WIDTH: 511px; COLOR: #ffffff; TEXT-INDENT: 6px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 24px; BACKGROUND-COLOR: #666; TEXT-ALIGN: left
}
HTML #newprdheadingbg {
FONT-WEIGHT: bold; FONT-SIZE: 11px; WIDTH: 510px; COLOR: #ffffff; TEXT-INDENT: 6px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 24px; BACKGROUND-COLOR: #666; TEXT-ALIGN: left
}
DL.float-left {
BACKGROUND: #fff; FLOAT: left; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
HTML DL.float-left {
BORDER-RIGHT: #d4d0c8 1px solid; BACKGROUND: #fff; FLOAT: left; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
UNKNOWN {
BORDER-RIGHT: #d4d0c8 1px solid; MARGIN-TOP: 0px; BACKGROUND: #fff; FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 169px; BORDER-BOTTOM: #d4d0c8 1px solid; HEIGHT: 97px; TEXT-ALIGN: center
}
.float-left DT {
PADDING-RIGHT: 10px; MARGIN-TOP: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; COLOR: #000; LINE-HEIGHT: 1.3em; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.float-left DD IMG {
PADDING-RIGHT: 4px; MARGIN-TOP: 6px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; MARGIN-LEFT: -40px; PADDING-TOP: 4px
}
UNKNOWN {
PADDING-RIGHT: 5px; MARGIN-TOP: 14px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN-LEFT: -40px; PADDING-TOP: 5px
}
#prdmap {
MARGIN-LEFT: -102px; WIDTH: 160px; POSITION: absolute; HEIGHT: 70px
}
UNKNOWN {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px; WIDTH: 160px; POSITION: absolute; HEIGHT: 90px
}
#address {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 1px
}
UNKNOWN {
MARGIN-TOP: -10px; MARGIN-BOTTOM: 0px
}
.colorlist {
FONT-SIZE: 11px; COLOR: #990033; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.sitemaplist {
MARGIN-TOP: 30px
}
UNKNOWN {
MARGIN: 30px 0px 0px 8px
}
.list UL {

}
UNKNOWN {

}
.sitemaplist LI {
FONT-WEIGHT: normal; LIST-STYLE-IMAGE: url(../images/bullet_right.gif); MARGIN: 12px 0px 0px -24px
}
UNKNOWN {
MARGIN: 12px 0px 0px -24px
}
#footernav {
PADDING-RIGHT: 0px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: -4px 0px 0px; WIDTH: 778px; PADDING-TOP: 0px; BORDER-BOTTOM: #666666 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; HEIGHT: 23px; BACKGROUND-COLOR: #636363
}
UNKNOWN {
BORDER-TOP: #666666 1px solid; MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; FLOAT: left; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 6px; WIDTH: 778px; BORDER-BOTTOM: #666666 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; LIST-STYLE-TYPE: none; HEIGHT: 23px; BACKGROUND-COLOR: #636363
}
#footernav LI {
PADDING-RIGHT: 1px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
UNKNOWN {
PADDING-RIGHT: 1px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; LIST-STYLE-TYPE: none
}
#footernav A {
FLOAT: left; COLOR: #fff; TEXT-DECORATION: none
}
#footernav A:hover {
COLOR: #000
}
#footernav A:active {
COLOR: #000
}
#footernav A:active {
FONT-WEIGHT: normal
}
LI#t-home A {
MARGIN-LEFT: 19px
}
LI#t-boronic A {
MARGIN-LEFT: 34px
}
LI#t-products A {
MARGIN-LEFT: 33px
}
LI#t-custom A {
MARGIN-LEFT: 32px
}
LI#t-techno A {
MARGIN-LEFT: 30px
}
LI#t-about A {
MARGIN-LEFT: 29px
}
LI#t-contact A {
MARGIN-LEFT: 27px
}
LI#t-catalogs A {
MARGIN-LEFT: 28px
}
LI#t-news A {
MARGIN-LEFT: 30px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 82%; BACKGROUND: url(../images/footer1.gif) repeat-x left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 778px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 26px
}
UNKNOWN {
BACKGROUND: url(../images/footer1.gif) no-repeat left top; MARGIN-LEFT: 6px; WIDTH: 778px; POSITION: relative; HEIGHT: 25px
}
.copy {
FONT-SIZE: 10px; MARGIN: 3px 0px 0px -520px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
FONT-SIZE: 10px; MARGIN: 3px 0px 0px -520px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.copy A {
COLOR: #fff
}
.copy A:hover {
COLOR: #ccc
}
.design {
FONT-SIZE: 10px; MARGIN: -20px 0px 0px 220px; COLOR: #000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
MARGIN: -30px 0px 0px 220px
}
.design A {
COLOR: #fff; TEXT-DECORATION: none
}
.design A:hover {
COLOR: #000; TEXT-DECORATION: underline
}
.privacy {
FONT-SIZE: 10px; MARGIN: -21px 0px 0px 660px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
MARGIN: -21px 0px 0px 660px
}
.privacy A {
COLOR: #fff; TEXT-DECORATION: none
}
.privacy A:hover {
COLOR: #000; TEXT-DECORATION: underline
}
UNKNOWN {
PADDING-TOP: 1px; HEIGHT: 25px
}
DIV {
MARGIN-TOP: 0px
}
P {
MARGIN-TOP: 0px
}


================================================== =======================
soopa-rollovers_

/************************************************** *****************
* soopa-rollovers.js
* 7/28/2001
* www.youngpup.net
*
* easiest rollovers on earth, baby!
* see www.youngpup.net for documentation.
************************************************** *****************/
var javascript_version = 1.0;
javascript_version = 1.1;

var newwin;

function launchwin(winurl,winname,winfeatures)
{
newwin = window.open(winurl,winname,winfeatures);
if(javascript_version > 1.0)
{
setTimeout('newwin.focus();',250);
}
}

function sys(){
launchwin('help/sys_type.cfm','help','top=20,left=20,width=448,hei ght=270,toolbar=no,scrollbars=yes');
}

function soopaSetup() {
var img, sh, sn, sd
for (var i = 0; (img = document.images[i]); i++) {
if (img.getAttribute) {

sn = img.getAttribute("src");
sh = img.getAttribute("hsrc");
sd = img.getAttribute("dsrc");

if (sn != "" && sn != null) {
img.n = new Image();
img.n.src = img.src;

if (sh != "" && sh != null) {
img.h = new Image();
img.h.src = sh;
img.onmouseover = soopaSwapOn
img.onmouseout = soopaSwapOff
}

if (sd != "" && sd != null) {
img.d = new Image();
img.d.src = sd;
img.onmousedown = soopaSwapDown
}
}
}
}
}

function soopaSwapOn() {
this.src = this.h.src;
}

function soopaSwapOff() {
this.src = this.n.src;
}

function soopaSwapDown() {
this.src = this.d.src;
this.temp = typeof(document.onmouseup) != 'undefined' && typeof(document.onmouseup) != 'unknown' ? document.onmouseup : "";
soopaSwapUp.img = this;
document.onmouseup = soopaSwapUp;
}

function soopaSwapUp() {
var ths = soopaSwapUp.img;
ths.src = ths.n.src;
if (ths.temp) document.onmouseup = ths.temp;
}

================================================== =======================
ypSlideOutMenusC
/************************************************** ***
* ypSlideOutMenu
* 3/04/2001
*
* a nice little script to create exclusive, slide-out
* menus for ns4, ns6, mozilla, opera, ie4, ie5 on
* mac and win32. I've got no linux or unix to test on but
* it should(?) work...
*
* Revised:
* - 08/29/2002 : added .hideAll()
* - 04/15/2004 : added .writeCSS() to support more
* than 30 menus.
*
* --youngpup--
************************************************** ***/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
ypSlideOutMenu.minCPUResolution = 10
// constructor
function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
}
ypSlideOutMenu.writeCSS = function() {
document.writeln('<style type="text/css">');
for (var id in ypSlideOutMenu.Registry) {
document.writeln(ypSlideOutMenu.Registry[id].css);
}
document.writeln('</style>');
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hideAll = function()
{
var reg = ypSlideOutMenu.Registry
for (menu in reg) {
ypSlideOutMenu.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }


pardon ?
  Reply With Quote
Old 15-10-2005, 22:40   #8 (permalink)
roto
Floating libation anyone?
 
roto's Avatar
 
Join Date: Apr 2003
Location: El Barco del Amor
Posts: 4,650
Send a message via AIM to roto Send a message via Yahoo to roto
Anyone seen any code 'round here?
__________________
fun: HGC v.4 | last.fm: DT | me | oi! f*ck u roto: ...via meebo!

New to interweb design? Your friends at dt can help.
  Reply With Quote
Old 15-10-2005, 23:05   #9 (permalink)
seen.to
unusual suspect ™
 
seen.to's Avatar
 
Join Date: Jul 2004
Location: DE, USA
Posts: 3,067
What a total fucking mess.

Rewind and come again.
__________________
[[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]
  Reply With Quote
Old 16-10-2005, 00:58   #10 (permalink)
mundi
Registered User
 
Join Date: Oct 2005
Posts: 4
oh,,,, i know guys...im sorry, i have been up for days, im going to bed now, can you please help me??? here is the demo link where it is
http://www.xvcd.info/test.html
  Reply With Quote
Old 16-10-2005, 01:26   #11 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,340
JavaScript is totally unneccessary for the sort of thing you're doing. I'd recommend going the much simpler route of using (X)HTML and CSS.

Check out - http://www.alistapart.com/articles/dropdowns/
  Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive - Top
Search Engine Optimization by vBSEO 3.0.0 RC8