Bildhöhe im Header
Autor: C K.
Besucht 1899,
Followers 1,
Geteilt 0
Ich habe ein Bild (Zeilenstil, Hintergrundbild) eingefügt. Die Höhe des Bildes habe ich über ein HTML Objekt festgelegt. (siehe Bild). Funktioniert alles soweit, auf Desktop zeigt es korrekt an.
Das Problem ist, auf Mobile (iPhone) wird das Headerbild nach unten geschoben, ich nehme an, dass die Höhe bzw. das nach unten Schieben des Bildes vom HTML Objekt diesen Abstand "veursacht".
Wie muss/kann ich die Höhe eines Bildes, welche über Zeilenstil, Hintergrundbild eingefügt ist, definieren, damit es auch Desktop und Mobile korrekt anzeigt?
Danke für Tipps
Claudio
Gepostet am
Hallo,
warum verwendest du ein html-objekt dafür ? Klick auf das Objekt Titel (A) und dann oben auf Stil und passe damit das ganze an.
Autor
Danke, Andreas, das habe ich +/- gemacht, aber über Stil "Aussenrand" kann ich ja nur bis 250 gehen, der Text im Objekt Titel sollte im unteren Bereich des Headerbildes sein.
HTML-Objekt - war die einzige Variante, welche bis anhin funktioniert hat, mind. auf Desktop. Daher war dies nicht eine "professionelle" Überlegung meinerseits..
Im Objekt Text (nach dem Objekt Titel und dem zweiten HTML-Objekt) ist ein Icon drin, welches auf dem Headerbild angezeigt wird, funktioniert soweit.
Hi,
ist das Problem nun gelöst ?
Autor
Danke dir, Andreas.Halb..halb...ich "bastle" rum, zeitweise funktioniert es, wenn ich die Bildhöhe über Stil im Objekt Titel und/oder Obejkt Text definiere, dann plötzlich, weiss nicht warum, verschiebt sich das ganze wieder und auf Mobile wird es nicht richtig angezeigt. Grundsätzlich weiss ich nicht, wie die Bildhöhe (über welche Funktion, welches Objekt) definiert werden kann, dass es auf Desktop und Mobile korrekt anzeigt wird.
Ich poste hier nachher mal ein Bild, wo man dies 1:1 sehen kann, damit es noch besser nachvollziehen kann.
Prima, mach das dann kann man einfach mehr sehen. Besser wäre sogar wenn du die Seite auf einem Server stellst und einen LINK hier bereitstellst.
Autor
Mache ich gerne. Noch eine Zwischenfrage zu was ganz "Kuriosem".
Ich habe den Header Mobile auf 0 gesetzt, dann wird eine Schrift auf der Seite nicht mehr richtig angezeigt. Sobald ich für den Header Mobile eine Höhe setze, funktioniert die Schriftart wieder. Wie komisch ist das? Oder gibt es dazu eine ev. eine Erklärung?
mmmh...muss man sich anschauen was da genau ist so habe ich das noch nie gehabt.
Hallo C K.,
du kannst die Höhe des html Objektes anpassen.
Autor
Danke, André. Dies habe so gemacht. Das Problem was ich habe ist, das, mind. bei mir, die Nutzung eines HTML Objekt für die Festlegung der Höhe auf Desktop und Mobile unterschiedlich auswirkt. Beim Desktop funktioniert es, bei Mobile wird das ganze dann nach unten geschoben.
Ich mache jetzt eine Beispielseite, welche ich hier posten kann, damit man das 1:1 sieht.
Verstehe ich es richtig, dass sich ein HTML Objekt (mit Angabe der Höhe) auf Desktop und Mobile unterschiedlich auswirkt?
Autor
oder anders gefragt: wie kann ich die Höhe eines Headerbild (vie Zeilenstil, eingefügt) bestimmen, dass sich dies auf Desktop und Mobile gleich auswirkt?
Geht es hier um ein Headerbild im "Header" oder ein Objekt Bild (in deinem Fall ein HTML-Objekt) das du im Zeilenstil eingefügt hast und den Header auf 0px gestellt hast, dass es so ausschaut als wenn es oben im Header enthalten?
Autor
Ausgangspunkt: Headerbild auf Seite Home via Zeilenstil als Hintergrund eingefügt und die Höhe mit einem HTML-Objekt festgelegt. Funktioniert auf Desktop, auf Mobile irgendwie nicht.
Ich teste mal die Variante (HTML-Objekt) das du im Zeilenstil eingefügt hast und den Header auf 0px gestellt hast, dass es so ausschaut als..) und mache eine Testseite, die hier dann poste, danke Andreas S.
Mit der Testseite lässt sich das dann besser darstellen.
Autor
Sorry, meine Fragestellungen waren nicht korrekt. Ich habe festgestellt, dass die Höhe des Bildes Mobile vom Bild/der Bildgrösse "verursacht" wird und nicht von der im HTML-Objekt festgelegten Höhe, mind. nehme ich das an.
Ich habe nun das gewünschte Ergebnis an einem Beispiel dargestellt. Variante A wäre gut, perfekt Variante B und was ich aktuell habe, ist Variante C. D.h. dass das Headerbild (eingefügt via Zeilenstil, Hintergrundbild) wird dann Mobile "untauglich" angezeigt wird, weil es dann vom Gesamtbild nur einen Teil darstellt und je nach Bild sieht dies dann ziemlich schlecht aus.
Die Headline Desktop habe ich für Mobile ausgeblendet und dann via Header Mobile die Headline Mobile (kleinere Schrift) eingegfügt, dies funktioniert soweit.
Zusammenfassend: wie kann ich ein Headerbild via Zeilenstil (auf Browserfenster erweitert) einfügen, damit dieses dann Mobile +/- akzeptabel angezeigt wird?
Vielen Dank!
Das ist komisch, denn bei meinem Test wird Variante A angezeigt auf einem Iphone 6S!
Deshalb die Frage, kannst du das Muster mal hochladen? Wie groß ist die Grafik die du eingebunden hast und welche Höhe hast du dem HTML-Objekt gegeben wo die Hintergrungrafik im Zeilenstil eingebunden ist.
Autor
Ja, danke Andreas, mache ich und poste den Link hier mit den Infos.
Ich mache jetzt auch noch einen Test mit einem ganz neuen Projekt, ev. stimmt mit dem aktuellen Projekt was nicht.
Autor
Ich habe eine Testseite gemacht und es funktioniert, habe es auch online http://claudio.marketing/testseite/ getestet. Dann ist anscheinend mit dem Projekt etwas nicht in Ordnung, denn ich habe weitere Sachen, wie z.Bsp. dass die Schriftart andauernd verloren geht, im Projekt, die nicht richtig funktionieren.
Autor
Jetzt habe ich die Ursache gefunden, welche den Fehler auslöst. Ich habe im Objekt Stil (Objekt Titel) den Rand Rechts/Links auf 200 gesetzt, um die Headline auf mehreren Linien zu haben. Der Fehler tritt auf, wenn man wenn man beim Aussen- oder Innenrand Objekt Titel hohe Werte setzt.
Vielen Dank für eure Tipps/Hilfe, wie immer sehr hiflreich!
Autor
Noch eine Zusatzfrage. Wenn ich den Header auf Transparent setze, bleibt es weiss. Und die komische Sache ist, wenn ich den Header auf "0" setze, verliere ich die richtige Schriftart.
Wenn du den Header auf transparent schaltest wird der Headerhintergrund aktiv. Wenn diese auch auf Transparent ist, dann ist der Seitenhintergrund auf weiss.
Wenn du den Header auf 0 setzt...wo verliert er die SChriftart? In einem Titel- oder Textobjekt im HEader oder im Content?
Autor
Danke, Andreas.
Ich habe Header, Headerhintergrund und Seitenhintergrund auf "Transparent". Wenn ich dann im Header via Inhalt Template Objekte einfüge, wird der Hintergrund auch als transparent dargestellt.
Ich habe ein Logo (negativ), welche ohne Hintergrund im Headerbild oben platziert werden soll. Das funktioniert, wenn ich den Header auf 0 setze, dann klebt das Logo aber oberen Rand, ist kein Unglück, sieht einfach nicht ganz so gut aus. Wenn ich den Header auf 50 setze, kann ich das Logo verschieben, funktioniert auch, dann habe ich den weissen Balken.
Wenn ich den Header auf 0 setzte, verliere ich die Schriftart, welche ich im Projekt eingefügt habe, dies in Objekt Text auf der Seite. Dies auch im Footer, wo ich ein Textobjekt eingefügt habe. Was ich nicht verstehe ist der Zusammenhang zwischen Headerhöhe und Schriftart.
KAnn ich dir auch nicht genau sagen. Es ist aber nicht dafür gedacht wenn du den Header auf 0px stellst, dass du trotzdem Objekte drinnen hast. Das ist normalerweise nicht möglich, denn im Prinzip sollte es die Objekte dann nicht anzeigen. Ist nur ein Nebeneffekt im Programm.
Autor
alles klar, nochmals vielen Dank!
(It > De) ... zwischen 1150 und 480 Pixeln erscheint oben ein auffälliger und unbequemer grauer Balken ...
... das Bild hat keine responsive-Eigenschaften und weder elastisch ...
ciao
.
@CK. Du könntest an deinem Logo oben einen transparenten Rand mit einem Grafikprogramm anfügen, so dass dein Logo die 50px Abstand vom oberen Rand hat.
Autor
@KolAsim: danke für den Hinweis. Die Seite war nur schnell eine Testseite, ich hatte ja das Problem mit der Bildanzeige auf Mobile. Grauer Balken...dies hatte ich gar nicht angepasst.
@Martin: danke, guter Tipp, werde da mal testen.
Autor
Ich habe das Problem Höhe Headerbild immer noch nicht richtig gelöst.
Wie kann ich die Höhe Headerbild (eingefügt via Zeilenstil) bestimmen, damit es auf Desktop und Mobile +/- richtig angezeigt wird. Wenn ich die Höhe via HTML-Objekt erzeuge, wird in Mobile das Bild viel zu gross angezeigt. Mit Aussenrand beim z.Bsp. Textobjekt kann ich nur 250 erzeugen.
Wenn ich z.Bsp. die Höe 500 brauche, wie mache ich das richtig?
Was ich festgellt habe ist, dass wenn ich z.Bsp. in einem Textobjekt Leerschläge einfüge oder vie Aussenrand Text Objekt 250 eingebe, um Höhe zu erzeugen, dies in Mobile besser angezeigt wird, als über ein HTML-Objekt.
Danke für Tipps, wie man dies richtig macht.
Autor
Muss mich korrigieren. Der Begriff Header ist nicht korrekt. Ich habe ein Bild via Zeilenstil eingefügt und weiss jetzt nicht, wie ich die Höhe anpassen kann, damit es Desktop/Mobile korrekt anezigt. HTML Objekt, Aussenrand Text Objekt funktionieren nicht.
(It > De) ... beseitigt diesen grauen Streifen zwischen 1150 und 480 Pixel, ... dann werden wir sehen, wie ich meinen eigenen zusätzlichen Code für das Bild anwenden kann ...
.
ciao