nicht angemeldet
margin-top anders bei safari, viewport unklar
Matthias Apsel
Gunnar Bittersmann
Der MartinLiebe Leute,
ich habe das Problem, dass auf meiner webseite, die ich gerade neu gebastelt habe, einer der container (Menu) auf safari höher sitzt als z.B. in FF.
Außerdem weiß ich nicht, wie ich meine Seite (sehr simpel aufgebaut)für mobile Geräte optimieren kann. Bisher geht alles, aber eben nicht optimal.
Ich bin absoluter Laie und habe die Seite nur über try and error programmiert.
Vielleicht kann mir dennoch einer/eine von euch eine einfache Lösung (html/css) des Problems nennen?!
Bestimmt lassen sich diverse Dinge auf der Seite intelligenter und einfacher machen.
Bitte habt ein Nachsehen. Tipps willkommen. Beleidigungen nicht!
LG
http://www.marco-matthes.de
-
Om nah hoo pez nyeetz, doncarlos!
Mir gefällt die Gestaltung der Seite recht gut, die technische Umsetzung ist allerdings mangelhaft.
Du solltest alle Style-Definitionen in eine eigene Datei auslagern.
Simple Farbänderungen per JavaScript sind nicht nötig.
Tabellendesign ist obsoletDer Weg zu HTML5
HTML-TutorialVielleicht kann mir dennoch einer/eine von euch eine einfache Lösung (html/css) des Problems nennen?!
Der Verzicht auf position:absolute; und float:left; für die beiden div-Elemente könnte eine schnelle schmutzige Lösung sein.
Die Seite sollte dennoch nicht so bleiben.
Matthias
-
Hallo,
ernstmal sehe ich keinen Unterschied zwischen Firefox und Safari (beide auf MacOS) hinsichtlich der Menü-Positionierung. Sieht nahezu identisch und ganz in Ordnung aus.
Was die Anpassungsfähigkeit an Mobilgeräte angeht: Hier ist die absolute Positionierung mit festen Prozent-Abständen eher hinderlich. Mobilgeräte verfügen über kleine Viewports, da sind die Relationen anders als auf Desktop-Monitoren. Hier würde ich, wie Matthias vorschlägt, erst einmal mit Floats arbeiten (dem normalen Elementfluss). Selbst bei absoluter Positionierung wäre es z.B. sinnvoller, die Navigation mit top und right zu positionieren, anstatt mit margin-top und margin-left. Dann sind die Inhalte zumindest noch lesbar, wenn der Viewport schmaler wird.
Layouts mit Float oder absoluter Positionierung können recht anpassungsfähig sein. Bei der Unterstützung von Mobilgeräten helfen Media Queries ebenfalls weiter. Damit lässt sich je nach Viewportgröße das Layout so ändern, dass z.B. Mehrspaltigkeit erzeugt oder aufgelöst wird.
Grüße
Mathias -
@@doncarlos:
nuqneH
Außerdem weiß ich nicht, wie ich meine Seite (sehr simpel aufgebaut)für mobile Geräte optimieren kann. Bisher geht alles, aber eben nicht optimal.
Zu weißer Schrift auf hellgrauem Hintergrund würde ich nicht „geht alles“ sagen. Der Kontrast ist so niedrig, dass es kaum lesbar ist. Setze für Bereiche, wo kein Hintergrundbild zu sehen ist (Hochformat!), eine entsprechende (dunkle) Hintergrundfarbe.
Auf der Seite Ich ist der Kontrast zwischen dem Grau des Hintergrundbildes und der hellblauen Schrift auch zu klein.
Oh, Hintergrundbilder: 360 kB sind zu viel. Da musst du fürs Web optimieren.
Mal in den Quelltext geschaut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Quirksmodus, d.h. Lass-den-Browser-doch-raten-was-ich-gemeint-haben-könnte-Modus. Den solltest du unbedingt vermeiden – durch eine geeignete DOCTYPE-Angabe. Es gibt keinen Grund, etwas anderes als HTML5 zu verwenden, also:
<!DOCTYPE html><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">Es gibt keinen Grund, (bei neuen Projekten) eine andere Zeichencodierung als UTF-8 zu verwenden. Ob du das jetzt noch ändern möchtest, musst du wissen.
In HTML5 wird die Zeichencodierung einfacher angegeben.
<meta name="viewport" content="width=device-width, height=device-height,initial-scale=0.7, minimum-scale= 0.7, maximum-scale=1.3"/>Warum willst du die Seite initial skalieren und dann dem Nutzer das Zoomen nur in einem engen Bereich gestatten? IMHO ist folgende Angabe sinnvoll:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/><table>Nö. Eine Spalte macht noch keine Tabelle.
Und Tabellen sind nicht zum Gestalten da.
Die onmouseover- und onmouseout-Attribute solltest du rückstandslos entsorgen; Farbwechsel gehen mit CSS:
a:hover { color: #33CCFF }Auch alle style-Attribute solltest du entsorgen und die Regeln im Stylesheet notieren – bevorzugt in einem externen, das von allen deinen HTML-Dokumenten referenziert wird. (Das type-Attribut muss in HTML5 nicht mehr sein.)
Bestimmt lassen sich diverse Dinge auf der Seite intelligenter und einfacher machen.
Ja. Du kannst gern nachfragen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">aus „»» > “ wird in der Vorschau „“
Ich habe „»» “ als Zitatzeichen eingestellt. Bisher hat das auch immer geklappt. Daher wundert mich, dass dein Zitatzeichen (für mich) nicht korrekt dargestellt wird. Bestimmt hat jemand unqualifiziert dran rumgespielt ;-)
<body>test</body>und aus „»» “ ebenso „“
»» <main>test</main>Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Bestimmt hat jemand unqualifiziert dran rumgespielt ;-)
Kann ich bestätigen. :-(
Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
aus „»» > “ wird in der Vorschau „“
Nun nicht mehr.
$('.q').each(function(){ var $this = $(this); if ($this.has('.block')) { var content = $this.html(); content = content.replace(/(»»? |>> |> |\| )+<code/g,'<code'); // Zitatzeichen unmittelbar vor code.block $this.html(content); } });Die Bedingung in der Abfrage ist immer
true, selbst wenn das Element der Klasseqkeinen Nachfahren der Klasseblockhat. Der Grund liegt darin, das JQuery ein leeres Array liefert aber eben doch ein Array.Die Lösung ist, die Länge des Arrays abzufragen.
if ($this.has('.block').length > 0) {Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Nun nicht mehr.
Bleibt trotzdem die Frage, warum ich in Gunnars Antwort für mich falsche Zitatzeichen sehe.
Vielleicht hat der Gunnar auch nicht „>“ als Zitatzeichen eingestellt?
Matthias
-
Hallo,
Bleibt trotzdem die Frage, warum ich in Gunnars Antwort für mich falsche Zitatzeichen sehe.
vielleicht gilt hier: Einmal vermurkst gespeichert, immer vermurkst angezeigt.
Ciao,
Martin--
Die beste Informationsquelle sind Leute, die jemand anderem versprochen haben, nichts weiterzuerzählen.
(alte Journalistenweisheit)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
@@Matthias Apsel:
nuqneH
Bleibt trotzdem die Frage, warum ich in Gunnars Antwort für mich falsche Zitatzeichen sehe.
Was siehst du? Was ist daran falsch?
Vielleicht hat der Gunnar auch nicht „>“ als Zitatzeichen eingestellt?
Hat er nicht. Will er nicht. Ich halte dieses Feature, Zitatzeichen in persönlichen Einstellungen ändern zu können, für überflüssig. Löst keine Probleme; schafft aber welche.
Da die Codezeilen keine Zitate auf des OPs Posting waren, hab ich hier nicht meine Zitatzeichen '»» ' verwendet, sondern '> '.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Bleibt trotzdem die Frage, warum ich in Gunnars Antwort für mich falsche Zitatzeichen sehe.
Was siehst du? Was ist daran falsch?Ich sehe ein ‘> ’.
Vielleicht hat der Gunnar auch nicht „>“ als Zitatzeichen eingestellt?
Hat er nicht.[…] hab ich hier nicht meine Zitatzeichen '»» ' verwendet, sondern '> '.
Hat er also doch ;-)
Das bestätigt meine Vermutung.
Matthias
-
Moin Gunnar,
Ich halte dieses Feature, Zitatzeichen in persönlichen Einstellungen ändern zu können, für überflüssig. Löst keine Probleme; schafft aber welche.
Das sehe ich naturgemäß etwas anders.
Wie auch immer, aus heutiger Sicht würde ich das auch nicht mehr einbauen. Aber man muss das halt auch immer im Kontext sehen. Das CForum ist entstanden in einer Zeit, in der viele entweder aus dem Usenet in Internetforen abgewandert sind oder beides parallel benutzt wurde. Daran musste es sich auch messen. Deshalb auch Features wie der Scoring-Filter, die Zitatzeichen, etc, pp. Es gab sogar mal einen NNTP-Gateway, über den das Forum bedient werden konnte (auch wenn der hier im SELF-Forum nicht aktiviert war).
LG,
CK-
Om nah hoo pez nyeetz, Christian Kruse!
Wie auch immer, aus heutiger Sicht würde ich das auch nicht mehr einbauen.
Schade. Ich find „»» “ süß.
In älteren Threads des neuen Forums wird bei mir das Zitatzeichen nicht dargestellt () Was mag das wohl gewesen sein?
Matthias
-
Moin Matthias,
Wie auch immer, aus heutiger Sicht würde ich das auch nicht mehr einbauen.
Schade. Ich find „»» “ süß.
Aber nicht besonders benutzerfreundlich. Einerseits kann man das nicht direkt eingeben und andererseits sind die User auch einfach an „> “ gewöhnt.
In älteren Threads des neuen Forums wird bei mir das Zitatzeichen nicht dargestellt () Was mag das wohl gewesen sein?
Wir haben zwischendurch von CForum-Code auf Markdown umgestellt. Allerdings habe ich die alten Daten im Test-Forum nicht konvertiert.
LG,
CK
-
-
-
-
-
-
-
Vielen Dank für die hilfreichen Tipps.
Das mit dem Doctype hat bei mir nur bedingt funktioniert.
Auf meinem Android-Handy wurde die Schrift nicht mehr angezeigt..
Ich habe das alte wiederverwendet.Ansonsten habe ich ein stylesheet gemacht.
Was gebe ich bei der Positionierung anstatt der Prozentangaben an? Pixel?
Schaut die index-Seite jetzt besser aus?
Schaut mal: http://www.marco-matthes.de/index2
DANKE!!!
-
Om nah hoo pez nyeetz, doncarlos!
Das mit dem Doctype hat bei mir nur bedingt funktioniert.
Auf meinem Android-Handy wurde die Schrift nicht mehr angezeigt..
Ich habe das alte wiederverwendet.Ein doctype, der die Browser in den Quirksmodus schickt, ist nicht gut. Ich weiß zwar nicht, warum dein Browser unter Android (da gibts auch mehrere von) mit dem HTML5-Doctype Probleme macht und glaube auch nicht, dass der Darstellungsfehler im doctype zu suchen ist, aber es gibt auch valide doctypes für ältere HTML-Dialekte. Wiki
Was gebe ich bei der Positionierung anstatt der Prozentangaben an? Pixel?
Positionierung: Tutorial
Achte darauf, dass deine Seite valides HTML enthält. http://validator.w3.org/, http://html5.validator.nu/
Du kannst deine Seite übrigens auch verlinken.
Matthias
-
-
