Beiträge von Mario

Mario

Auf der Seite ist direkt unter dem css-code ein großer Butten. CSS-CODE EINBINDEN - SO GEHT ES

Mario

Zitat von gencer

cool funktoniert, aber wo kommt der code hin?

In der mobilen Ansicht kann dies aber durchaus als störend empfunden werden. Mit dem unten stehenden Code können wir die Button in der mobilen Ansicht ausbleneden. Der Wert 820px gibt die Bildschirmbreite an ab welcher die Butten ausgeblendet werden. Diesen Wert müsst ihr je nach Layout anpassen.
@media (max-width: 820px) {
.social {
display: none;
}}

Einfach unter den anderen css-code vor dem abschließenden </style>

CSS

<style>
.social {
 transition: transform 0.6s ease-in-out;
}
.social:hover {
 transform: translate(115px, 0px);
}
@media (max-width: 820px) {
.social {
display: none;
}}
</style>

Alles anzeigen

Mario

Wenn ich richtig liege funktioniert eine automatische Höhenanpassung im iframe nur wenn in der Seite die im iframe dargestellt werden soll ein entsprechender Code verbaut ist.

Hier mal eine alternative die in der Fancybox dargestellt wird. Einmal als Textlink und einmal als Bildverweis.

Mario

Hallo ptfit,
Der angegebene HTML-Code auf der Seite war fehlerhaft. Ist nun korrigiert.
LINK Die Seite neu laden (aktualisieren) damit der neue Code wirklich angezeigt wird.

Danke an Steffen für die Unterstützung.

Mario

Hallo Vanessa,
Du könntest versuchen das Logo in einem Grafikprogramm nachzuschärfen. Sollte das nicht klappen bleibt nur neu machen oder halt so lassen wie es ist.

Deine maennchen-in-kaestchen.jpg sehen jetzt gut aus.

Allerdings passt die Anordnung deiner Artikel nicht. Wenn du die Seite auf dem Smartphone anschaust oder das Browserfenster am PC entsprechend verkleinerst erscheinen erst nacheinender die Bilder (maennchen-in-kaestchen.jpg) und dann der Text mit dem Link.
Du solltest am besten alles in einen Artikel packen. Also 3 Artikel nebeneinander. Neuer Artikel Text, hier fügst du dein Bild ein und darunter deinen Text mit dem Link. Anschließend schaltest du um auf "HTML-Quelltext anzeigen" und änderst den Abschnitt class="singleImage" in class="image2".

Mario

Ich bin mir sicher das du da irgend einen Code drin hast der das verschieben verursacht. Du solltest mal den ganzen Fremdcode testweise deaktivieren.

Mario

Da hab ich wohl etwas zu viel komprimiert. Hier nochmal schärfer.

Übrigens das mit dem Ruckeln ist ein bekanntes Problem . Dem kannst du entgegen wirken indem du eine unsichtbare Rotation hinzu fügst.

CSS

.image2 {
transform: scale(1, 1);
transition: transform 0.5s;
}
.image2:hover {
transform: scale(1.1, 1.1) rotate(0.1deg);
}

Mario

Ich habe mal schnell getestet und eine deiner Grafiken vorher auf 400 Pixel in der Breite verkleinert.Sieht schon besser aus: Links original, Rechts verkleinert.

Mario

Nicht wirklich, nun sehen die Grafiken vorher schon Verpixelt aus. Dann lieber so wie vorher.
Wenn ich heute Abend Zeit finde kann ich mir das mal anschauen. Ich denke das liegt daran das die Grafiken eigentlich viel zu groß angelegt sind. 1.667px × 1.042px

Mario

Die Seite gefällt mir sehr gut

Mir sind aber 2 Kleinigkeiten aufgefallen.

Das Logo erscheint recht unscharf.
Die Grafiken mit dem Hover-Effekt Kleine / Mittlere / Große Unternehmen kommen auch gut rüber. Allerdings werden diese bei Hover über ihre eigentliche Größe skaliert "scale(1.1, 1.1)" und sind somit etwas unschön anzusehen.
Eventuell mal anders herum probieren (erst verkleinert darstellen und bei Hover in Originalgröße):
CSS
```
.image2 { 
transform: scale(.9, .9);
transition: transform 0.5s; 
}
.image2:hover {
transform: scale(1, 1); 
}
```

Mario

Gut das man seine eigenen Seiten immer mal vor die Augen bekommt

