Supportnet / Forum / Webseiten/HTML
Rolloverbuttons ohne Abstand im Firefox
Frage
Moinsen,
ich habe mal eine Frage, ich habe meine Seizen komplett überarbeitet. Dazu benutze ich Microsoft Expression Web (Nachfolger von Frontpage 2003, ist identisch, nur mit ein paar neuen Funktionen).
Ich habe für das Menü mit dem Programm "Rollover-Buttons" (Interaktive Schaltfläche) erstellt, früher hatte ich ein Applet-Menü, aber viele haben kein Java mehr installiert.
im IE (Version 7) sind die Buttons direkt untereinander, wie es sein soll. Im Mozilla (Firefox) sind aber hässliche Abstände dazwischen. kann ich die irgendwie weg bekommen?
Die Buttons sind mit </ br> getrennt, ich habe das schon in <br> ungewandelt, aber das lässt sich nicht abspeichern, es wird immer wieder in </ br> zurück geändert.
1. Wo ist eigentlich der Unterschied zwischen <br> und </ br> ?
2. wie bekomme ich die Buttons auch im Firefox untereinander?
Ansonsten ist das Programm ziemlich Mozilla freundlich, im Gegensatz zu FP.
Wenn mir jemand helfen möchte, auf [url=www.ralles-planet.de/index2.html]www.ralles-planet.de/index2.html[/url] im Inhaltsframe unten mal einen Rechtsklick machen und den Quelltext ansehen.
Vielen Dank!
Aussermensch
Antwort 1 von Aussermensch
Sorry, ich meinte sie sind mit <br /> getrennt...
Antwort 2 von Supermax
<br> ist HTML-Syntax, <br/> ist XHTML-Syntax; sonst ist da kein Unterschied.
Welchen DOCTYPE hast du denn gesetzt?
Welchen DOCTYPE hast du denn gesetzt?
Antwort 3 von Aussermensch
Laut Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">Antwort 4 von katy
Hallo Aussermensch,
ein bisschen Ironie liegt schon in deinem Seitenthema "Webdesign", oder?
Dein "Einsteigerkurs in HTML" ist jedenfalls sehr schlecht recherchiert und wer den befolgt landet eher früher als später verzweifelt im Supportnet.
Zu deinem Link-Abstands-Problem: Du gibst nirgendwo margin (Abstand eines Elements zum nächsten) an, also nimmt jeder Browser seine Standards, und die unterscheiden sich.
Auf der verlinkten Seite erhältst du noch mehr Infos zu dem Thema Abstände, evtl. reicht es aber auch schon einfach mit
katy
ein bisschen Ironie liegt schon in deinem Seitenthema "Webdesign", oder?
Dein "Einsteigerkurs in HTML" ist jedenfalls sehr schlecht recherchiert und wer den befolgt landet eher früher als später verzweifelt im Supportnet.
Zu deinem Link-Abstands-Problem: Du gibst nirgendwo margin (Abstand eines Elements zum nächsten) an, also nimmt jeder Browser seine Standards, und die unterscheiden sich.
Auf der verlinkten Seite erhältst du noch mehr Infos zu dem Thema Abstände, evtl. reicht es aber auch schon einfach mit
a {
margin:0;
}katy
Antwort 5 von Aussermensch
Naja, hauptsächlich geht es ja um kostenlose Grafiken für Webseiten und Links zu kostenlosen HP-Tools.
Die HTML-Hilfe war ursprünglich für eBay-Mitgliederseiten gedacht, weil damals vor 7 Jahren ist meine erste Seite wegen eBay überhaupt entstanden und viele hatten keine Ahnung, wie einfache HTML-Befehle lauten, darum hatte ich die Hilfe angeboten. Bisher habe ich nur positives Feedback dazu bekommen.
Ich hatte mir das selber damals aus Büchern beigebracht. Ich bin kein Fachmann oder Programmierer, ist ja nur ein Hobbie. Ich wollte es zwar immer lernen (ich meine beruflich & professionell) aber es gab keine Gelegenheit. Ich bin dann bei meiner 2. Ausbildung in den Bereich "Mediengestalter für Digital- und Printmedien" gelandet. Das hat mit Programmierung leider nix zu tun, ich habe dort den Umgang mit Photoshop, Quark X Press, Freehand usw. gelernt.
Aber danke für den Tipp, ich werde später mal etwas rumprobieren.
Grüße
Außermensch
Die HTML-Hilfe war ursprünglich für eBay-Mitgliederseiten gedacht, weil damals vor 7 Jahren ist meine erste Seite wegen eBay überhaupt entstanden und viele hatten keine Ahnung, wie einfache HTML-Befehle lauten, darum hatte ich die Hilfe angeboten. Bisher habe ich nur positives Feedback dazu bekommen.
Ich hatte mir das selber damals aus Büchern beigebracht. Ich bin kein Fachmann oder Programmierer, ist ja nur ein Hobbie. Ich wollte es zwar immer lernen (ich meine beruflich & professionell) aber es gab keine Gelegenheit. Ich bin dann bei meiner 2. Ausbildung in den Bereich "Mediengestalter für Digital- und Printmedien" gelandet. Das hat mit Programmierung leider nix zu tun, ich habe dort den Umgang mit Photoshop, Quark X Press, Freehand usw. gelernt.
Aber danke für den Tipp, ich werde später mal etwas rumprobieren.
Grüße
Außermensch
Antwort 6 von katy
Hallo Aussermensch,
tut mir leid, wenn ich dich jetzt vielleicht missmutig stimme, aber dein Kurs bedarf dringlichst der Überarbeitung. Schon um auch künftig positive Resonanzen zu erhalten. Ich möchte dir einfach mal ein paar Hinweise geben:
Schon das HTML-Grundgerüst ist unvollständig. Es fehlen unverzichtbare Bestandteile wie DOCTYPE-Declaration und - noch wichtiger - die Zeichenkodierung. Letzteres kann zu Falschanzeigen von Umlauten und anderen Sonderzeichen führen.
Layouten mittels <font> und align="left/center/right", <u>, <b>,... ist längst durch CSS ersetzt worden, das viel mehr Möglichkeiten bietet, zB die Abstandsdefinition über margin. CSS erwähnst du leider gar nicht. Wenigstens die Grundlagen sollten aber erwähnt werden.
Das alt-Attribut in <img> erzeugt nur in einem Browser ein Tooltipp-Fensterchen neben der Maus, nämlich im Internet-Explorer. Das ist ein Fehler dieses Browsers! Für Tooltipps gibt's das title-Attribut. Im alt-Attribut steht Alternativ-Text, der angezeigt wird, wenn das Bild nicht angezeigt werden kann. Und das alt-Attribut muss immer vorhanden sein.
Vielleicht kannst du ja auf Grundlage meiner Hinweise deinen Kurs überarbeiten.
Eventuell tröstet es dich ja, dass die von dir verlinkte Seite mit dem HTML-Wörterbuch ebenso der Überarbeitung bedürfte. Ich glaube hier wäre ein Link zu SelfHTML - dem deutschsprachigen HTML-Werk - die deutlich bessere Empfehlung für deine Seitenbesucher.
Einen schönen Tag wünscht
katy
tut mir leid, wenn ich dich jetzt vielleicht missmutig stimme, aber dein Kurs bedarf dringlichst der Überarbeitung. Schon um auch künftig positive Resonanzen zu erhalten. Ich möchte dir einfach mal ein paar Hinweise geben:
Schon das HTML-Grundgerüst ist unvollständig. Es fehlen unverzichtbare Bestandteile wie DOCTYPE-Declaration und - noch wichtiger - die Zeichenkodierung. Letzteres kann zu Falschanzeigen von Umlauten und anderen Sonderzeichen führen.
Layouten mittels <font> und align="left/center/right", <u>, <b>,... ist längst durch CSS ersetzt worden, das viel mehr Möglichkeiten bietet, zB die Abstandsdefinition über margin. CSS erwähnst du leider gar nicht. Wenigstens die Grundlagen sollten aber erwähnt werden.
Das alt-Attribut in <img> erzeugt nur in einem Browser ein Tooltipp-Fensterchen neben der Maus, nämlich im Internet-Explorer. Das ist ein Fehler dieses Browsers! Für Tooltipps gibt's das title-Attribut. Im alt-Attribut steht Alternativ-Text, der angezeigt wird, wenn das Bild nicht angezeigt werden kann. Und das alt-Attribut muss immer vorhanden sein.
Vielleicht kannst du ja auf Grundlage meiner Hinweise deinen Kurs überarbeiten.
Eventuell tröstet es dich ja, dass die von dir verlinkte Seite mit dem HTML-Wörterbuch ebenso der Überarbeitung bedürfte. Ich glaube hier wäre ein Link zu SelfHTML - dem deutschsprachigen HTML-Werk - die deutlich bessere Empfehlung für deine Seitenbesucher.
Einen schönen Tag wünscht
katy
Antwort 7 von derpfleger
Versuchs mal so:
1. in inhalt.htm im Style-Bereich noch hinzufügen
2. Die <br> zwischen den Buttons entfernen.
Gruß derpfleger
1. in inhalt.htm im Style-Bereich noch hinzufügen
img { display:block;
}2. Die <br> zwischen den Buttons entfernen.
Gruß derpfleger
Antwort 8 von katy
Hallo derpfleger,
das würde aber einen Schritt weg vom verständlichen HTML bedeuten, oder? Ohne CSS ist das Anzeige-Chaos dann nicht mehr zu deuten. Ich glaube auch nicht, dass das das Problem löst, denn die Element-Abstände bleiben ja undefiniert.
katy
das würde aber einen Schritt weg vom verständlichen HTML bedeuten, oder? Ohne CSS ist das Anzeige-Chaos dann nicht mehr zu deuten. Ich glaube auch nicht, dass das das Problem löst, denn die Element-Abstände bleiben ja undefiniert.
katy
Antwort 9 von Aussermensch
Also ich bin bisher nicht weiter gekommen mit der Sache, ich habe mit den Margin-Befehlen experimentiert, vielleicht macht dieser Screenshot deutlicher, was ich wo eingeben soll:
http://www.ralles-planet.de/pics/inhalt.gif
Ich habe da schon diverses ausprobiert, aber ohne Erfolg.
Grüße
Aussermensch
http://www.ralles-planet.de/pics/inhalt.gif
Ich habe da schon diverses ausprobiert, aber ohne Erfolg.
Grüße
Aussermensch
Antwort 10 von Mister.Pink
Vielleicht solltest du einen kleinen Schritt von irgendwelchen Microsoft-Tools weg gehen und das ganze mit einem einfachen Editor schreiben. Dies sollte bei so einer trivialen Aufgabe eigentlich kein Problem darstellen und du vermüllst deine Seite nicht mi irgendwelchem Computergenerierten Code und nutzlosen Kommentaren.
Antwort 11 von katy
Hallo Aussermensch,
vermutlich beherrscht das Programm auch eine sogenannte Quellcodeansicht. Bearbeite dort die Datei direkt. Setze einfach
Mit derartigen Tools sich herumzuärgern hat keinen Sinn!
katy
vermutlich beherrscht das Programm auch eine sogenannte Quellcodeansicht. Bearbeite dort die Datei direkt. Setze einfach
a, a img {
margin:0;
padding:0;
}Mit derartigen Tools sich herumzuärgern hat keinen Sinn!
katy
Antwort 12 von derpfleger
Die Lücke zw. den Button-Bildern wird er aber nur wegbekommen wenn er so vorgeht, wie ich es in Antwort 7 vorgeschlagen hatte. Die margin und padding-Werte, wie in Antwort 11 festzulegen ist natürlich genauso wichtig, führt aber alleine nicht zum Ziel.
Zum Thema unerklärliche Lücken gibts eine ganz aufschlussreiche Seite:
http://www.carsten-protsch.de/zwischennetz/doctype/luecken.html
Gruß derpfleger
PS: @katy: ich glaube nicht, das du den Threaderöffner zum CSS-Puristen umerziehen können wirst. Er wird auf seinen Navigations-Button-Bildern beharren. Wer natürlich auf solch einer Seite gleichzeitig einen HTML-Kurs anbietet, macht sich schon irgendwie selbst ein Eigentor.
Zum Thema unerklärliche Lücken gibts eine ganz aufschlussreiche Seite:
http://www.carsten-protsch.de/zwischennetz/doctype/luecken.html
Gruß derpfleger
PS: @katy: ich glaube nicht, das du den Threaderöffner zum CSS-Puristen umerziehen können wirst. Er wird auf seinen Navigations-Button-Bildern beharren. Wer natürlich auf solch einer Seite gleichzeitig einen HTML-Kurs anbietet, macht sich schon irgendwie selbst ein Eigentor.
Antwort 13 von katy
Hallo derpfleger,
umerziehen möchte ich natürlich niemanden. Kann man meine Beiträge so verstehen? Das täte mir leid!
Auf die Problematik mit dem White-Space hatte ich übrigens schon im ersten Posting hingewiesen. Gegen die Lösung mit display:block ohne semantische Einbindung habe ich ernsthafte Bedenken. So etwas halte ich nur für sinnvoll, wenn die Seite auch ohne CSS noch funktionsfähig bleibt. Das wäre sie ohne die <br> aber nicht. Du hast sicherlich schon in deiner Zeit hier im Forum Lösungen, wie sie heutzutage üblich sind gelesen, wo erst im HTML alle Links in eine Liste gepackt werden, dann per CSS die Liste aufgelöst wird und die Links per a {display:block} das gewünschte Bild ergeben. Ich habe schon seit deinem ersten Posting hier den Verdacht, dass du auf solch eine Lösung abzielst.
katy
umerziehen möchte ich natürlich niemanden. Kann man meine Beiträge so verstehen? Das täte mir leid!
Auf die Problematik mit dem White-Space hatte ich übrigens schon im ersten Posting hingewiesen. Gegen die Lösung mit display:block ohne semantische Einbindung habe ich ernsthafte Bedenken. So etwas halte ich nur für sinnvoll, wenn die Seite auch ohne CSS noch funktionsfähig bleibt. Das wäre sie ohne die <br> aber nicht. Du hast sicherlich schon in deiner Zeit hier im Forum Lösungen, wie sie heutzutage üblich sind gelesen, wo erst im HTML alle Links in eine Liste gepackt werden, dann per CSS die Liste aufgelöst wird und die Links per a {display:block} das gewünschte Bild ergeben. Ich habe schon seit deinem ersten Posting hier den Verdacht, dass du auf solch eine Lösung abzielst.
katy
Antwort 14 von Aussermensch
Also ich habe keine Ahnung von CSS, aber die Lösung von "derpfleger" hat funktioniert.
Ich sehe auch keine Nachteile, die Buttons und Rollover-Effekte funktionieren noch.
@katy:
Der Vorschlag mit
hat leider nichts gebracht.
@Mister.Pink:
Ja ich weiß, dass ich lieber mit einfachen Editoren arbeiten sollte, ich habe auch "Phase 5" und "Notepad++". Phase 5 hatte ich gestern erst installiert und mir das noch nicht genauer angesehen. Mit Notepad++ (ebenfalls Freeware) bearbeite ich meistens PHP-Seiten, z.B. wenn ich MODs in mein forum einbaue.
Problem ist eben nur, dass ich mich mit CSS nicht aukenne. Eine einfache HTML-Seite mit den "alten" Codes, wie ich sie bei mir aufgelistet habe, kann ich auch leicht mit einem Editor erstellen. Dazu reicht auch schon der normale Text-Editor.
Ich arbeite seit 2000 bereits mit Frontpage, ist eben eine Gewohnheitssache. Expression Web kostete immerhin um die 300 €. Hatte ich mir im März 07 zusammen mit meinem neuen Rechner und Office 2007 pro (SB) gekauft, weil das Programm als Frontapge Nachfolger gepriesen wurde.
Immerhin verursacht das Programm bei Mozilla-Browsern wesentlich weniger Probleme als FP 2003. Der Unterschied ist nur, dass das Programm mit CSS arbeitet und nicht mehr wie alte FP-Versionen mit einfachen HTML-Codes. Da konnte ich Fehler noch leicht im Quelltext korrigieren.
Aber mit CSS habe ich mich noch nicht beschäftigt.
Also welche Nachteile hat denn der Vorschlag von "derpfleger"?
Grüße
Außermensch
Ich sehe auch keine Nachteile, die Buttons und Rollover-Effekte funktionieren noch.
@katy:
Der Vorschlag mit
a, a img {
margin:0;
padding:0;
}hat leider nichts gebracht.
@Mister.Pink:
Ja ich weiß, dass ich lieber mit einfachen Editoren arbeiten sollte, ich habe auch "Phase 5" und "Notepad++". Phase 5 hatte ich gestern erst installiert und mir das noch nicht genauer angesehen. Mit Notepad++ (ebenfalls Freeware) bearbeite ich meistens PHP-Seiten, z.B. wenn ich MODs in mein forum einbaue.
Problem ist eben nur, dass ich mich mit CSS nicht aukenne. Eine einfache HTML-Seite mit den "alten" Codes, wie ich sie bei mir aufgelistet habe, kann ich auch leicht mit einem Editor erstellen. Dazu reicht auch schon der normale Text-Editor.
Ich arbeite seit 2000 bereits mit Frontpage, ist eben eine Gewohnheitssache. Expression Web kostete immerhin um die 300 €. Hatte ich mir im März 07 zusammen mit meinem neuen Rechner und Office 2007 pro (SB) gekauft, weil das Programm als Frontapge Nachfolger gepriesen wurde.
Immerhin verursacht das Programm bei Mozilla-Browsern wesentlich weniger Probleme als FP 2003. Der Unterschied ist nur, dass das Programm mit CSS arbeitet und nicht mehr wie alte FP-Versionen mit einfachen HTML-Codes. Da konnte ich Fehler noch leicht im Quelltext korrigieren.
Aber mit CSS habe ich mich noch nicht beschäftigt.
Also welche Nachteile hat denn der Vorschlag von "derpfleger"?
Grüße
Außermensch
Antwort 15 von derpfleger
Meine Befürchtung ist nur, dass jemand, der nur mit einem WYSIWYG-Editor arbeitet und offensichtlich eine Quelltextansicht gar nicht kennt, mit einem solchen Verfahren (Liste...) überfordert wäre. Lediglich die Antwort 7 zu befolgen erschien mir irgendwie noch machbar :-)
Gruß derpfleger
Gruß derpfleger
Antwort 16 von katy
Hallo Aussermensch,
die Nachteile hatte ich schon verschiedene Male genannt. Zu "belehren" ist nicht meine Absicht. Ich wäre an einem Dialog interessiert, der mit mehr Inhalt geführt wird als Der Vorschlag mit ... hat leider nichts gebracht.. Mit solchen Antworten kann ich nichts anfangen.
Wenn dir die fadenscheinige Lösung von derpfleger zusagt ist das OK. Offensichtlich ist es ja auch eine just-for-fun-Seite, so dass niemandes Existenz von deren Qualität abhängt.
katy
die Nachteile hatte ich schon verschiedene Male genannt. Zu "belehren" ist nicht meine Absicht. Ich wäre an einem Dialog interessiert, der mit mehr Inhalt geführt wird als Der Vorschlag mit ... hat leider nichts gebracht.. Mit solchen Antworten kann ich nichts anfangen.
Wenn dir die fadenscheinige Lösung von derpfleger zusagt ist das OK. Offensichtlich ist es ja auch eine just-for-fun-Seite, so dass niemandes Existenz von deren Qualität abhängt.
katy
Antwort 17 von Aussermensch
Was soll ich sonst dazu schreiben? Ich bin dir für deine Hilfe und die Zeit sehr Dankbar, aber ich habe eben keine Ahnung von CSS. Ich habe deinen Vorschlag ausprobiert und es hat sich nichts geändert. Habe die "<br /> entfernt und da hatte ich die Buttons nebeneinander...
Ich hatte einen Screenshot von Expression in Antwort 9, dort kann man CSS-Befehle eingeben. Ich weiß aber nicht was und wo. dort siehst du auch, dass ich bei margin alles auf 0px gesetzt hatte, auch bei "padding" und "pagebreak" habe ich experimentiert, es gab aber im Firefox keine Änderungen.
Ich hatte gestern Stunden rumprobiert, aber nur der Tipp von "derpfleger" hat was gebracht.
Wie das nun in anderen Browsern wie Opera und Safari aussieht, weiß ich nicht, ich selber nutze zum Surfen auch nur den IE 7, Firefox habe ich nur zum Testen installiert, weil laut Statistiken (Sitemeter) fast die Hälfte mit Firefox unterwegs ist.
In meinem Inhaltsframe gibt es ja auch keinen Text, nur grafische Buttons. Sofern die jetzige Lösung nicht irgendwo anders Probleme verursacht, ist das von meiner Seite aus OK.
Ich Danke allen für die Hilfe!
Aussermensch
Ich hatte einen Screenshot von Expression in Antwort 9, dort kann man CSS-Befehle eingeben. Ich weiß aber nicht was und wo. dort siehst du auch, dass ich bei margin alles auf 0px gesetzt hatte, auch bei "padding" und "pagebreak" habe ich experimentiert, es gab aber im Firefox keine Änderungen.
Ich hatte gestern Stunden rumprobiert, aber nur der Tipp von "derpfleger" hat was gebracht.
Wie das nun in anderen Browsern wie Opera und Safari aussieht, weiß ich nicht, ich selber nutze zum Surfen auch nur den IE 7, Firefox habe ich nur zum Testen installiert, weil laut Statistiken (Sitemeter) fast die Hälfte mit Firefox unterwegs ist.
In meinem Inhaltsframe gibt es ja auch keinen Text, nur grafische Buttons. Sofern die jetzige Lösung nicht irgendwo anders Probleme verursacht, ist das von meiner Seite aus OK.
Ich Danke allen für die Hilfe!
Aussermensch
Antwort 18 von katy
Zitat:
Was soll ich sonst dazu schreiben?
du hättest einfach mal schreiben können, was genau du eigentlich getan hast in deiner stundenlangen Tätigkeit.Was soll ich sonst dazu schreiben?
Dann hätte ich dir auch erwidern können dass die Entfernung der <br> nicht mein Vorschlag war und dass das zusammen mit meinem Vorschlag Unsinn ist. Im Vorschlag von derpfleger wird HTML (<br>) ersetzt durch CSS (display:block), mein Vorschlag basierte auf dem vorhandenen HTML. Um es mit anderen Worten zu schreiben: das HTML war vorher besser weil es durch die <br> strukturiert war.
Dass du Änderungen am CSS nur sinnvoll in der Quellcodeansicht machst hatte ich auch geschrieben. hast du das gemacht? Hast du sie überhaupt gesucht und gefunden?
pagebreak ist eine Druck-CSS-Anweisung, wird am Bildschirm immer ignoriert. Wie kommst du darauf? Hat dein Programm sowas absurdes vorgeschlagen?
Wenn du Seiten machst solltest du sie immer in den gebräuchlichen Browsern (IE6/7, Firefox, Opera, Safari) testen, und dies unter verschiedenen Bedingungen. Unangenehme Überraschungen sind sonst sicher, wie du sie bei deinenProblemen mit Frames schon erlebt hast.
Zudem haben Opera für CSS und Firefox für JavaScript hervorragende Entwicklertools eingebaut.
katy (sehr verärgert)