• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zeilenabstand in Popup-Menü verändern

Status
Für weitere Antworten geschlossen.
S

sabine87

Neues Mitglied
Hallo zusammen,

ich hab ein wirklich kleines Problem mit einem Pop-Menü
und hoffe jemand von euch kann mir dabei helfen.

Problem: Ich möchte gerne den Zeilenabstand zwischen den
einzelnen Navigationspunkten (Unterpunkt1a, Unterpunkt2a, ...)
aus dem Popup-Menü verkleinern. Ich hab schon alles mögliche
ausprobiert, aber der Abstand zwischen den Unterpunkten
will einfach nicht kleiner werden. :(

Hier mal der Quelltext. Hoffe damit kann man was anfangen.
Bin für jede Hilfe dankbar.

Liebe Grüsse
Sabine

Code: 
<!-- Begin
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
} 

var popTimer = 0;
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + 

parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + 

parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {


while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}

function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}


function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, 

textClass) {
this.isVert = isVert;
this.popInd = popInd
this.x = x;
this.y = y;
this.width = width;
this.overCol = overCol;
this.backCol = backCol;
this.borderClass = borderClass;
this.textClass = textClass;
this.parentMenu = null;
this.parentItem = null;
this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;
for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {

var str = '', itemX = 0, itemY = 0;
for (currItem = 1; currItem < menu[currMenu].length; currItem++) 
with (menu[currMenu][currItem]) {

var itemID = 'menu' + currMenu + 'item' + currItem;
var w = (isVert ? width : length);
var h = (isVert ? length : width);

if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; 

top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; '; str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" 

width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" 
onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';
str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {

menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + 
'</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" 
' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}

var menu = new Array();
var defOver = '#c9e19b', defBack = '#DDEBC1'; 
var defLength = 22;
menu[0] = new Array();
menu[0][0] = new Menu(false, '', 20, 5, 17, '#ddebc1', '#c9e19b', '','itemText');
menu[0][1] = new Item('  Punkt1', '#', '', 160, 6, 1);
menu[0][2] = new Item('  Punkt2', '#', '', 140, 6, 2);
menu[0][3] = new Item('  Punkt3', '#', '', 75, 6, 3);

menu[1] = new Array();
menu[1][0] = new Menu(true, '>', 0, 17, 160, defOver, defBack, 'itemBorder', 

'itemText1');
menu[1][1] = new Item('Unterpunkt1a', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Unterpunkt2a', '#','', defLength, 0, 0);
menu[1][3] = new Item('Unterpunkt3a', '#', '', defLength, 0, 0);
menu[1][4] = new Item('Unterpunkt4a', '#', '', defLength, 0, 0);

menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 17, 140, defOver, defBack, 'itemBorder', 

'itemText1');
menu[2][1] = new Item('Unterpunkt1b', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Unterpunkt2b', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Unterpunkt3b', '#', '', defLength, 0, 0);
menu[2][4] = new Item('Unterpunkt4b', '#', '', defLength, 0, 0);
menu[2][5] = new Item('Unterpunkt5b', '#', '', defLength, 0, 0);
menu[2][6] = new Item('Unterpunkt6b', '#', '', defLength, 0, 0);

menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 17, 75, defOver, defBack, 'itemBorder', 

'itemText1');
menu[3][1] = new Item('Unterpunkt1c', '#', '', defLength, 0, 0);
menu[3][2] = new Item('Unterpunkt2c', '#', '', defLength, 0, 0);
menu[3][3] = new Item('Unterpunkt3c', '#', '', defLength, 0, 0);

menu[4] = new Array();
menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder', 

'crazyText');

menu[4][1] = new Item('Recent Doc 1:<br>Punkt1d', '#', '', 36, 4, 0);
menu[4][2] = new Item('Recent Doc 2:<br>Punkt2d', '#', '', 36, 7, 0);
menu[4][3] = new Item('Recent Doc 2:<br>Punkt3d', '#', '', defLength, 0, 0);

menu[5] = new Array();
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 

'itemText');
menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0);

var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) 

location.reload()');

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt)
{
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
}

function moveRoot()
{
 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
// -->
</script>

        <style>
<!--
#rahmen { position: absolute; top: 25px; left: 0px; width: 488px; height: 13px; 

visibility: visible }
#rahmen2 { position: absolute; top: 130px; left: 20px; width: 265px; height: 

37px; visibility: visible }
#rahmen3 { position: absolute; top: 175px; left: 20px; width: 355px; height: 