Die Social Media-Button können auf dem Smartphone durchaus als störend empfunden werden. Deshalb hat der Code eine kleine Erweiterung bekommen um diese in der mobilen Ansicht abzuschalten. LINK

Mario

Hallo Thomas,
Ich habe mal 2 Vektorgrafiken hochgeladen. Die Skalierung kannst du beobachten in dem du einfach das Browserfenster verkleinerst. HIER

Mario

Hallo Martin,
wie genau hast du denn das Video eingebunden?

Mario

Leider nein.
Ich habe mal zum Vergleich eine Testseite hochgeladen. Wenn sich niemand findet kann der Sebastian mal nachschauen wie es da aussieht.

Die Seite vom Sebastian "Hintergrund und Content Weiß"

Meine Testseite "Hintergrund Grün und Content Rot"

Mario

Dann teste diese Variante,

Einstellungen > CSS hier folgendes einfügen:

CSS

<style>
.platz-schaffen {
width:100px;
height: 140px;
}
@media (max-width: 979px) {
.platz-schaffen {
height: 50px;
}}
@media (max-width: 600px) {
.platz-schaffen {
height: 25px;
}}




.llogo {
position: absolute;
top:15px;
margin-left:-336px;
left:50%;
width:672px;
height: 169px;
z-index:70000;
}
@media (max-width: 979px) {
.llogo {
width:450px;
height:113px;
margin-left:-225px;
}}
@media (max-width: 600px) {
.llogo {
width:300px;
height:75px;
margin-left:-150px;
}}
</style>

Alles anzeigen

Dann im Bannerbereich das Widget Quelltext mit folgendem Inhalt

HTML

<div class="platz-schaffen"> 
</div>
<div class="llogo"> 
<a href="http://www.hp-mosaik.de/" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/bilder/mosaik.png"></a></div>

Mario

Was mir daran nicht gefällt ist der Abstand zum Menü. Wobei es in diesem Layout noch akzeptabel ist. Somit sicher der einfachste Weg einfach ein Bild im Banner einzufügen.

Ich hatte das damals auf meiner Seite auch probiert, aber in "Producer Responsive" hatte ich immer Riesengroße Anstände. Deshalb habe ich das hier erst gar nicht probiert.
Aber der Test gerade zeigt das dies ein durchaus gutes Ergebnis liefert. Somit einfach umzusetzen mit gutem Ergebnis. Jochen da hast du recht.

Normalerweise füge solchen Code immer in die Fußzeile. Der Banner wurde hier eigentlich nur benutzt um den erforderlichen Platz zu schaffen. So kommt wieder eines zum anderen...

Also Rick einfach mal das Logo löschen und dann als Bild im Banner einfügen. Einfach und Gut! Im Banner dann noch unten auf das Mischpult "auf allen Seiten anzeigen".

Mario

Hallo Rick,
wie bereits erwähnt, das verspringen der Seite liegt nicht am Layout sondern an irgend etwas was du eingefügt hast. Eventuell mal probieren verdächtige Artikel (zB. Fremdcode) testweise zu deaktivieren.

Ich hatte dir ja versprochen mir wegen der Skalierung des Logos etwas zu überlegen.
Hier die TESTSEITE dazu.

Setze die Größe des Logos im Layout-Designer auf 1x1 Pixel.
Gehe zu Einstellungen > Elemente und nimm den Haken bei "Logo anzeigen) raus.

Mit einem externen FTP-Programm dein Logo hochladen (Anleitung dazu)

Dann Eistellungen > CSS und dort folgendes einfügen

CSS

<style>
.platz-schaffen {
width:100px;
height: 140px;
}
@media (max-width: 979px) {
.platz-schaffen {
height: 50px;
}}
@media (max-width: 600px) {
.platz-schaffen {
height: 25px;
}}




.llogo {
position: absolute;
top:15px;
margin-left:-336px;
left:50%;
width:672px;
height: 169px;
z-index:70000;
}
@media (max-width: 979px) {
.llogo {
width:450px;
height:113px;
margin-left:-225px;
}}
@media (max-width: 600px) {
.llogo {
width:300px;
height:75px;
margin-left:-150px;
}}
</style>

Alles anzeigen

Jetzt in Zeta oben rechts Einfügen auf an stellen.
Nun ganz oben (Banner) einen neuen Artikel "Quelltext" mit folgendem Inhalt erstellen.

HTML

<div class="platz-schaffen"> 
</div>
<div class="llogo"> 
<a href="http://www.hp-mosaik.de/" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/bilder/mosaik.png"></a></div>

