Spalten CSS

Thema wurde von Z.A, 3. November 2017 erstellt.

  1. Z.A
    Z.A Erfahrener Benutzer
    Registriert seit:
    9. Februar 2014
    Beiträge:
    261
    Danke erhalten:
    1
    Danke vergeben:
    74
    Hallo zusammen,

    kann mir jemand sagen wieso all die Bilder untereinander und nicht nebeneinander dargestellt werden wenn ich diesen Code unter Content Index eingebe??


    <div class="block-left-main">
    <div class="block-left">
    <img alt="" src="http://----/grafiken/----.png" />
    </div>
    </div>

    <div class="block-right-main">
    <div class="block-right">
    <img alt="" src="http://----/grafiken/----700x449.png" />
    </div>

    <div class="block-right">
    <img alt="" src="http://----/grafiken/----700x399.png" />
    </div>
    </div>

    <div class="block-bottom-main">
    <div class="block-bottom">
    <img alt="" src="http://----/grafiken/----340x340.png" />
    </div>

    <div class="block-bottom">
    <img alt="" src="http://----/grafiken/----340x340.png" />
    </div>

    <div class="block-bottom">
    <img alt="" src="http://----/grafiken/----340x340.png" />
    </div>

    <div class="block-bottom">
    <img alt="" src="http://----/grafiken/----340x340.png" />
    </div>
    </div>

    <div class="clr">
    &nbsp;
    </div>
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Wenn Du Bilder nebeneinander haben möchtest, solltest Du es so versuchen, wie es im Gambio-Testhop 1 - Index - Mitte gemacht wurde:
    HTML:
    <div class="row space-1">
        <div class="col-xs-12 col-sm-6 space-1">
            <a href="haus-garten/moebel-wohnen/dekoration/"><img class="img-responsive" src="images/content/index/design.png" /></a>
        </div>
    
        <div class="col-xs-12 col-sm-6">
            <a href="haus-garten/moebel-wohnen/sofas-sessel/"><img class="img-responsive" src="images/content/index/gemuetlichkeit.png" /></a>
        </div>
    </div>
    Wenn Du die Bilder mit http:// einbindest, wirst Du Probleme mit den Browsern bekommen. Entweder bekommen Deine Kunden die Meldung "Unsicher", weil keine SSL-Verschlüssellung da ist, oder weil unsichere Elemente eingebunden wurden.
    Und bei manchen Browsern werden die Bilder gar nciht angezeigt, sollte der Shop sonst SSL haben.
     
  3. Z.A
    Z.A Erfahrener Benutzer
    Registriert seit:
    9. Februar 2014
    Beiträge:
    261
    Danke erhalten:
    1
    Danke vergeben:
    74
    Aber ich habe noch einen anderen Shop den ich gerade aufbaue, und bei dem ist der gleiche code und es passt ohne probleme


    mit https://
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Hast Du vielleicht noch ein "responsive" bei den Bildern?
    Das würde immer über die ganze Breite gehen.

    Hast Du im neuen Shop vielleicht schon css-Codes eingetragen, die hier noch fehlen?
    Das oben ist ja nur der html-Code.
     
  5. Z.A
    Z.A Erfahrener Benutzer
    Registriert seit:
    9. Februar 2014
    Beiträge:
    261
    Danke erhalten:
    1
    Danke vergeben:
    74
    die css codes hab ich nicht eingetragen, ich weiss auch nicht genau was und wo, da mir das jemand anders gemacht hatte.
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Schau in dem anderen Shop einmal unter templates/ Honeygrid/ usermod/ css7
    ob da ein css-Datei ist, die uter anderem den Code enthält;
    Code:
    @media (min-width: 1200px){
    .block-right-main {
        width: 50%;
        float: left;
    }}
    @media (min-width: 1200px){
    .block-right {
        width: 100%;
        float: right;
        padding: 0.5%;
    }}
    Oder ob so ein Code im Style Editor unter eigenes css eingetragen ist.
     
  7. Z.A
    Z.A Erfahrener Benutzer
    Registriert seit:
    9. Februar 2014
    Beiträge:
    261
    Danke erhalten:
    1
    Danke vergeben:
    74
    es gibt im templates/honegird/usermod/css/_samples nur zwei dateiden.


    Die einte ist category_menu_highlighting_actives:
    .current span,
    .current a,
    .current a:visited,
    .current a:link,
    .current a:active,
    .current a:visited,
    .current a:hover,
    .current span,
    a.current,
    a.current:visited,
    a.current:link,
    a.current:active,
    a.current:visited,
    a.current:hover,
    a.parentOfCurrent,
    a.parentOfCurrent:visited,
    a.parentOfCurrent:link,
    a.parentOfCurrent:active,
    a.parentOfCurrent:visited,
    a.parentOfCurrent:hover,
    .parentOfCurrent span,
    .parentOfCurrent a,
    .parentOfCurrent a:visited,
    .parentOfCurrent a:link,
    .parentOfCurrent a:active,
    .parentOfCurrent a:visited,
    .parentOfCurrent a:hover {
    font-style: italic !important;
    color: #00137f !important;
    }
    .current span,
    .current a,
    .current a:visited,
    .current a:link,
    .current a:active,
    .current a:visited,
    .current a:hover {
    font-size: 16px !important;
    }

    und die andere ist ist fixed_background:



    body
    {
    background-attachment: fixed;
    }



    und sonst hat es nichts,

    im style editor habe ich auch nichts gefunden
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    _samples ist falsch, da sind nur Beispieldateien.

    Irgendwo muss der das css hingeschrieben haben :D
    Ich kann noch einmal schauen und das css für den PC (ab 1200px) zusammen suchen.
    Aber Du brauchst auch die Angaben für die anderen Bildschirmauflösungen, deshalb wäre es einfacher, wenn Du wüstest wo die sind.
     
  9. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Versuche es mal mit dem Code für die PC-Version:

    Code:
    @media (min-width: 1200px){
    .block-left-main {
        width: 50%;
        float: left;
    }
    .block-left {
        width: 100%;
        float: left;
        padding: 0.5%;
    }
    .block-right-main {
        width: 50%;
        float: left;
    }
    .block-right {
        width: 100%;
        float: right;
        padding: 0.5%;
    }
    .block-bottom-main {
        width: 100%;
        float: left;
    }
    .block-bottom {
        width: 25%;
        float: left;
        padding: 0.25%;
    }
    }
    
    .block-left img, .block-right img, .block-left-large img, .block-left-small img, .block-bottom img {
        width: 100%;
        transition: all 1.2s ease 0s;
    }
    Das kannst Du ins eigene css im Style Editor eintragen.