Beiträge von adobelove

    Hallo Leute,


    ich habe ein großes Problem. Momentan arbeite ich an einer Website und mein Code besteht fast nur aus display:flex befehlen.

    Ich habe bisher die Responsive Ansichten nur in der Entwicklungsansicht auf Firefox überprüft und dementsprechend angepasst. Leider musste ich ganz spät feststellen, dass beim Skalieren des Browsers(!wenn man den Browser kleiner zieht) die Responsiv Befehle nicht übernommen werden. (Aber in der Entwickleransicht passt alles und in den Meta tags habe ich <meta name="viewport" content="width=device-width, initial-scale=1.0"/> das auch drin. )


    Was mache ich falsch oder wieso wird display flex nicht übernommen?


    Wenn mir jemand weiterhelfen könnte, wäre ich seehr erfreut.


    Vielen Dank schon mal und liebe Grüße

    Marry

    Hallo Leute,


    ich habe eine sehr primitive Angelegenheit, bei der ich aber jedesmal sehr viel Zeit opfern muss. Und ich glaube da gibt es eine raffiniertere Lösung.html-seminar.de/woltlab/attachment/2179/


    Es geht um css und zwar:

    Es gibt eine Box in der ich eine Auflistung habe, mit verschiedenen list-style-images.

    Nun möchte ich aber dass die bilder der list-style-images sich immer an den Rand anordnen.

    So wie im Anhang.


    Bisher habe ich es immer mit position absolute und relative gelöst, nur musste ich es in jeder Ansicht anpassen und es hat sich immer verschoben.


    Wenn Ihr mir da weiterhelfen könnt wäre ich wirklich dankbar.


    Schonmal vielen lieben Dank!


    Marry

    Hier der Link zum Tutorial:

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Hi Leute,


    ich habe einen Slider mit Logos mit Javascript erstellt.

    Jetzt habe ich das Problem, dass wenn ich mein Browser kleiner ziehe die verschiedenen Responsive Ansichten nicht automatisch angepasst werden, sonder erst durch Aktualisierung der Seite. Habe ich da etwas übersehen?


    // JavaScript Document

    const controls=document.querySelector(".controls");

    const container=document.querySelector(".thumbnail-container");

    const allBox=container.children;

    const containerWidth=container.offsetWidth;

    const margin=60;

    var items=0;

    var totalItems=0;

    var jumpSlideWidth=0;



    // item setup per slide



    responsive=[

    {breakPoint:{width:0,item:1}}, //if width greater than 0 (1 item will show)

    {breakPoint:{width:370,item:1}}, //if width greater than 0 (1 item will show)

    {breakPoint:{width:900,item:2}}, //if width greater than 0 (1 item will show)

    {breakPoint:{width:1400,item:3}}, //if width greater than 600 (2 item will show)

    {breakPoint:{width:1550,item:4}} //if width greater than 1000 (4 item will show)

    ]


    function load(){

    for(let i=0; i<responsive.length;i++){

    if(window.innerWidth>responsive[i].breakPoint.width){

    items=responsive[i].breakPoint.item

    }

    }

    start();

    }


    function start(){

    var totalItemsWidth=0

    for(let i=0;i<allBox.length;i++){

    // width and margin setup of items

    allBox[i].style.width=(containerWidth/items)-margin + "px";

    allBox[i].style.margin=(margin/2)+ "px";

    totalItemsWidth+=containerWidth/items;

    totalItems++;

    }


    // thumbnail-container width set up

    container.style.width=totalItemsWidth + "px";


    // slides controls number set up

    const allSlides=Math.ceil(totalItems/items);

    const ul=document.createElement("ul");

    for(let i=1;i<=allSlides;i++){

    const li=document.createElement("li");

    li.id=i;

    li.innerHTML=i;

    li.setAttribute("onclick","controlSlides(this)");

    ul.appendChild(li);

    if(i==1){

    li.className="active";

    }

    }

    controls.appendChild(ul);

    }


    // when click on numbers slide to next slide

    function controlSlides(ele){

    // select controls children 'ul' element

    const ul=controls.children;


    // select ul children 'li' elements;

    const li=ul[0].children



    var active;


    for(let i=0;i<li.length;i++){

    if(li[i].className=="active"){

    // find who is now active

    active=i;

    // remove active class from all 'li' elements

    li[i].className="";

    }

    }

    // add active class to current slide

    ele.className="active";


    var numb=(ele.id-1)-active;

    jumpSlideWidth=jumpSlideWidth+(containerWidth*numb);

    container.style.marginLeft=-jumpSlideWidth + "px";

    }


    window.onload=load();


    <!-- Der HTML-Code -->

    <div class="thumbnail-slider">

    <div class="thumbnail-container">

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x-Logo.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    <div class="item">

    <img src="images/x.png" alt="x"/>

    </div>

    </div>


    <!-- controls slides -->

    <div class="controls">

    </div>


    </div>




    <script src="script.js"></script>


    /* CSS */


    .thumbnail-slider{

    width: 70%;

    display: block;

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

    }


    .thumbnail-slider .thumbnail-container{

    width: 100%;

    float: left;

    transition: margin 1s ease;

    }


    .thumbnail-slider .item{

    height: 200px;

    line-height: 200px;

    text-align: center;

    font-size: 50px;

    float: left;

    }


    .thumbnail-slider .item img{


    }


    .thumbnail-slider .controls{

    width: 100%;

    float: left;

    padding:15px;

    }


    .thumbnail-slider .controls ul{

    display: block;

    text-align: center;

    padding:0;

    margin:0;

    list-style: none;

    }

    .thumbnail-slider .controls ul li{

    height: 20px;

    width: 20px;

    border:1px solid #c3c3c3;

    border-radius:20px;

    margin:4px;

    font-size:0px;

    display: inline-block;

    line-height: 33px;

    cursor: pointer;

    }


    .thumbnail-slider .controls ul li.active{

    background-color: white;

    color:#000000;


    }

    Diesen Code habe ich aus einem Tutorium und an manchen Stellen abgeändert.


    Wenn mir jemand weiterhelfen würde, wäre ich sehr erfreut.


    LG Mary