 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Denise_van_Hoorn
Threadersteller
Dabei seit: 24.01.2006
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 24.01.2006 17:34
Titel Häßliche Ränder im Menüscript und ich bekomme sie nicht weg |
  |
|
Hallo allerseits... 
ich habe ein vielleicht bei einigen sehr bekanntes und wie ich meine gutes Javascript gefunden (Sliding Menu von ScriptBreaker.com (Webseite nicht mehr existent)) und mein eigenes Menü daraus gebastelt (http://www.mcglencairn.de/inhalt.html)
Es besteht aus grafischen Elementen, die gleich einer Pergamentrolle aufgezogen werden. Leider sind häßliche Zwischenräume zu sehen, die ich nicht wegbekomme. Ursachen dafür sind viele:
Ich kann kein Java (nur Basic)  ) und kapiere den JavaScript-Code nicht.
Ich verstehe kaum CSS und habe schon vieles probiert, leider ohne den gewünschten Erfolg. Ich habe zwar ein wenig mit CSS erreichen können, vieles nachgeschaut, die häßlichen Zwischenräume aber bleiben.
Ich habe das Internet abgesucht, u.a. gegoogle'd nach "ScriptBreaker" und habe mir vieles durchgelesen, was dazu zu finden war, war ua. auf "SelfHTML" und diversen anderen zum Thema CSS bzw. Java doch habe ich keine Lösung gefunden, die das Problem hätte beseitigen können. Habe viele Parameter temporär verändert, um zu schauen, was sie bewirken.
Ich habe die Parameter im "inhalt.html" beim | Code: | | <img src="..." height=""> |
erhöht oder verringert, dann wird es zwar im Firefox schick angezeigt, der dußliche IE allerdings behält die Zwischenräume und schiebt das "Impressum" unter die unterste Grafik.
Jetzt bin ich am Ende mit meiner Weisheit.  Vielleicht hat jemand von Euch ein paar Stichworte zu denen ich nachschauen kann oder einen Tipp wo es hakt.
Wie bekomme ich die Zwischenräume weg? 
Habt Dank für Eure Hilfe.
Denise
-----
Hier der Code der Webseite "inhalt.html":
| Code: |
<html><head>
<title>McGlecairn-Inhalt</title>
<style>
.menu
{
position:relative;
width:242;
font-size:0px;
font-family:Arial;
color: #00ff00;
position:absolute;
cursor:se-resize;
}
.item_panel
{
background-color: #ff0000;
width:242;
clip:rect(0,242,0,-30);
position:absolute;
}
.item_panel a
{
text-decoration:none;
color:black;
cursor:hand;
}
.item
{
width:242;
font-size:0px;
color: #0000ff;
font-family:arial;
}
</style></head>
<body style="background-image:url(./grafiken/bricks.jpg)">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td> <script language="JavaScript" src="./js/sliding_menu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
//Link[nr] = "position [0 is menu/1 is item],Link name,url,target (_blank|_top|frame_name)"
var Link = new Array();
Link[0] = "0|<img src='./grafiken/menu/rolle_oben.gif' width='242' height='46' border='none'>";
Link[1] = "1|<img src='./grafiken/menu/home.gif' width='242' height='25' border='0'>|./home.html|mainFrame";
Link[2] = "1|<img src='./grafiken/menu/mcglencairn--.gif' width='242' height='25' border='0'>|./cfg_surroundings.php|mainFrame";
Link[3] = "1|<img src='./grafiken/menu/ausstattung__.gif' width='242' height='25' border='0'>|./cfg_mail.php|mainFrame";
Link[4] = "1|<img src='./grafiken/menu/aktionen.gif' width='242' height='25' border='0'>|./cfg_numbers.php|mainFrame";
Link[5] = "1|<img src='./grafiken/menu/galerie.gif' width='242' height='25' border='0'>|./php/cpg143/index.php|mainFrame";
Link[6] = "1|<img src='./grafiken/menu/anfrage.gif' width='242' height='25' border='0'>|./cfg_date.php|mainFrame";
Link[7] = "1|<img src='./grafiken/menu/gaestebuch.gif' width='242' height='25' border='0'>|./php/allmyguests/index.php|mainFrame";
Link[8] = "1|<img src='./grafiken/menu/links.gif' width='242' height='25' border='0'>|./php/allmylinks/index.php|mainFrame";
Link[9] = "1|<img src='./grafiken/menu/impressum.gif' width='242' height='25' border='0'>|./cfg_broken.php|mainFrame";
Link[10] = "0|<img src='./grafiken/menu/rolle_unten.gif'>";
startup("1");
// startup(); to see no default items
// startup("all"); to open all the items at the pageload
// startup("1|2"); to open the first and the second item_panel
// startup("4"); to open the fourth item_panel
</script>
</td>
</tr>
</table><p>
</body>
</html>
|
Hier das dazugehörige JavaScript:
| Code: |
//free JavaScripts on http://www.ScriptBreaker.com
var open_close = true// true or false, false = close the previous item_panel first when opening a new one
var height = 45; // height of the menu headers
var iheight = 27; // height of the menu_items
var speed = 1; // time between changing heigth of the item_panel
var steps = 1; // changing heigth in steps of
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 243
var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link[i].split("|");
if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn;
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='prepare("+smc+","+mni+")'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}
document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
csmc++;
}
}
if (start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn + 5;
self_menu[smc] = new Array(tmn,h,0,-2);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "darkblue";
obj.style.borderBottomWidth = 0;
obj.style.borderBottomStyle = "solid";
}
document.write("</div>");
}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}
function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}
var prevnr = -1;
var prevc = -1;
var vprepare = "stop";
var step = 0;
function prepare(nr,c)
{
if (open_close)
{
if(prevnr == -1)
{
if(self_menu[nr+1][2] == 0)
{
prevnr = nr;
prevc = c;
}
else
{
prevnr = -1;
prevc = -1;
}
step = 0;
pull_down(nr,c);
}
else
{
if((step == 0) && (prevnr != -1))
{
if (self_menu[nr+1][2] == 1)
{
step = 0;
prevnr = -1;
prevc = -1;
pull_down(nr,c);
}
else
{
step = 1;
pull_down(prevnr,prevc);
prevnr = nr;
prevc = c;
}
}
else
{
step = 0;
pull_down(prevnr,prevc);
}
}}
else {pull_down(nr,c);vprepare = "stop"}
}
function end_prepare()
{
if (step == 1) prepare();
else {if (timerID != "") clearTimeout(timerID);}
}
function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[i][2] == 1)
{open_item += self_menu[i][1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}
function epull_down(nr,to,nowv)
{
if((nowv + steps) >= to) {vsteps = to - nowv;}
else {vsteps = steps;}
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+vsteps)+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+vsteps;
}
nowv+=vsteps;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else {timerID = "";if(startid != "stop") open_all(); else end_prepare()}
}
function epull_up(nr,to,nowv)
{
if((nowv-steps) <= to) {vsteps = nowv-to;nowv = 0;if(to == -1) vstep = nowv}
else {vsteps = steps;}
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-vsteps;
}
nowv-=vsteps;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else {timerID = "";end_prepare();}
}
var lb = new Array();
function startup(nr)
{
write_menu();
if(nr)
{
if(((nr.indexOf("|") != -1) || (nr.indexOf("all") != -1)) && (open_close == true)) alert("Error: the open_close property can only be used with a maximum of 1 default item.");
if (nr == "all")
{
j = 0;
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] != -2) {lb[j] = self_menu[i][3];j++;}
}
}
else
{
lb = nr.split("|");
}
open_all();
}
else startid = "stop";
}
//free JavaScripts on http://www.ScriptBreaker.com
var startid = 0;
var open_part = 0;
function open_all()
{
startid = lb[open_part];
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == startid)
{
open_part++;
prevnr = i;
prevc = startid;
pull_down(i,startid);
i==self_menu.length;
}
}
if(open_part == lb.length) startid = "stop";
}
|
|
|
| |
  |
 |
