Spalten CSS

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>

 

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.

 

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://

 

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.

 

die css codes hab ich nicht eingetragen, ich weiss auch nicht genau was und wo, da mir das jemand anders gemacht hatte.

 

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.

 

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

 

_samples ist falsch, da sind nur Beispieldateien.

Irgendwo muss der das css hingeschrieben haben
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.

 

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.