Die Verlinkung zu deinem zuvor hochgeladenen Logo anpassen.

Es kann sein das die Darstellung in der Zeta-Vorschau nicht ganz korrekt ist. Einfach die Browservorschau nutzen.

Getestet in Chrome, Firefox, IE und Galaxy S6

Mario

@Rick,
zum Logo skalieren kann ich gern behilflich sein. Ich hatte das gleiche Problem. HIER

Aber zuvor musst du raus finden warum die Seite in der mobilen Ansicht nach unten verspringt.

Mario

Ja, gerade getestet. Wird zwar abgeschnitten, aber verspringt nicht. kuckst du hier

Also das das Logo nicht skaliert wird liegt am Layout. Aber das nach unten verspringen liegt wohl an etwas anderem.

Mario

Welches Layout ist das?
Dann kann ich mal kurz testen ob da eventuell ein Fehler vorliegt.

Mario

Richtig, oder gar so Mobile Test

Mario

Ab einer Fensterbreite von 780 Pixeln springt das Logo nach unten und da wo es sitzen sollte ist leerer Raum.
Wenn man nun das Fenster weiter verkleinert wird das Logo abgeschnitten.

Mario

Mir ist auf deiner Seite noch etwas anderes aufgefallen.

Wie hast du denn dein Logo eingebunden?
Schau dir das mal auf dem Smartphone an, oder alternativ einfach das Browserfenster in der Breite verkleinern.

Mario

Hallo Rick,
Um diese Seite übersichtlich zu gestalten fallen mir spontan 3 Möglichkeiten ein.

Du belässt es bei den Sprungzielen, fügst aber bei jedem Artikel die Verlinkungen hinzu und zur Auflockerung noch einen Scroll-Effekt. (BEISPIEL) Wie du das umsetzen kannst ist HIER beschrieben.
Du nutzt das Widget Accordeon vom Thomas. (Beispiel) Das Widget ist auf der Seite vom Thomas nicht mehr verfügbar, einfach mal nachfragen ob du dieses noch erhalten kannst.
Du missbrauchst einfach das Widget FAQ. (Beispiel)

Mario

Hallo Jenny,

ich sehe da 2 Möglichkeiten.

Lege die Logos über den Header wie HIER beschrieben. Achte aber darauf: entweder den Header nicht skalieren oder die Logos mit den Media Queries ""@media (max-width: .....px)"" entsprechend verschieben.
Lösche den Header und ersetze diesen durch eine ImageMap. Das geht auch Responsive. HIER beschrieben.

Mario

position: fixed; Das Bild bleibt fix stehen.

position: absolute; Das Bild scrollt mit.

Mario

Hallo Ronny,
folgendes ausprobieren:

CSS

<style>
@media (max-width: 979px) {
body {
  background-image: none ;
}}
</style>

Mario

Seite neu überarbeitet. HIER KLICKEN

Mario

http://code.zella.de/bilder-frei-positionieren.html

Beachte aber das sich das Bild beim verkleinern oder vergrößern des Browserfensters verschieben kann. Dies kannst du ganz einfach beobachten in dem Das Browserfenster in der Breite veränderst.

Man kann die Bilder aber auch ab einer bestimmten Fensterbreite ausblenden oder verschieben. Dazu werde ich demnächst nochmal die Seite anpassen.

Das kann man HIER sehen.
Die Socialmedia-Button werden ausgeblendet bevor sie abgeschnitten werden und die Telefonnummer und Mailadresse oben links werden in der mobilen Ansicht zu klickbaren Butten umgewandelt und ändern ab 550 Pixel Fensterbreite nochmals ihre Position.

Mario

Ich nehme an du meinst die Hinweisbox?

http://code.zella.de/textbox1.html

Mario

Danke Jochen für deinen Support.
Ich bin hier im Moment so eingebunden das ich es kaum schaffe hier rein zu schauen.

Mario

Hallo Gawainos,
Die Artikel werden wohl nach dem Zeitpunkt des erstellens gelistet und nicht nach der Reihenfolge auf der Seite.

Du kannst folgendermaßen vorgehen um Artikel eindeutig zu erkennen. Gib dem Artikel eine eindeutige Überschrift, diese Überschrift wird dann auch in der Artikelliste übernommen. Wenn du diesen verlinkt hast kannst du die Überschrift wieder löschen. Die Verlinkung bleibt dann bestehen.

Mario

Das sollte eigentlich mit jedem Layout funktionieren.
HIER ein Beispiel mit Contemporary Responsive.

