Div hvad går der galt.. er det højde eller linieskift
Jeg har fundet et glimrene script lavet af bratti, som jeg har lavet lidt om på...Jeg har opdaget at den benytter sig en del af <div></div>, som jeg ikke kender det store til...
Jeg har forsøgt at ændre baggrunds farven, som det ses herunder
#divCont {position:relative; z-index:1; left:50px; top:30px; height:30px; width:300px; visibility:hidden;}
.clTop {position:absolute; z-index:1; width:300px; line-height:20px; Background-color=navy}
.clSub {position:absolute; z-index:1; left:0px; top:20px; width:300px; line-height:16px;}
===divet bliver brugt i koden herunder===
<div id="divCont"> <!-- These are the contents of the foldoutmenu. -->
<div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()"> |-SBW-|Gambi</a><br>
<div id="divSub0" class="clSub">
Der
</div><br>
</div>
koden virker fint og der bliver også sat en baggrunds farve bag teksten. Men når man kører siden, ser det ud til, at der er oprettet en ekstra linie, dvs at teksten står øverst, men nedenunder er der en tom linie, som ligger i den samme "kasse/boks", som teksten...
Mit spørgsmål er:
hvad sker der?
er det højden? -> hvordan justeres den så?
er det en ekstra linie der kommer ind-> hvordan fjernes den?
Hvis det kan gøre det nemmere står hele source koden herunder:
<HTML>
<HEAD>
<LINK href="style.css" media=all rel=stylesheet>
<TITLE>
welcome to Clan |-SBW-| Homepage
</TITLE>
<style type="text/css">
#divCont {position:relative; z-index:1; left:50px; top:30px; height:30px; width:300px; visibility:hidden;}
.clTop {position:absolute; z-index:1; width:300px; line-height:20px; Background-color=navy}
.clSub {position:absolute; z-index:1; left:0px; top:20px; width:300px; line-height:16px;}
/*** This sets the style for the links inside the menu. ***/
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
FoldoutMenu
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/*** variables you can configure ***/
FoldNumber = 7 //How many toplinks do you have?
var stayFolded = false //Stay open when you click a new toplink?
foldImg = 0 //Do you want images (if not set to 0 and remove the images from the body)?
mainOffsetY = -22 //Vertical space adjustment between the main items, in pixels.
//This is the default image.
//Remember to change the actual images in the page as well, but remember to keep the name of the image.
var unImg=new Image();
unImg.src='foldoutmenu_arrow.gif'
var exImg=new Image(); //Making an image variable...
exImg.src='foldoutmenu_arrow_open.gif' //...this is the source of the image that it changes to when the menu expands.
// NOTE: if you change the position of divCont from absolute to relative, you can put the foldoutmenu in a table.
// HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.
/*** There should be no need to change anything beyond this. ***/
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
scrX= innerWidth; scrY= innerHeight;
document.onmousemove= function(){
if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
scrX = innerWidth;
scrY = innerHeight;
initFoldout();
}
};
}
//object constructor...
function makeMenu(obj,nest){
nest= (!nest)?"":'document.'+nest+'.';
this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);
this.css= bw.ns4?this.el:this.el.style;
this.ref= bw.ns4?this.el.document:document;
this.x= (bw.ns4||bw.opera5)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.opera5)?this.css.top:this.el.offsetTop;
this.h= (bw.ie||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
this.vis= b_vis;
this.hideIt= b_hideIt;
this.showIt= b_showIt;
this.moveIt= b_moveIt;
return this
}
//object methods...
function b_showIt(){this.css.visibility='visible'}
function b_hideIt(){this.css.visibility='hidden'}
function b_vis(){if(this.css.visibility=='hidden' || this.css.visibility=='HIDDEN' || this.css.visibility=='hide') return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
if(bw.bw){
if (!stayFolded){
for (var i=0; i<oSub.length; i++){
if (i!=num){
oSub[i].hideIt()
if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
}
}
for(var i=1; i<oTop.length; i++){
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
}
}
if (oSub[num].vis()){
oSub[num].showIt()
if (foldImg)oTop[num].ref["imgA"+num].src = exImg.src
}else{
oSub[num].hideIt()
if(foldImg)oTop[num].ref["imgA"+num].src = unImg.src
}
for(var i=1; i<oTop.length; i++){
if (!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+oSub[i-1].h+mainOffsetY)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+mainOffsetY)
}
}
}
/*********************************************************************
The init function... there should be no need to change anything here.
*********************************************************************/
function initFoldout(){
//Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
if (bw.opera5) bw.ns6 = 0
oTop = new Array()
oSub = new Array()
//Making the objects and hiding the subs...
for (var i=0; i<FoldNumber; i++){
oTop[i] = new makeMenu('divTop'+i,'divCont')
oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
oSub[i].hideIt()
}
//Positioning the top objects...
oTop[0].moveIt(0,0)
for (var i=1; i<oTop.length; i++){
oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
}
//Making the containing menu object and showing it...
oCont = new makeMenu('divCont')
oCont.showIt()
}
// If the browser is ok, the script is started onload...
if(bw.bw) onload = initFoldout;
</script>
</HEAD>
<BODY BGCOLOR=000000>
<CENTER>
<TABLE WIDTH=598 border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD COLSPAN=5 HEIGHT=83 BACKGROUND=billeder\logo.jpg>
</TD>
</TR>
<TR>
<TD WIDTH=152 HEIGHT=18 BACKGROUND=billeder\midt1.jpg>
</TD>
<TD WIDTH=59 BACKGROUND=billeder\midt2.jpg>
</TD>
<TD WIDTH=302 BACKGROUND=billeder\midt3.jpg>
<marquee scrolldelay="66" scrollamount="3"><font color=silver><B>Welcome to Clan SBW' Homepage</B></font></marquee>
</TD>
<TD WIDTH=63 BACKGROUND=billeder\midt4.jpg>
</TD>
<TD WIDTH=22 BACKGROUND=billeder\midt5.jpg>
</TD>
</TR>
<TR>
<TD BACKGROUND=billeder\navi.jpg VALIGN=TOP>
<script type="text/javascript" src="menu.js"></script>
</TD>
<TD COLSPAN=3 HEIGHT=400 VALIGN=TOP>
<div id="divCont"> <!-- These are the contents of the foldoutmenu. -->
<div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()"> |-SBW-|Gambi</a><br>
<div id="divSub0" class="clSub">
Der
</div><br>
</div>
<div id="divTop1" class="clTop"><a href="#" onclick="menu(1); return false" onfocus="this.blur()"> |-SBW-|Jule</a><br>
<div id="divSub1" class="clSub">
Der
</div><br>
</div>
<div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()"> |-SBW-|The Unknown</a><br>
<div id="divSub2" class="clSub">
Der
</div><br>
</div>
<div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()"> |-SBW-|DezoneD</a><br>
<div id="divSub3" class="clSub">
Der
</div><br>
</div>
<div id="divTop4" class="clTop"><a href="#" onclick="menu(4); return false" onfocus="this.blur()"> |-SBW-|Spliff</a><br>
<div id="divSub4" class="clSub">
Der
</div><br>
</div>
<div id="divTop5" class="clTop"><a href="#" onclick="menu(5); return false" onfocus="this.blur()"> |-SBW-|Mylow</a><br>
<div id="divSub5" class="clSub">
Der
</div><br>
</div>
<div id="divTop6" class="clTop"><a href="#" onclick="menu(6); return false" onfocus="this.blur()"> |-SBW-|Steel</a><br>
<div id="divSub6" class="clSub">
Der
</div><br>
</div>
</div> <!-- Here ends the foldoutmenu. -->
</TD>
<TD BACKGROUND=billeder\navi2.jpg>
</TD>
</TR>
<TR>
<TD COLSPAN=5 BACKGROUND=billeder\bund.jpg>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
