Fireworks Bug - nach Buttonerstellung wird Website fehlerhaft dargestellt

[buc]

Hallo zusammen,

seit kurzer Zeit beschäftige ich mich mit Fireworks CS4 und möchte ne Website gestalten, da ich keine Programmierkenntnisse habe, eignet sich Fireworks gut dazu. Bis jetzt hat alles gut geklappt aber nun habe ich ein kleines Problem. Die top navi hat von der Bearbeitung her gut geklappt aber die Unternavigation (einfache Texte mit farbigem Mouseover) klappt nicht, obwohl ich genauso vorgegangen bin wie zuvor. Ich hoffe mir kann hier geholfen werden, ich bin schier am verzweifeln ...

Hab die Buttons ganz normal über Bearbeiten -> Objekt einfügen -> Neue Taste erstellt, und dann mit Status "Up, Over, Down"

Anbei die "Website" und ein Bild, wie die Website eigentlich aussehen sollte (dass es so angezeigt wird muss ich den Button der Unternavigation löschen und nur ein Textfeld aufziehen, das aber leider nicht mit einem Hyperlink versehen werden kann, bzw. nicht die Schriftfarbe für's Mouseover ändert.

Vielen Dank,
buc

[Brainfish]

Guten Tag,

soweit ich mich erinnern kann ist das HTML was Fireworks ausgibt nicht so optimal. (in früheren Versionen)

In welchem Browser hast du die Seite getestet? (Internet Explorer oder Firefox)

Würde daher dazu raten die HTML Seite selbst (per Hand) zu erstellen.

[buc]

Ich arbeite ja mit CS4 und hier müsste ja das HTML eigentlich gut ausgegeben werden. Vorallem find' ichs komisch, das es mit den oberen Buttons klappt, aber mit denen seitlich links nicht.

Und wie meinst du das mit "die HTML Seite selbst zu erstellen?" Ich hab' leider keine Programmierkenntnisse. Oder is es irgendwie möglich nur diese Unternavigation nicht mit Fireworks sondern mit Dreamweaver zu erstellen. Also quasi den Rest den ich bis jetzt erstellt hab von Fireworks für Dreamweaver zu verwenden?

Danke und Gruß,
buc

[buc]

Was vllt auch noch zu erwähnen wäre, so sieht das Dokument in Fireworks aus. In der oberern Navi werden keine Slices angezeigt und in der unteren schon. Oder liegt das nur daran, das der Button nicht ganz links sitzt? Hab ich aber auch schon ausprobiert, der Anzeigefehler besteht dennoch.

[Brainfish]

Kannst alternativ, wenn du keine Ahnung hast, auch Dreamweaver oder ein anderes WYSIWYG Programm benutzen.

Du kannst die Seite nachbearbeiten indem du die index.html, oder index.htm (oder wie die Export-Datei auch heißen mag) öffnest und bearbeitest.

// Zu deinem Nachtrag: Das grüne oben sind ja Segmente, und diese werden Exportiert.

Schau dir mal die Exportvorschau > Exportieren > Optionen an (so in der Art). Dort gab es meines Wissens nach ein paar HTML Einstellungen die man vornehmen konnte, wie Abstandshalter ect. Vielleicht bringt dich das ja ein Stück weiter. (Problem Abstandshalter?)

Ansonsten per Hand in der HTML-Datei nachschauen wo der Fehler sein könnte, bzw. wenn genug Kenntnisse vorhanden sind, selbst den CSS Aufbau machen und die Grafiken ect. dann einfügen.

P.S. Problem kann vielfältiger Art sein, weil kein HTML Code und keine Source-Datei (Fireworks PNG) reingestellt sind.

[buc]

Hallo Brainfish,

vielen Dank! Hab tatsächlich nur was in den Exportoptionen verändern müssen. Unter "Tabelle" Abstand mit: "Verschachtelte Tabellen - keine Abstandshalter" und zuvor war "Einzelne Tabellen - keine Abstandshalter" ausgewählt.

Jetzt hab ich aber noch ein kleines Problem, egal auf welchen Button man klickt oben links erscheint beim Klick immer ein kl. blauer Punkt. Wie bekomm ich den noch weg? Der macht das Layout kaputt find ich...
Anbei das Bild.

Danke und Gruß,
buc

[Brainfish]

Nur die 2 Pixel werden blau angezeigt?

Such mal in der HTML-Datei und JS-Datei wenn vorhanden, im Quellcode nach #0000ED.

[buc]

... genau ja, nur die zwei Pixel. Aber nur beim Klick, wenn also die jeweilige Seite angezeigt wird, werden diese zwei Pixel immer mitangezeigt. Auch oben in der Topnavi. Aus Demonstrationszwecken, hab ich halt mal "Forschung & Entwicklung" angeklickt. Wenn ich aber "Unternehmen" anklicke, erscheinen diese zwei Pixel eben auf diesem Button. Quasi ein zusätzliches Feedback, welcher Button gerade aktiv ist. (Das ich aber nicht schön finde, und auch nicht eingebaut hab)

Hab übrigens in der fertigen HTML nach dem Farbcode gesucht und nichts gefunden, leider. Gibt es denn noch eine andere Möglichkeit? Das muss Fireworks ja irgendwie und irgendwo abgespeichert haben.

EDIT: In den exportierten Bilddateien sind ebenfalls keine blauen Pixel zu finden.

Danke und Gruß,
buc

[Brainfish]

Haben oben die Buttons (<img> Tag) das Attribut border="0" ?

Ansonsten gerade keine Gedankenbrösel dazu parat.

[buc]

Alle border/cellspacing/cellpadding - Attribute stehen auf "0". Im gesamten Dokument. Trotzdem danke ... :)

