Beiträge von BoneCrusher

  • Wie bekomme ich DAS responsive dargestellt

    Hallo Forum,

    ich verzweifle seit Tagen an einem für mich unlösbarem Problem. Ich bin kein Profi in Sachen HTML und PHP, allerdings weiß ich mir in der Regel zu helfen, nur hier bekomme ich es nicht hin.

    Folgendes:
    Wir haben dieses Template für unseren JTL Shop gekauft. http://flex.themeart.de/

    Das Template bekommen wir eigentlich ganz ordentlich bearbeitet, aber eine Sache stört uns ungemein. Dies betrifft die 3 Kategorieboxen direkt unterhalb vom Slider (siehe Screenshot)

    [Blockierte Grafik: https://abload.de/thumb/screen1cqubu.jpg]

    Wenn man jetzt den Browser bis zum Umbruch verkleinert, dann ist das dortige Verhalten für uns so nicht akzeptabel. Wir möchten gerne, dass die 3 Kategoriebilder bis an den Rand aufgezoomt werden. (siehe Screenshot)

    [Blockierte Grafik: https://abload.de/thumb/screen27yjt0.jpg]

    Ich sitze seit geschlagenen 4 Tagen an der Beseitigung des Problems, aber ich kriege es einfach nicht hin und weiß nicht mehr wo ich ansetzen soll.
    Eine Beispielseite habe ich gefunden, wo das gewünschte Ergebnis einfach perfekt umgesetzt wurde.

    http://www.newsmartwave.net/magento/porto/index.php/demo7_en

    In der Beispielseite ist oben der große Banner mit Huge Sale, Watches, Jackets etc. Genau dieses Verhalten möchte ich erzielen beim Umbruch bzw. bei mobiler Ansicht. Diese Seite habe ich mir lokal abgespeichert und mir ganz genau den Code rausgesucht, der für dieses Verhalten notwendig ist.

    HTML
    <div class="top-container"><div id="slideshow"><div class="homepage-grid-banner">  <div class="container">    <div class="row">      <div class="col-sm-6">        <div class="grid1" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner1.jpg" width="566" height="536" alt="" /></a>        </div>      </div>      <div class="col-sm-3">        <div class="grid3 col-sm-margin" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner3.jpg" width="279" height="264" alt="" /> </a>        </div>        <div class="grid4" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner4.jpg" width="279" height="264" alt="" /> </a>        </div>      </div>      <div class="col-sm-3">        <div class="grid2" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner2.jpg" width="279" height="536" alt="" /> </a>        </div>      </div>    </div>  </div></div>

    Die passenden CSS Klassen habe ich mir via Dust-Me-Data rausgesucht und in die theme.css eingetragen. Ergebnis bleibt 1:1 gleich wie im Beispiel-Link. Die angewendeten CSS Klassen wurde mir per Dust-Me-Data so ausgegeben.

    Code
    * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}img {vertical-align: middle}.container {margin-right: auto;margin-left: auto;padding-right: 15px}@media (min-width:768px) {.container {    width: 750px}@media (min-width:992px) {.container {    width: 970px}@media (min-width:1200px) {.container {    width: 1170px}}.col-sm-3, .col-sm-6 {position: relative;min-height: 1px;padding-left: 15px;padding-right: 15px}@media (min-width:768px) {.col-sm-3, .col-sm-6 {    float: left}.col-sm-6 {    width: 50%}.col-sm-3 {    width: 25%}.row:after {clear: both}.homepage-grid-banner {padding:0}.homepage-grid-banner *{transition:all .2s}.homepage-grid-banner .row{margin-left:-4px;margin-right:-4px}.homepage-grid-banner .col-sm-3,.homepage-grid-banner, .col-sm-6{padding-left:4px;padding-right:4px}.homepage-grid-banner .col-sm-margin{margin-bottom:8px}.homepage-grid-banner img{width:100%}.homepage-grid-banner .grid1,.homepage-grid-banner .grid2,.homepage-grid-banner .grid3,.homepage-grid-banner .grid4{cursor:pointer;overflow:hidden;min-height:50px}.homepage-grid-banner .grid1:before,.homepage-grid-banner .grid2:before,.homepage-grid-banner .grid3:before,.homepage-grid-banner .grid4:before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;opacity:0;filter:alpha(Opacity=0);visibility:hidden;transition:all .2s}.homepage-grid-banner .grid1:hover:before,.homepage-grid-banner .grid2:hover:before,.homepage-grid-banner .grid3:hover:before,.homepage-grid-banner .grid4:hover:before{opacity:.1;filter:alpha(Opacity=10);visibility:visible}#slideshow img{max-width:100%;height:auto}

    Ich hoffe, dass ich mich verständlich ausgedrückt habe und mir jemand helfen kann, da ich mittlerweile mit meinem Latein am Ende bin und nicht mehr weiß wo ich noch ansetzen kann.

    Vielen Dank

  • Text mittig ausrichten und Bild vorstellen - Ich verzweifle

    Hallo liebes Forum

    ich habe mich heute hier angemeldet, da ich vor einem für mich unlösbarem Problem stehe, was wahrscheinlich für die Leute hier eine Kleinigkeit ist.

    Folgendes möchte ich gerne umsetzen:

    Ich möchte einen Info Block in einer Webseite einbauen, welcher sich dynamisch an die Fenstergröße anpasst und welcher einen grauen Hintergrund, sowie oben und unten einen 1px Border in dunklerem Grau hat.

    Dazu nutze ich folgende CSS

    Nun soll der Text immer mittig sitzen, allerdings davor eine Infografik haben. Im Prinzip scheitere ich nur noch an dem Punk, dass die Grafik nie links vom Text sitzt, sondern der Text mittig, aber die Grafik hängt immer links. Nehme ich das float:left raus, so sitzt die Grafik über dem Text.

    Folgenden HTML Code habe ich bisher

    HTML
    <div class="info-block"><img alt="" src="http://localhost/test/mediafiles/Bilder/telephone.png" style="width: 50px; height: 50px; float: left;" /><p><h3>Dies ist ein Infoblock<br />Schicke uns eine Email</h3></p>
<div class="clearfix"></div></div>

    Kann mir hier bitte jemand behilflich sein und mir unter die Arme greifen, sodass der Info Text immer mittig sitzt und die Graphic direkt links neben dem Text steht?
    Ich habe schon dutzende Tutorials bezüglich Text umfließt Grafik durchprobiert und da hat es mit dem Beispielcode auch funktioniert, allerdings sehe ich entweder den Wald vor lauter Bäumen nicht mehr, oder aber ich schnalle es einfach nicht.

    Vielen lieben Dank
    BoneCrusher