Falk Wussow
Dabei seit: 13.12.2005
Ort: Wiesbaden
Alter: -
Geschlecht: 
|
Verfasst Fr 27.01.2006 11:53
Titel
|
|
|
irgendwie finde ich nirgendwo einen <br>, der die nächste zeile einleitet. das find ich persönlich schonmal interessant.
vielleicht könnte man mal probieren, in jeder zeile aus
| Code: | | Link[1] = "1|<img src='./grafiken/menu/home.gif' width='242' height='25' border='0'>|./home.html|mainFrame"; |
das zu machen:
| Code: | | Link[1] = "1|<img src='./grafiken/menu/home.gif' width='242' height='25' border='0'><br />|./home.html|mainFrame"; |
|
|
| |
 |
|
|
Anzeige
|
|
|
caZpa
Account gelöscht
Ort: -
|
Verfasst Fr 27.01.2006 12:00
Titel
|
|
|
| Code: | | var iheight = 27; // height of the menu_items |
die sind doch 25 hoch
|
|
| |
|
|
kronk
Dabei seit: 10.02.2003
Ort: Legoland
Alter: -
Geschlecht:
|
Verfasst Fr 27.01.2006 12:49
Titel
|
|
|
So viel Code für so ein Scheißmenü! 
|
|
| |
|
|
Sidschei
Dabei seit: 20.06.2003
Ort: Ponyhof
Alter: 115
Geschlecht:
|
Verfasst Fr 27.01.2006 13:11
Titel
|
|
|
...die Ränder finde ich gar nicht mal so schlecht...
Wenn nur dieses dämliche Menue - welches ich zu den häßlichsten, die ich jemals gesehen habe zählen möchte - nicht wäre! 
|
|
| |
|
|
Denise_van_Hoorn
Threadersteller
Dabei seit: 24.01.2006
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 03.02.2006 17:07
Titel
|
|
|
@CAINAM & caZpa:
Eure Tips haben es leider nicht gebracht. <br> muß nicht eingefügt werden, dadurch daß ja eine Tabelle eröffnet wird, in welcher jeder Menüeintrag durch ein </td> abgeschlossen wird.
iheight gibt die Höhe der Zellen an. Setzt man sie auf 2 wird das Menü nur ein wenig geöffnet. Setze ich sie auf 25, zeigt Mozilla das Menü schön an, der IE allerdings behält die häßlichen Ränder, und zeigt "Impressum" nur noch halb.
@kronk & Sidschei:
Soviel zur unkonstruktiven Kritik. Und nun Eure Gegenvorschläge?
Denise
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Illustrator CS3: Weiße Ränder
[suche script etc.] mausempfindliche ränder
Weisse Ränder in GoLive mit Layoutraster
Illustrator CS3 - Schwammfilter erzeugt weiße Ränder
Ränder ähnlich denen bei Aktien/Geldscheinen?
Um Grafiken ganz schwache weiße Ränder?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