[Brainfish]

Tritt der Fehler in allen Browsern auf?

Du könntest einfach noch ein CSS Style festlegen, vielleicht ist dass das Problem.

Das hier Testweise in den <head>
<style type="text/css">
<!--
a:active, a:link, a:visited, a:hover {
color: #000000;
text-decoration: none;
}
-->
</style>
Wie gesagt, ohne Quellcode und Sourcedatei kann man da nur Mutmaßungen anstellen, was das Problem sein könnte. Ist wie bei einem Auto was nicht mehr fährt. Und der Mechaniker soll den Fehler finden, ohne es zu untersuchen. Das Benzin könnte leer sein, aber ebenso ein Motorschaden o.ä. ;)

[buc]

Hi,

auch das war ein guter Tipp. Danke. Aber jetzt sind so gestrichelte Linien um den Button sichtbar. Im Anhang das Bild

Hier der HTML-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link nur für registrierte und freigeschaltete Mitglieder sichtbar]">
<!-- saved from url=(0014)about:internet -->
<html xmlns="[Link nur für registrierte und freigeschaltete Mitglieder sichtbar]">
<head>
<title>Seite 1.jpg</title>
<meta [Link nur für registrierte und freigeschaltete Mitglieder sichtbar]"Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Sun May 24 14:13:49 GMT+0200 (CEST) 2009-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body bgcolor="#666666" onload="MM_preloadImages('Seite%201_r2_c1_f2.jpg','Seite%2 01_r2_c1_f3.jpg','Seite%201_r2_c3_f2.jpg','Seite%2 01_r2_c3_f3.jpg','Seite%201_r2_c5_f2.jpg','Seite%2 01_r2_c5_f3.jpg','Seite%201_r2_c6_f2.jpg','Seite%2 01_r2_c6_f3.jpg','Seite%201_r2_c7_f2.jpg','Seite%2 01_r2_c7_f3.jpg','Seite%201_r2_c8_f2.jpg','Seite%2 01_r2_c8_f3.jpg','Seite%201_r2_c9_f2.jpg','Seite%2 01_r2_c9_f3.jpg','Seite%201_r4_c2_f2.gif','Seite%2 01_r4_c2_f3.gif');">
<table width="805" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="bader_led_website3kl.png" fwpage="Seite 1" fwbase="Seite 1.jpg" fwstyle="Dreamweaver" fwdocid = "397605256" fwnested="1" -->
<tr>
<td><img name="Seite1_r1_c1" src="Seite%201_r1_c1.jpg" width="805" height="1" border="0" id="Seite1_r1_c1" alt="" /></td>
</tr>
<tr>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="805">
<tr>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c1','Seite%201_r2_c1_ f2.jpg','Seite%201_r2_c1_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c1','Seite% 201_r2_c1_f3.jpg',1);"><img name="Seite1_r2_c1" src="Seite%201_r2_c1.jpg" width="115" height="45" border="0" id="Seite1_r2_c1" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c3','Seite%201_r2_c3_ f2.jpg','Seite%201_r2_c3_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c3','Seite% 201_r2_c3_f3.jpg',1);"><img name="Seite1_r2_c3" src="Seite%201_r2_c3.jpg" width="115" height="45" border="0" id="Seite1_r2_c3" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c5','Seite%201_r2_c5_ f2.jpg','Seite%201_r2_c5_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c5','Seite% 201_r2_c5_f3.jpg',1);"><img name="Seite1_r2_c5" src="Seite%201_r2_c5.jpg" width="115" height="45" border="0" id="Seite1_r2_c5" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c6','Seite%201_r2_c6_ f2.jpg','Seite%201_r2_c6_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c6','Seite% 201_r2_c6_f3.jpg',1);"><img name="Seite1_r2_c6" src="Seite%201_r2_c6.jpg" width="115" height="45" border="0" id="Seite1_r2_c6" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c7','Seite%201_r2_c7_ f2.jpg','Seite%201_r2_c7_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c7','Seite% 201_r2_c7_f3.jpg',1);"><img name="Seite1_r2_c7" src="Seite%201_r2_c7.jpg" width="115" height="45" border="0" id="Seite1_r2_c7" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c8','Seite%201_r2_c8_ f2.jpg','Seite%201_r2_c8_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c8','Seite% 201_r2_c8_f3.jpg',1);"><img name="Seite1_r2_c8" src="Seite%201_r2_c8.jpg" width="115" height="45" border="0" id="Seite1_r2_c8" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r2_c9','Seite%201_r2_c9_ f2.jpg','Seite%201_r2_c9_f3.jpg',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r2_c9','Seite% 201_r2_c9_f3.jpg',1);"><img name="Seite1_r2_c9" src="Seite%201_r2_c9.jpg" width="115" height="45" border="0" id="Seite1_r2_c9" alt="" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><img name="Seite1_r3_c1" src="Seite%201_r3_c1.jpg" width="805" height="188" border="0" id="Seite1_r3_c1" alt="" /></td>
</tr>
<tr>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="805">
<tr>
<td><img name="Seite1_r4_c1" src="Seite%201_r4_c1.jpg" width="21" height="20" border="0" id="Seite1_r4_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Seite1_r4_c2','Seite%201_r4_c2_ f2.gif','Seite%201_r4_c2_f3.gif',1);" onclick="MM_nbGroup('down','navbar1','Seite1_r4_c2','Seite% 201_r4_c2_f3.gif',1);"><img name="Seite1_r4_c2" src="Seite%201_r4_c2.gif" width="162" height="20" border="0" id="Seite1_r4_c2" alt="" /></a></td>
<td><img name="Seite1_r4_c4" src="Seite%201_r4_c4.jpg" width="622" height="20" border="0" id="Seite1_r4_c4" alt="" /></td>
</tr>
</table></td>
</tr>
<tr>
<td><img name="Seite1_r5_c1" src="Seite%201_r5_c1.jpg" width="805" height="366" border="0" id="Seite1_r5_c1" alt="" /></td>
</tr>
</table>
</body>
</html>