208px; visibility: visible }
.crazyborder { border: outset 2px #c9e19b }
.crazytext { color: #5e6e66; font: bold 12px Verdana, Arial, Helvetica; 

text-decoration: none }
.itemborder { border: solid 0px black }
.itemtext { color: #5e6e66; font: bold 12px Verdana, Arial, Helvetica; 

text-decoration: none }
.itemtext1 { color: #5e6e66; font: bold 10px Verdana, Arial, Helvetica; 

text-decoration: none }-->
</style>
</head>
 
Zuletzt bearbeitet von einem Moderator:
Hallo sabine87,

ich möchte dich bitten, den Quellcode auf die nötigen Teile zu kürzen und Code-Tags zu benutzen ([noparse]Normaler Code:
Code:
, Html-Code:
HTML:
, PHP-Code:
PHP:
[/noparse]).
Solange du das nicht machst, werde ich alle Antworten temporär löschen.

Edit:
Normalerweise wird der Zeilenabstand durch eines der folgenden CSS-Attribute Verändert, weshalb ich glaube, dass du im JavaScript-Bereich völlig falsch bist:
height, padding, margin, line-height
 
Hallo Artemis,

ich wollte hier wirklich kein Chaos fabrizieren. Die ganze Materie hier
ist neu für mich. Ich hab den Quellcode hier so reinkopiert, weil ich
selber nicht genau weiss, was wichtig ist und was nicht. Natürlich
kann ich den Quellcode auf die nötigen Teile kürzen. Nur weiss ich
leider nicht was Du mit

"(Normaler Code:, Html-Code:
HTML:
, PHP-Code:
PHP:
)"

meinst und wie ich das machen muss.

Wenn ich hier mit meiner Frage völlig falsch bin, kann ich dann
meine Frage unter "CSS" nochmal neu stellen? Vielleicht könntest
Du mir mit dem Quellcode kürzen irgendwie helfen.

Liebe Grüsse
Sabine
 
Also,

du hast ja JavaScript-Code gepostet. Diesen schreibst du aber nicht einfach hierhin, sondern so:
[noparse]
Code: 
Mein kurzer JavaScript-Code
[/noparse]
Daraus wird dann
Code: 
Mein kurzer JavaScript-Code

Am einfachsten wäre em im Moment wenn du deine Datei einfach auf einen Server hochlädst damit wir uns angucken können, wie das Aussieht und wie man Das Problem am besten beheben kann.
 
Hallo Artemis,

ich hab deinen Rat befolgt und die Datei auf einen Server hochgeladen.
http://www.raritaetenladen.de/script/popup_menue.html

Das Problem ist: wie kann ich den Zeilenabstand zwischen den einzelnen
Unterpunkten (Unterpunkt1, Unterpunkt2, ...) aus dem Menü kleiner machen.

Wäre wirklich super nett wenn du oder jemand anderes mir da
weiterhelfen könnte.

Liebe Grüsse
Sabine
 
Ist der Quelltext wirklich dein Ernst?
Für ein Untermenü diesen Quelltext:
HTML: 
<div id="menu1item1" style="background: rgb(221, 235, 193) none repeat scroll 0%; position: absolute; left: 0pt; top: 0pt; width: 100px; height: 22px; visibility: inherit; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" class="itemBorder" onmouseover="popOver(1,1)" onmouseout="popOut(1,1)">
  <table border="0" cellpadding="3" cellspacing="0" width="92">
    <tbody>
      <tr>
        <td align="left" height="15">
          <a class="itemText1" href="#">
            Unterpunkt 1
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Du solltest das vielleicht mal überdenken. Auch der CSS-Teil des Divs ist teilweise schwachsinnig.
background: rgb(221, 235, 193) none repeat scroll 0%;
Zum Vergrößern anklicken....
Diese Eigenschaft (background-attachment) ist nur für Hintergrundbilder. (css4you, selfhtml)

Zusätzlich ist die Methode, dass du fast alle CSS-Angaben direkt in der HTML-Datei machst (also im style-Attribut der Tags) widersprüchlich zur Trennung von Layout und Inhalt.

Um jetzt den Abstand der Items zueinander zu verkleinern, musst du in allen divs, die für einen Unterpunkt da sind die Höhe von 22px auf meinetwegen 20px verkleinern.

Da du das nicht selber kannst/weißt zweifel ich stark daran, dass du den Code selber geschrieben hast.
 
Hallo Artemis,

zunächst mal herzlichen Dank für deine Hilfe. Den Zeilenabstand hab ich jetzt
ändern können. Den Code hab ich nicht selber geschrieben (das kann ich leider nicht). Ich hab ihn von einem Freund bekommen, der sich damit aber auch nicht auskennt. Daher mag auch einiges in dem Code schwachsinnig sein. :) Aber wenigstens funktioniert das ganze jetzt.

Jetzt hätte ich aber noch eine andere Frage und hoffe du kannst mir da
nochmal weiterhelfen. Wie kann ich einen Link in der folgenden Zeile einem
bestimmten Frame zuordnen? Das Menü liegt in einem Frame und wenn man
einen Punkt auswählt, dann soll in einem anderen Frame der Inhalt angezeigt werden. Wäre sehr lieb von dir, wenn du mir da nochmal helfen könntest.

Code: 
 menu[1][1] = new Item('Punkt1', 'http://www.xyz.de/Unterpunkt1', '', defLength, 0, 0);

Liebe Grüsse
Sabine
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben