WebSite X5Help Center

 
Torsten Mokansky
Torsten Mokansky
User

Bildschrimfüllende Seite erstellen  de

Autor: Torsten Mokansky
Visitado 2261, Seguidores 1, Compartilhado 0  

Ich möchte eine Seite erstellen die so aussieht http://orthopaede-bogenhausen.de

dort soll auf jeder Seite ein anderes Foto an die gleiche Stelle aber es soll über die ganze Breite des Bildschrims gehen und sich automatisch anpassen.

Wie bekomme ich das hin?

Ich habe jetzt mal eine seite angelegt mit 1920 x 600 px aber auf kleineren Monitoren wir dann immer die mobile Version angezeigt.

Vielen Dank für die schnelle Hilfe.

Publicado em
61 RESPOSTAS
Pcssa .
Pcssa .
Moderator

. . . dann musst Du vielleicht die Breakpoints ändern - die Referenzseite wurde ja programmiert die kann man mit x5 nur ähnlich nachbauen da hier mit fixen Breiten und nicht mit % gearbeitet wird . . .

Ler mais
Publicado em de Pcssa .
Torsten Mokansky
Torsten Mokansky
User
Autor

wie würdest du sie ändern?

Ler mais
Publicado em de Torsten Mokansky
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

Das kann man mit dem Hintergrund lösen !  Auf der Startseite kann man es als Hintergrund oder als Header Hindergrund einfügen.

Auf den einzelnen Seiten geht es in den "Eigenschaften" Reiter "Grafik" wo man die Bilder einfügen kann.

Das ist die einfachste Variante und anpassen auf mobile Geräte müsste man sich mal anschauen was man an Code einbauen kann.

Ler mais
Publicado em de Andreas S.
Torsten Mokansky
Torsten Mokansky
User
Autor

Das Problem ist dann die Höhe des angezeigten Bildes. Es soll ja an einer bestimmten Stelle stehen auf allen seiten

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

wnn ich es von meinem 16:9 monitor auf meinen 4:3 ziehe bekomme ich immer die Mobile Version angezeigt. Auf meinem IMac 22 Zoll zeigt er mir auch nur die Mobile bis ich ins vollbild gehe, da klappt es dann

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Hallo Torsten,

versuche mal diese Breakpoints. So habe ich es auf meiner Seite gelöst.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

das ist schon besser. Jetzt zeigt er mir auf dem 4:3 zwar das normale webmenü aber immer noch die mobile ansicht. breiter ist es jetzt geworden

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

ich muss noch was ändern an den brakpoints aber was. Es muss doch möglich sein die Seite auf einem 4:3 monitor auch darstellen zu können. ohne das jedesmal die Mobile Ansicht auf geht

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Und dann hab ich festegestellt, das er m ir in der Ansicht mit dem Opera browser immer ne andere Schriftart anzeigt

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Welche Auflösung hat der 4:3 Monitor? Hast Du die Seite Online z.B. in einem Testordner? Wenn bei trotz hoher Auflösung das Hamburgermenü dargestellt wird kann das auch an der Menge der Menübuttons liegen.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Ich habe es jetzt hinbekommen.

Jetzt habe ich nur noch das Problem das mir im Opera eine Serifenschrift angezeigt wird und nicht die die ich eingestellt habe. In allen anderen Browsern stimmt die Schrift.

Evtl. jemand eine Idee?

Ler mais
Publicado em de Torsten Mokansky
Incomedia
Claudio D.
Incomedia

Guten Tag,

Welche Schriftart wurde denn benutzt?

Es kann sein das diese von Opera nicht unterstützt wird und deshalb eine andere benutzt wird.

Vielen Dank!

Ler mais
Publicado em de Claudio D.
Marcus  C.
Marcus C.
User

Hallo Thorsten,

es wäre vielleicht für andere Mitglieder hilfreich, wenn du schreiben würdest, wie du dein Problem gelöst hast. Es gibt bestimmt noch mehr, die das gleiche oder ein ähnliches Problem haben und denen könnte dann auch geholfene werden. Vielen Dank!

Gruß

Marcus

Ler mais
Publicado em de Marcus C.
Torsten Mokansky
Torsten Mokansky
User
Autor

Leider doch noch nicht ganz gelöst.

Es muss an den Breakpoints noch was geändert werden.

Leider zeigt er auch beim 16:9 Monitor bei einer Auflösung von 1024 px immer die Mobile Version. Lediglich bei meinem Monitor mit 1920 Auflösung stimmt es.

Hat noch jemand eine Idee was ich an den Breakpoints noch ändern kann?

Ler mais
Publicado em de Torsten Mokansky
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

Das ist auch nicht die Ideale Lösung dafür. Dazu muss man individuellen Code einfügen, aber für Laien ist das recht kompliziert zu erklären.

Siehe das Beispiel   http://www.webdesign-markersdorf.at/dezember/

X

Ler mais
Publicado em de Andreas S.
Martin H.
Martin H.
User

Am besten Du würdest deine Seiten Testweise Online stellen.

Der Grund, dass bei einer 1024px Auflösung schon das Hamburgermenü dargestellt wird, hat auch mit der Anzahl der Menüelemente bzw. der Seitenstruktur zu tun.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Naja ganz Laie bin ich nicht. Gibts mal was was ich probieren kann und an welche stelle in welche Datei muss der Code?

Danke für die Hilfe

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Habe eine Seite gefunden die mit X5 programmiert wurde

Fabrizio Bruschini ist der Autor

Hier der Link: http://www.officeco.it/website/

So möchte ich das auch haben.

Villeicht weis jemand die Brekpoints?

Auch die Mobile Ansicht sieht super aus

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Ich habe jetzt eine auflösung von 1920 px eingestellt da funktioniert die seite auch 

aber so wie der Bildschirm etwas kleiner wird kommt sofort der mobile Header und das Hamburgermenü

Auf meinem 4:3 Monitor mit 1240 px auch.

Ich möchte das sich die Seite bis zur Ipad Größe automatisch anpasst und erst ab ipad die mobile Ansicht kommt.

Bitte Hilfe dringend!!!Danke

Ler mais
Publicado em de Torsten Mokansky
Erhard B.
Erhard B.
User

Für IPad??? Da musst du eine Haederbreite von 1024 px einstellen.

Ler mais
Publicado em de Erhard B.
Marcus  C.
Marcus C.
User

Hallo Torsten,

vielleciht magst du mal dein Projektzip hochladen. Dann können wir uns dies mal anschauen. Evtl. gibt es nur einen Zahlendreher irgend wo. Wenn man das Projekt nicht selbst vor augen hat, ist das echt schwer einzuschäzten. Andreas oder der Zwoemti sind ganz tolle Moderatoren die das Programm echt draufhaben und mir auch schon hunderte Male geholfen haben. Wenn die zwei Zeit haben, bin ich mir sicher finden Sie den fehler in deiner Projektdatei. Aber ich kann natürlich nicht in deren Namen versprechen, dass Sie das gleich und sofort machen. Auch die Moderatoren haben neben ihrer Ehrenamtlichen Zeit hier noch einen Job und diverse andere Sachen, denen Sie nach gehen müssen.

Ich schaue mir dein Projekt auch gerne an. ICh denke gemeinsam werden wir das Problem schon in den Griff bekommen. Doof wäre es nur, wenn es ein Bug wäre, den man als solches jetzt nicht gleich erkennt. Deshalb mein vorschlag mal das gesamte Projekt Exportieren und hochladen. Dann können sich auch die Entwickler selbst mal das Projekt ansehen, und evtl. einen Bug identifizieren.

Ich denke dass wir so am schnellsten weiter kommen. Sonst beruht alles auf Vermutungen und Eventualitäten.

Liebe Grüße

Marcus

Ler mais
Publicado em de Marcus C.
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

@Torsten Mokansky  Ich weis nicht was du für ein Menü hast, aber stelle mal im Templatestil das Menü auf "MEnü im Header"  und korrigiere die Breite des Menüs auf 1023px. Allerdings funktioniert das nur wenn du wenige Links hast oder die Breite (mal der Anzahl) der Links nicht größer ist als die Breite des gesamten Menüs !

Ler mais
Publicado em de Andreas S.
Torsten Mokansky
Torsten Mokansky
User
Autor

Hallo Zusammen

Hier sende ich die Projektdatei.

Ich hoffe Ihr könnt mir helfen.

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Ist die Datei mit angekommen?

Ich sehe Sie nicht

Ler mais
Publicado em de Torsten Mokansky
Marcus  C.
Marcus C.
User

Nein wurde nicht mit angehängt...

Ler mais
Publicado em de Marcus C.
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

iwzip Dateien werden hier nicht mit genommen ! (außer man zippt sie vorher)

Am besten die Datei in einen Cloud oder Server spielen und den Link posten. (Zugangsdaten aber vorher löschen)

Ler mais
Publicado em de Andreas S.
Torsten Mokansky
Torsten Mokansky
User
Autor

Neuer Versuch als ZIP

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

auch nicht?

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Hier der Downloadlink der Projektdatei

httP://www.designer-workshop.de/Agenturdaten/orthopaedie-haldensleben2.iwzip

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Hier der Downloadlink von meinem Versuch: http://we.tl/M0aqQdemBC

Ich habe es so umgeändert, dass nun bis 1000px das Menü sichtbar ist. Die Breakpoints habe ich auch geändert. Außerdem habe ich den Header entfernt, so das du auch in der mobilen Ansicht den Bilderwechsel hast.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Super danke euch ich schaue es mir morgen gleich an.

Melde mich dann sofort.

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Hallo Leute,

ich konnte nicht warten.

Alles super, das von Andreas gefällt mir am besten mit der seitenaufteilung leider ist auf dem 4:3 Monitor dann das Menü linksbündig.

Weiterhin funktioniert der Bildwechsel nicht mehr da der Header entfernt wurde.

Das soll aber auf der Startseite so bleiben wenn das geht.

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Der Bilderwechsel wird mit Andreas seiner Vorlage nicht funktionieren, da es sich um ein Hintergrundbild im Desktop- und Mobilheader handelt

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Der Bilderwechsel muss aber sein sorry,

jemand eine Idee

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Mmmh ich weiß nicht was du hast, aber in meiner Vorlage geht der Bildwechsel von der Desktop bis zur Mobilansicht. 

Ler mais
Publicado em de Martin H.
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

Dann mache es anders !

Nimm wieder dein Projekt und stelle eine Headerbreite von 980px ein  !

Danach gehst du in die TEmplate-Gestaltung und löscht die vorhandene Slideshow!

Dann nimmst du eine neue Slideshow ziehst sie über den sichtbaren Bereich und fügst die 4  Bilder hinzu. Dann klickst du mit rechter Maustaste ein Bild an und gehst auf !"Position und Größe" und gibst bei links einen Wert von -431 ein ! Mit den Werten musst du dich halt spielen.

Ler mais
Publicado em de Andreas S.
Martin H.
Martin H.
User

Ich habe deine Vorlage nochmals geändert. Der Header wurde entfernt und die Slideshow in den Cotent eingebaut, so hast du von der Desktop- bis zur Mobilenansicht die Slideshow. Die Breakpoints wurden so verändert, dass du nun bei den gängisten Auflösungen eine nahezu Bildschirmfüllende Seite hast.

Hier der Link: http://we.tl/Aa8T5yvp85

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Könnte mir noch jemand verraten wie ich es anstelle das die eingestellte schrift auch in der mobilen version angezeigt wird?

Dort kommt immer eine Serifenschrift.

Ebenso im Opera Browser bei der normalen Ansicht, auch Serifen.

Im IE und im FF geht es normal

Ler mais
Publicado em de Torsten Mokansky
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

HAst du es auch auf einem mobilen Geräte getestet ?

Mache übrigens einen neuen Post auf für neue Fragen !

Ler mais
Publicado em de Andreas S.
Torsten Mokansky
Torsten Mokansky
User
Autor

Hallo zusammen.

ich habe das Projekt nochmal bearbeitet.

Hier kann es nochmal runtergeladen werden:

http://www.designer-workshop.de/Agenturdaten/orthopaedie-haldensleben2.iwzip

Ich habe noch 2 Probleme

1. Wenn ich die Seite auf meinen 4:3 Monitor ziehe ist das Obere Menü rechts ausgerichtet und nicht mehr zentriert, das hätte ich gerne behoben.

2. Möchte ich die Seiteninhalte auf allen Seiten mittig zentriert haben so wie es Martin oder Andreas in der ersten Version schon hatten. Speziell für Impressum und Kontakt/Anfahrt. Ich denke in breite des Menüs wäre toll.

Es soll der Inhalt quasi nicht mehr links und rechts bis zum Bildschirmrand stehen.

Könntet ihr mir das so einrichten?

Alle andere ist soweit tip top

PS: ist es möglich das Menü breiter zu machen oder haut das dann mit der Darstellung nicht mehr hin?

Danke sehr für Euer Engagement.

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Das Menü ist rechts angeordnet bei Auflösungen unterhalb von 1900px. Das ist wegen dem Hamburgermenü so. Daher habe ich links diesen Baum eingesetzt. Wenn man das Menü breiter macht (vielleicht geht noch ein Stück) dann schaltet das Menü schon in einer höheren Auflösung in das Hamburgermenü. Eventuell müsste man die Buttons im Menü etwas schmäler machen.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Kannst Du da was probieren?

Ich habe angst mir wieder alles zu zerschießen.

Es sollte auf jeden Fall bis 1800 px mittig bleiben

DANKE

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Menü etwas breiter gemacht das es bis 1000px verfügbar ist und den Breakpoint auf 1780px gesetzt

http://we.tl/CtdxvGJKnF

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Hallo Andreas

deine Vorlage war super, mit den Inhalten so zentriert.

ich habe hier

http://www.designer-workshop.de/Agenturdaten/orthopaedie-haldensleben2.iwzip

nochmal das überarbeitete Projekt hochgeladen.

Bei dir fehlte eigentlich nur der Slider auf der Startseite.

Könntest Du evtl nochmal schauen?

@Martin: danke für deine Mühe, ich habe aber die Seite schon weiter bearbeitet, würdest Du das neue File nutzen? Danke. Den Link findest Du hier im Post

Ler mais
Publicado em de Torsten Mokansky
Martin H.
Martin H.
User

Hallo, der Slider wird auch nicht funktionieren, da in der mobilen Ansicht dies nicht möglich ist. Deine jetzige Vorlage hat aber jetzt nichts mehr mit Bildschirmfüllend zu tun (außer Desktopansicht) wie in diesem Thread beschrieben.

Ler mais
Publicado em de Martin H.
Martin H.
Martin H.
User

Hallo Andreas, leider wird dein eingebautes Supersized jQuery Plugin bei der Mobilenansicht (kleiner wir Desktop) nicht mehr komplett dargestellt. Vermutlich liegt es daran, dass es im Hintergrund mittig eingebaut wurde.

Es wäre jetzt mal angebracht, dass Inco bei einem der nächsten Updates es ermöglicht, Bildschirmfüllende Slideshows ohne zusätzliche Code oder anderer Trickserei zu erstellen.

Ler mais
Publicado em de Martin H.
Torsten Mokansky
Torsten Mokansky
User
Autor

Also danke erstmal für die Mühe.

Mir würde es schon reichen wenn die Slideshow auf der Startseite bildschirmfüllend ist, da hatte ich mich bestimmt falsch ausgedrückt.

Der Rest gefällt mir schon ganz gut.

Wäre es möglich mein Aktuell hochgeladenes Projekt für den Umbau zu Nutzen, da ich schon bei Leistungen viele neue Inhalte drin habe, das müsste ich sonnst alles neu machen.

Wie ist es mit der Schrift in der Mobilversion?

Auf Iphone wird immer eine Serifenschrift anghezeigt obwohl richtig eingestellt.

Es soll am PC und auf Mobil diese schmale Apple Schrift wie in der Vorlage zu sehen werden.

Danke für die Mühe und hoffe bald von Euch zu hören.

LG Torsten

Ler mais
Publicado em de Torsten Mokansky
Incomedia
Claudio D.
Incomedia

Guten Tag,

Wegen der Schrift in der mobilen Version haben Sie einen Webfont eingebunden?

Wenn ja wurden alle Formate wie TTF, WOFF, SVG und EOT eingebunden?

Fèr das iPhone ist wichtig das die SVG Datei eingebunden wurde damit es auch dort angeyeigt wird.

Vielen Dank!

Ler mais
Publicado em de Claudio D.
Torsten Mokansky
Torsten Mokansky
User
Autor

wo bekomme ich die SVG Datei für die gewünschte Schrift her?

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

und die WOFF?

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

danke sehr:-)

Ler mais
Publicado em de Torsten Mokansky
Torsten Mokansky
Torsten Mokansky
User
Autor

Hallo Gemeinde,

ich habe jetzt die woff und die SVG datei als Webfont hinzugefügt.

Leider wird jedoch immer noch am Iphone diese Serifenschrift angezeigt.

Können Sie helfen?

Ler mais
Publicado em de Torsten Mokansky
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

Wir es auf einem fremden PC (wo die SChrift nicht installiert ist) richtig angezeigt?

ISt der Cache gelöscht worden beim Handy oder der Browser komplett geschlossen worden?

Ler mais
Publicado em de Andreas S.
Torsten Mokansky
Torsten Mokansky
User
Autor

Ja alles gelöscht Verlauf geleert.

Trotzdem nicht

Ler mais
Publicado em de Torsten Mokansky
Incomedia
Claudio D.
Incomedia

Guten Tag,

Testen Sie es mit einer Schriftart die alle diese Dateien hat die Sie auf http://www.fontsquirrel.com/ finden können um zu sehen ob es mit dieser korrekt angezeigt wird da es sein kann das der Generator die SVG Datei nicht korrekt erstellt hat.

Vielen Dank!

Ler mais
Publicado em de Claudio D.