Ich bin genau so vorgegangen wie von Jochen beschrieben.
Am Ende der Seite habe ich dann noch unten stehendes Script per Widget > Quelltext eingefügt.
Somit scrollt das ganze und mit dem Wert "top - 140;" in Zeile 10 könnt ihr den Abstand von oben angeben.

JavaScript

<script>
// Smooth Scroll to Top
$(document).ready(function() {
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top - 140;
                $('html,body').animate({scrollTop: targetOffset}, 500);
                return false;
            }
        }
    });
});
</script>

Alles anzeigen

Mario

Probiere folgendes: Erweitert > Erstellen > Alle Seiten erstellen

Anschließend: Veröffentlichen > Komplette Website veröffentlichen

Mario

Ich kann im Moment nicht testen. Bin im Urlaub. Ohne Zeta

Mario

Stimmt, das sollte sich ZETA mal anschauen. Aber um die Textfelder vom Inhalt abzuheben nutzt du besser das Widget Hinweisbox, dieses findest du unter dem Reiter "Struktur".
Das geht schon. Aber hierzu sind schon einige Eingriffe nötig. Dazu fehlt mit im Moment leider die Zeit.
Erledigt.?
Das ist richtig. Wenn du zweizeilig haben willst musst dir einen externen Anbieter suchen und dieses dann in Zeta einbinden.
Klicke mal oben rechts auf Einfügen > Ein. Nun müsste im Footer ein +Zeichen erscheinen um Widgets einzufügen.
Gehe auf Einfügen > CSS ,gib dort dieses ein und passe es an:
CSS
```
<style>
    hr { 
 height:5px; 
 border: none;
 background: #ff0000;
    }
</style>
```
Dort wo du die Trennlinie haben willst fügst du das Widget Quelltext mit folgendem Inhalt ein:
HTML
```
<hr>
```

Mario

Zitat von HorstSchwarz

Und wie geht das ohne HTML-Kentnisse? Ich möchte auch einzelne Worte formatieren können und nicht ganze Spalten?

Gruß
Horst

Das geht schon.
Lege einen neuen Artikel Text an schreibe zB: HorstSchwarz, formatiere diesen nach deinen Wünschen gehe oben auf den 2. Reiter von rechts "HTML anzeigen. Kopiere alles zwischen <p> und </p>, das kopierte fügst du dann in deine "Tabellarischen Daten" rein.
Den Textartikel anschließend natürlich löschen.

Mario

Schau mal HIER

.
Einstellungen > CSS

Code

<style>
body {
background-position:right;
}
</style>

Ah da war ich wohl zu langsam

Mario

Hallo,
das sollte bei der privaten Version genau so funktionieren.

Aber ich denke ich habe deinen Fehler entdeckt .

Wenn du in Youtube auf "Einbetten" gehst kommt eine URL, dies ist aber noch nicht der richtige Code sondern eine Kurz-URL mit der du die Seite aufrufen kannst. Direkt über der URL steht ein Link "EINBETTEN". Der Code ist dann der richtige und sollte in dieser Form angezeigt werden: <iframe width="560" height="315" src="https://www.youtube.com/embed/HJt8QfhTlqg" frameborder="0" allowfullscreen></iframe>

Mario

Hallo,
du könntest das folgendermaßen umsetzen.

Erstelle ein Formular mit einem externen Tool wie zum Beispiel dem DA-FormMaker.
Lade dieses mit mit einem FTP-Programm wie zB. FileZilla auf deinen Server.
Anschießend bindest du das wie HIER BESCHRIEBEN in dein Zeta-Projekt ein.

HIER GETESTET, im Test wurde ein älteres Formular verwendet, mittlerweile kannst du bei DA-FormMaker auch ein responsives Formular erstellen, dieses passt sich dann automatisch der Fensterbreite an.

PS: Oh da war der Jürgen schneller

Bei der aufgezeigten Variante sollte aber kein Popup-Blocker greifen weil ja hier die Fancybox verwendet wird. Sonst würden sich ja die Bilder auf der Seite auch nicht öffnen. Trotzdem würde ich an deiner Stelle das Formular besser direkt in die Seite einbinden und wenn dir der Funktionsumfang des ZETA-Formulars ausreicht auch dieses verwenden. Dann sind spätere Änderungen schnell und einfach durchgeführt.

Deine Frage unterhalb des Buttons habe ich nicht verstanden. Bitte nochmal genauer beschreiben was du meinst bzw. wie du dir die Seite mit dem Formular vorstellst.