Beiträge von lagraf

Am Besten bringe ich es zusammen, wenn ich die Einstiegsseite oder die Seite des Menüpunktes "Herren" im Firefox mit Shift+Reload neu lade

Die CSS ist im Head eingebunden

Die Page findet ihr unter http://www.rachbauer.org/guggis

Die verschiedenen Menüpunkte einfach durchprobieren, das Aufblitzen zeigt sich aber nicht immer, ich weiß nicht warum

Und eines gleich noch vorweg: Ich hatte noch keine Zeit den Editor zu wechseln und auf UTF-8 umzustellen!

Auf http://lagander.de/flexSlider2Test/responsive.html habe ich die responsive Variante. Dabei wird das Image aber unten abgeschnitten, sobald die Browserbreite größer wird als das Image. Es soll aber auf größeren Bildschirmen immer das gesamte Image sichtbar sein, zentriert und Rand links und rechts!

Auf http://lagander.de/flexSlider2Test/center.html seht ihr bereits ein Beispiel, wo das Image schön zentriert wird und der Fußblock nicht nach unten hinausgeschoben wird - soweit so gut!

Einziges Problem dabei ist aber noch Folgendes: Wenn man das Browserfenster horizontal verkleinert sieht man nur mehr den linken Teil eines breiteren Images, es soll aber eine der beiden folgenden Varianten sein:

• Entweder Image responsiv und entsprechend der Bildschirmbreite verkleinert
• Oder links und rechts gleichmäßig abgeschnitten, sodaß man am Handy das horizontale Zentrum sieht und nicht den linken Rand

LG

Hallo,

wenn ich eine Seite meiner Page im Browser aufrufe, dann blitzt kurz eine Anzeige auf mit den Images und dem reinen HTML Code ohne CSS Formatierung. Danach wird erst die Seite korrekt formatiert angezeigt.

Weiß jemand, weshalb das so ist und wie ich das wegbekomme?

LG

Hallo Leute,

hat sich schon mal jemand mit dem Flexslider2 beschäftigt? Ich versuche schon seit Tagen, dem Flexslider per CSS beizubringen, dass er mir die Bilder nicht immer über die ganze Bildschirmbreite darstellt, wodurch sie dann nach unten über den Bildschirmrand hinauswandern und den Seitenfuss dadurch nach unten aus dem sichtbaren Bereich drücken.

Ich habs inzwischen soweit, dass der Fuss immer unten stehen bleibt, wodurch die Bilder aber in der Breite gestretched werden. Es sollen die Bilder aber maximal so breit dargestellt werden, wie sie wirklich sind, sodass das Seitenverhältnis sich nicht verändert. Darüber hinaus soll links und rechts ein gleich großer Rand bleiben.

Ich habe unter http://www.lagander.de/flexSlider2Test/index.html den aktuellen Stand hingestellt, wobei alle meine Änderungen sich in der index.html befinden, der FlexSlider ist original. Vielleicht kann mal jemand drüberschauen und mir auf die Sprünge helfen. Wäre toll!

Hallo Andreas,

Autoprefixer ist genau was ich gesucht habe, danke!

Meine Seiten habe ich inzwischen durch den validator.w3.org prüfen lassen, CSS Validatoren gibt es ebenfalls zur Prüfung des CSS.

Gibt es aber auch eine Seite, die einem sagt, für welche CSS Statements man browserspezifische Einträge braucht, z.B:

für transition braucht man auch

-webkit-transition

-moz-transition

-o-transition

Das wäre eine Frage an den Eigentümer, vielleicht hofft man auf eine Wiederinbetriebnahme?

Die darunter liegende Seite für "Nails & More" ist allerdings noch aktiv.

Hat aber alles nichts mit der Frage bez. "seitlich einschwebender Button" zu tun, die ja inzwischen geklärt ist.

Ist bekannt, die Seite ist aber schon rund 20 Jahre alt, CoRa gibt es nicht mehr und ein Update rentiert sich deshalb nicht.

Oder übernehmt ihr gerne Aufträge unentgeltlich nur damit etwas aktuell ist, das nicht mehr benötigt wird?

Falls ja, bitte melden, da habe ich sicher ab und zu was für euch!

Da Dreamweaver anscheinend ein rotes Tuch ist : Ich verwende davon zu 99.9% nur den Sourcecode-Editor und die FTP Funktion, den WYSIWYG Editor überhaupt nicht, da der nichts bringt wenn HTML und CSS getrennt sind.

