Beiträge von vic951

    Hallo liebe Mitglieder,


    ich plane in nächster Zeit für mich selbst ein paar Templates zu schreiben und da bin ich auf einer Seite auf etwas gestoßen was mir sehr gefallen hat.

    Die Seite um die es sich handelt ist folgende https://www.glas-goetz.de/home und es geht um die Bilder unter UNSER PRODUKTPORTFOLIO.

    Hier wird die Maus praktisch verfolgt von den Überblendungen in den Bildern bzw. die Überblendung beginnt da wo ich mit der Maus ins Bild fahre.


    schafft man sowas rein mit HTML und CSS oder wurde der Effekt mit Javascript geschrieben?

    Und wie ist der Ansatz, mir fällt nämlich nicht ein wie ich die Seite eines Bildes abfragen kann über die die Maus fährt?

    ich mache viel mit Bildbearbeitung und lasse hier noch einen kleinen Tipp.


    Ich verwende Photoshop zum bearbeiten meiner Bilder habe auch kostenlose Alternativen versucht. Was mir aufgefallen ist ist das so Software wie Photoscape etc. die JPGs stark komprimiert, Photoshop hingegen nicht.

    Also verwende ich PNG wenn es die Dateigröße hergibt ansonsten mit Photoshop abspeichern damit nicht /nur gering komprimiert wird.

    ok habe jetzt aus

    Code
    1. width: 700px; 

    einfach

    Code
    1. max-width:700px; 

    gemacht und es klappt perfekt. Denn wenn man auf

    Code
    1. width:auto; 

    stellt wird es viel zu breit da der Container in dem es sich befindet 80% der Breite des Bildschirms nimmst.

    Wow ok das sieht um einiges besser aus als meins :)


    hier mal mein Code vielleicht nimmt sich jemand anderes etwas sinnvolles daraus


    CSS:

    und dann in der HTML:


    Aber ich werde diesen Code über Board werfen da mit der von Arne Drews besser gefällt.


    Ich habe noch eine Frage Arne (ich weiß nicht wie man hier Namen verlinkt) , wie könnte man das in eine sinnvolle Smartphoneansicht gestalten?

    ist doch viel komplizierter für mich als ich dachte, ich habe die Struktur jetzt nochmal anhand dieser Grafik geändert


    temp24.jpg


    jetzt sieht die Struktur so aus

    Code
    1. <div class="chronikcontainer">
    2.     <div class="chronikbild"><img src="images/background/main.jpg"></div>
    3.     <div class="chronikcontainerrechts">
    4.            <div class="chronikroterbalken">
    5.            <div class="chronikcontainerinhalt">
    6.                 <div class="chronikjahreszahl">1980</div>
    7.                 <div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
    8.            </div>
    9.     </div>
    10. </div>

    Versuche mir jetzt das CSS dazu zu basteln aber die Anordnungen ändern sich nicht.

    ich muss doch im Container

    Code
    1. .chronikcontainer{
    2.     display: flex;
    3.     flex-direction: row;
    4. }
    5. .chronikcontainerrechts{
    6.     display: flex;
    7.     flex-direction: column;
    8. }

    angeben damit die divs "chronikbild" und "chronikcontainerrechts" von links nach rechts angeordnet werden.

    und dann in CSS in der Klasse "chronikcontainerrechts" von oben nach unten.


    oder?

    wäre die Aufteilung so ungefähr richtig?


    Hallo liebes Forum,


    ich habe folgende Idee schaffe es aber nicht sie zu realisieren, ich möchte folgende Darstellung in HTML/CSS schreiben


    [Blockierte Grafik: https://s15.directupload.net/images/181207/wpo6iqgb.png]


    Ich hätte es für jedes Jahr in zwei Boxen aufgeteilt, ich habe es mit Bootstrap Grid probiert da auf dieses auf meiner Template Seite sowieso verwendet wird nur will es nicht funktionieren vorallem auch mit dem roten Strich.


    so in die Richtung dachte ich mir aber wie sieht das CSS dazu aus und habe ich das Bootstrap richtig verwendet weil die Anordnung dann auch nicht stimmt.

    Code
    1. <section class="col-md-3">
    2. <img src="images/background/main.jpg" width="5%">
    3. </section>
    4. <section class="col-md3">
    5. <h2>1980</h2>
    6. <p>sdfsgsdfgdf dfgdg dfgfgdger dfgdfg sdfgdfgad we werwerhlsdfg sddfgdfg sdfgghruighrei gdfg erwtuierfg reuirgdfg</p>
    7. </section>

    oh mein Gott es war so einfach :) vielen dank ich habe so lange rum probiert.

    Fals noch jemand dieses Problem hat, ich habe es dann mit folgender Zeile gelöst:


    Code
    1. #menu li ul li{ float: right !important;}

    ja mit flex habe ich schon etwas gearbeitet nur steige ich da noch nicht durch bzw. bin ich so schneller zum Ziel gekommen werde es aber nach dem diese Seite fertig ist angreifen.

    Hallo Leute,


    ich schaffe es einfach nicht meine Untermenü-Punkte (.drpdwn-content) nach rechts zu bringen. Habe es sowohl mit text-align als auch float versucht jedoch bewegen sich die Unterpunkte keinen Millimeter.

    Was mache ich falsch oder habe ich das Untermenü falsch aufgebaut?


    meine html-datei

    Und meine css Datei

    Die Page ist noch lange nicht Online, aber ich habe kurz darüber nachgedacht und eine Lösung gefunden.

    Mein Problem war das Bilder in einem Div das Div nicht immer ausgefüllt haben, es läuft in diesem Div eine Javascript Slideshow. Und folgedenermaßen sieht mein funktionierender Code aus:

    Um mein Vorhaben zu verstehen muss man sich vorstellen das es mir darum geht den Browser zu verschieben und das Bild füllt ein div IMMER aus.


    Das hier sind zwei von insgesamt vier boxen, diese sind IMMER über den ganzen Bildschirm gespannt. Wenn ich bei der Klasse Box ein Hintergrundbild hinzufüge erziehle ich genau den Effekt den ich haben will. Nur habe ich eine Slideshow in jeweils eine Box gebaut also kann ich im CSS das Hintergrundbild nicht mehr angeben.

    Danke für die Antworten,

    ich war nur mit JavaScript schon so weit und es funktioniert jetzt sogar bis auf eine große Kleinigkeit die ich nicht lösen kann

    Unten stehend erst mal der aktuelle funktionierende Code:

    ABER das ist die Bildhöhe der Datei, d.h. verschiebe ich das Fenster und aktualisiere funktioniert das leider wieder nicht weil nicht die AKTUELLE Bildhöhe ausgelesen wird.

    Ich bin gerade im Internet am Suchen, vielleicht kennt jemand von euch eine Lösung um die aktuelle Bildhöhe auszulesen die dynamisch vom Browser zugeteilt worden ist.

    Nein ich nutze keinen z-index, es spricht aber nichts dagegen dem div noch eine class zu geben um zu zu identifizieren. Ist meiner Meinung nach nur nicht so schön

    dachte es gebe da vielleicht was damit ich den code in eine Zeile bekomme.

    Ich probiere das mal aus, danke aber schon mal für die Gedankenstütze!


    Dürfte ich mal eben doch noch eine Frage stellen, ich habe folgenden Code, sobald ich aber die for-Schleife aktiviere geht kein alert mehr.

    Ich hoffe ich habe es geschafft mich richtig auszudrücken, wenn ich die kommentierten Zeilen aktiviere dann geht nicht mal mehr der alert vor der Schleife.

    Hallo liebe Freunde,


    ich hänge an einer Kleinigkeit und kann diese leider nicht lösen, vielleicht könnt ihr mir helfen.


    Ist es möglich in Javascript das überliegende DIV auszulesen?

    Ich möchte nämlich Bilder anpassen nach ungefährer folgender Formel:


    width=100%

    if (picture.height < darüberliegendes_div.height) { picture.height = 100%; picture.width = auto; }


    kann meine Lösung so funktionieren oder ist das gar nicht möglich in Javascript?