[Brainfish]

Okay, der Quellcode hilft jetzt nicht. (Wäre besser gewesen die Seite (mit JS+GFX) hochzuladen). Außerdem ist das Ziel ja sowieso fast erreicht...

Probier mal diesen CSS Style:

<style type="text/css">
<!--
a:active, a:link, a:visited, a:hover {
color: #000000;
text-decoration: none;
border: none;
}
-->
</style>

[buc]

Hi,

leider immernoch die gestrichelten Linien. Bekommt man die denn irgendwie weg? Die umranden den Button ja...

Echt komisch, das Problem exisitiert auch nur im Firefox, nicht im Safari oder dem IE.

Sowohl das mit den gestrichelten Linien als auch das mit den 2 blauen Pixeln.

Danke und Gruß,
buc

[Brainfish]

Glaube man muss für das Bild noch ein Border=0 einfügen, nicht nur zu dem Link.

Füge mal zu dem CSS Code vom vorherigen Post, noch diesen ein:

img {border:none;} Dieser sollte den Rahmen (engl. Border) für das Bild deaktivieren, und damit eigentl. das Problem beheben.

[buc]

Ich habs jetzt mal so eingefügt. Funktioniert aber nich...kann auch sein, dass ich des falsch eingefügt hab... :confused:

<style type="text/css">
img {border:none;}
<!--
a:active, a:link, a:visited, a:hover {
color: #000000;
text-decoration: none;
border: none;
}
-->
</style>

[Brainfish]

Richtig erkannt. :thumb:
So ists richtig:
<style type="text/css">
<!--
img {border:none;}
a:active, a:link, a:visited, a:hover {
color: #000000;
text-decoration: none;
border: none;
}
-->
</style>

[buc]

Vielen Dank für deine Geduld Brainfish. ;) Habs nun genau so eingefügt. Geht leider auch nicht. Die Rahmen bleiben weiterhin.

Danke und Gruß,
buc

[Brainfish]

Gibt ein Arabisches Sprichwort; Die Geduld ist der Schlüssel zur Freude.;)

Das Problem ist, das "onfocus". Sprich in dem Moment wo geklickt wird, wird der gepunktete Rahmen um das Bild angezeigt.

Habe hier sehr wahrscheinlich die Lösung für dein Problem: Linkrahmen im Internet Explorer deaktivieren ([Link nur für registrierte und freigeschaltete Mitglieder sichtbar])

[buc]

Tausend Dank Brainfish!!! Es geht...Vielen vielen Dank!:D:thumb:

Das hab ich also eingefügt:
<style type="text/css">
<!--
img {border:none;}
a:focus { outline: none; }
a:active, a:link, a:visited, a:hover {
color: #000000;
text-decoration: none;
border: none;
}
-->
</style>

Viele Grüße,
buc

[Brainfish]

Super! :) Dann viel Erfolg, und bis zum nächsten Problem.

Und schön, das es kein Fireworks Bug ist. :D

Brainfish.

[buc]

Ja, da muss ich dir Recht geben... :D:thumb:

Danke nochmal,;)
buc