Meine produktiven Seiten sind auch aufgebaut wie bei designerinaction beschrieben: Meta, header, nav, footer, main-content und der ist in Spalten unterteilt. Nur für den Test mit den einschwebenden Buttons habe ich die DW Default-Seite benutzt, damit das Beispiel aufs Minimum reduziert ist.

Ich habe das Ganze jetzt so gelöst: Ich habe ein längliches Image erstellt, das ich mittels negativem right nach außen verschiebe. Bei hover setze ich right auf 0 und verlangsame die Bewegung mit transition.

#sys_facebook {
    background-image: url("images/facebook.png");
    text-decoration: none;
    position: fixed;
    right: -20px;
    top: 200px;
    height: 46px;
    width: 66px;
    z-index: 999;
    transition: all 0.5s ease;
}
#sys_facebook:hover {
    right: 0px;
}

Ich weiß nicht, ob es noch eine elegantere Lösung gibt, aber zumindest funktionierts so.

Dreamweaver wegschmeißen ist keine Lösung solange ich keinen besseren Editor finde, hat eine Menge gekostet!

Bei mir funktioniert das Beispiel problemlos mit FF neueste Version.

Richtig lernen kann ich nur, wenn sinnvolle Antworten kommen, aus denen ich lernen kann. Den Dummy-HTML-Code drumherum zu kritisieren hilft nicht, denn der war ja nur fürs Beispiel gedacht, hat mit der Problemstellung nichts zu tun und findet sich in der Originalpage auch nicht wieder.

Das Ganze ist nur ein minimaler Dummy um das Problem zu zeigen.

Das HTML Gerüst hat der Editor generiert, Code und CSS habe ich einer Seite im Netz entnommen. Du solltest dich also damit an Macromedia und dem Ersteller der Seite mit dem Facebook Button wenden!

Hallo,

ich habe einen Facebook Button, den ich am rechten Rand platziere. Bei hover klappte ein breiterer Facebook Button darüber, sodaß es aussieht, als ob der Button sich herausschiebt. Wie kann ich diesen Vorgang langsam ablaufen lassen. Bin ich hier mit meinem Ansatz am richtigen Weg?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#sys_facebook {
    background-image: url("http://www.rachbauer.org/guggis/images/facebook.png");
    background-position: 0 0;
    text-decoration: none;
    height: 60px;
    width: 60px;
    z-index: 999;
}
#sys_facebook:hover {
    background-position: 0 59px;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" height="550px">
<a id="sys_facebook" target="_blank" href="https://de-de.facebook.com/" title="Facebook" style="position:fixed; right:2px; bottom:300px;"></a>
</body>
</html>

Hallo Andreas,

der Warenkorb ist rechts, ich arbeite auch mit der Eigenschaft rechts statt links und es funktioniert. Ich habe nur Media-Queries im Einsatz, die bei schmäleren Bildschirmen den rechten und linken Rand verkleinern, sodaß der Warenkorb nicht immer gleich weit vom rechten Rand weg ist, daher nehme ich die dynamischen Werte von getElementById("basket").

LG

Hallo Andreas,

ich habe die Routine inzwischen ins Originalfile eingebaut und alles funktioniert!

Die Werte vom Warenkorb und vom Bild hole ich mir über getElementById, der Warenkorb ist nicht immer an der gleichen Stelle, da er abhängig von der Browserwidth mehr oder weniger weit vom Rand weg ist.

Danke nochmals für deine Hilfe!

Ich habe mir das Image in onItemClick in einer globalen Variable gespeichert und lade in animateItemFromCart die Style damit. Jetzt fährt die Animation wieder zurück!

Schönheitsfehler: Ich lade die Koordinaten für clone.style.left/top/width/height hardcoded, wie kann ich sie aus der CSS Klasse .store-item--in-cart befüllen?

in animateItemFromCart fehlt mir aber der Event vom Mausclick, daher kann ich mit

const currentItem = evt.currentTarget;

const currentImage = currentItem.querySelector(SELECTORS.itemImage);

das Image nicht ermitteln. Wie komme ich zu dem Image und damit zu den Koordinaten?

Ich hätte angenommen, dass ich dem Clone dieses Ziel durch

item.classList.add(CSS_CLASSES.itemImage);

mitgebe, aber das bewirkt nichts, die Animation wird nicht gestartet und kommt daher auch zu keinem Ende.

Über eine Verzweigung in onItemClick erscheint bei Status - inzwischen des kleine Bild beim Cart, allerdings sind Größe und Koordinaten hardcode und nicht aus storeItemInCart.

In MutationObserver habe ich am Ende eine Verzweigung abhängig vom Status des Icons: animateItemToCart oder animateItemFromCart.

Wie starte ich aber in animateItemFromCart die rückwärts laufende Animation?