Artikelbox - Abstand lässt sich nicht ändern

Thema wurde von matthias_wempe, 1. Dezember 2017 erstellt.

  1. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Hallo Ihr Lieben,

    irgendwie lässt sich der Abstand meiner Artikelbox nicht verändern (siehe Anhang). Jedes mal wenn ich "margin-top: xy" eingebe und diesen Wert vergrößer, ändert sich ebenso der markierte Wert im Anhang. Woran liegt das und in welcher Datei kann ich das ändern? Ich bin ein wenig verzweifelt.

    Vielen Dank für eure Unterstützung!!!

    Beste Grüße,
    Matthias Wempe

    Link: http://www.matthiaswempe.www76.hostkraft.de
     

    Anhänge:

  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Die Box läft am rand mit runter normal. mach mal längeren Beschreibungstext rein dann siehst das.

    Wenn du
    den teil
    .product-info .product-info-details {
    margin-top: 87px;
    }

    vergrößerst rutscht die box doch oben aus dem Bereich raus. welcher teil bewegt sich den dann noch der dich stört?
     
  3. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    der Bereich ändert sich dann
     

    Anhänge:

  4. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Hallo Dennis,

    in der Firefox Konsole z.B. nimmt er die Änderungen sofort an, aber wenn ich den CSS Code eingebe passiert komischerweise gar nichts. Das ist ja mein großes Problem. Der "top" Wert darüber rutscht automatisch weiter in den Minusbereich.

    top: -117.15px;

    Aber Warum? :/ Irgendwo stimmt da was nicht.
     
  5. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Es könnte sein, dass eine Einstellung in Deinem Header nicht passt.
    Der ganze Main-Bereich ist zu hoch, der müsste unterhalb der Kategorien anfangen und nicht hinter den Kategorien
    Wenn ich hier:
    Code:
    @media (min-width: 768px){
    body #outer-wrapper {
        margin-top: 0px;
        margin-bottom: 0px;
    }}
    das margin-top auf 30px setze
    rutscht alles nach unten.

    Wäre aber eher eine Notlösung.
    Wenn der Header (Logo, suche, freier Bereich, Warenkorb) richtig eingestellt sind, sollte das passen.
     
  6. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Funktioniert leider auch nicht. Der Top Wert erhöht sich immer mit, ganz von selbst. Ich könnte heulen :D

    <div class="product-info-details col-xs-12 col-md-4" style="top: -254px;">

    <div class="loading-overlay"></div>
    <div class="magnifier-overlay"></div>
    <div class="magnifier-target" style="display: none;">
    <div class="preloader" style="display: none;"></div>
    <img src="images/product_images/original_images/artikelbild.jpg" alt="Artikelbild" title="Artikelbild" style="height: 600px; width: 600px;"></div>
     
  7. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    Ich glaube, wenn ich diesen Wert entferne, funktioniert wieder alles. Aber in welcher Datei mach ich das? Kann man das per Firefox Konsole rausfinden, in welcher Datei sich der Quelltext befindet?
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    damit wirst Du das Problem nur verlagern.
    Wie sind denn Deine Einstellungen im Style Editor?
     
  9. matthias_wempe
    matthias_wempe Mitglied
    Registriert seit:
    8. November 2017
    Beiträge:
    12
    Danke erhalten:
    0
    Danke vergeben:
    1
    #9 matthias_wempe, 3. Dezember 2017
    Zuletzt von einem Moderator bearbeitet: 20. Dezember 2017
    Oh, da steht mittlerweile einiges drin... Dazu ist es noch in der Projektphase etwas unsortiert.

    Mein CSS Code

    Code:
    // * OBERES MENÜ * //
    #categories .navbar-default .navbar-nav {
        height: 40px;
        width: auto;
        display: table-cell;
        vertical-align: middle;
        padding: 0;
        text-align: center;
        font-size: 14px;
    //    border-bottom: 4px solid #9bc321;
    //    Unterlinie wie im Testshop
    }
    // * KATEGORIE LINKS TABELLENEINSTELLUNGEN der EINZELNEN ZEILEN / LINKS * //
    .panel > .navbar-categories-left > ul > li {
        background-color: #ffffff;
        width: 200px;
        border-top: 0px;
        border-bottom: 0px;
        border-right: 0px solid #eeeeee;
        border-left: 0px;
        font-size: 13px;
    }
    .dropdown-menu {
        font-size: 13px;
    }
    .box-categories {
        margin-top: 50px;
        width: 200px;
        outline: 0px;
    }
    .panel-default {
        clear: both;
        border-color: #fff
    }
    .panel > .navbar-categories-left > ul > li > a:before {
        content: none;
    }
    // * KATEGORIE FARBE DER PFEILE INAKTIV * //
    .panel > .navbar-categories-left > ul li.active, .panel > .navbar-categories-left > ul li a:before {
    //    color: #000000;
          background-color: #ffffff;
    }
    // * KATEGORIE FARBE DER PFEILE AKTIV * //
    .panel > .navbar-categories-left > ul li.active > a, .panel > .navbar-categories-left > ul li.active > a:before {
    //    color: #000000;
        background-color: #ffffff;
    }
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        background-color: #ffffff;
    }
    // * KATEGORIE LINKS AKTIVES FELD * //
    .panel > .navbar-categories-left > ul li.active > a {
        color: #000000;
        background-color: #ffffff;
        font-weight: bold;
    }
    // * KATEGORIE LINKS NORMAL * //
    .panel > .navbar-categories-left > ul > li > a {
        padding-left: 20px;
    }
    .panel > .navbar-categories-left > ul li a, .panel > .navbar-categories-left > ul li a:before {
        color: #000000;
    }
    // * KATEGORIE LINKS SCHRIFT EINRÜCKEN * //
    .panel > .navbar-categories-left > ul > li > ul > li > a {
        padding-left: 30px;
    }
    .panel > .navbar-categories-left > ul > li > ul > li.active > a {
        padding-left: 30px;
    }
    // * SUCHFELD LINKER TEIL * //
    #search .input-group .input-group-btn .dropdown-toggle {
    //    color: #ffffff;
    //    background: #003781;
    }
    // * SUCHFELD RECHTER TEIL * //
    #search .input-group .form-control-feedback, #search .input-number .form-control-feedback {
        color: #005ea8;
        display: block;
        block-size: 34px;
    //    background-color: #cc0000;
    }
    // * LOGO Einstellung * //
    #navbar-brand a {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0px;
        width: 100%;
    }
    // * Slider Einstellung * //
    .center-block {
        display: block;
        padding: 0px;
        height: 370px;
        width: 100%;
    }
    // * HOME BUTTON * //
    @media (min-width:768px){
    #categories .top-home {
        float: left;
        color: #ffffff;
        background: #0c4a9a;
        padding: 8px 10px 7px 7px;
        border: 0px solid #ffffff;
    }}
    // * ABSTAND MENÜPUNKTE LINKS / OBEN * //
    .nav > li > a {
      padding: 8px 15px
    }
    // * BREADCRUMB NAVI * //
    #breadcrumb_navi {
       padding: 35px 0 15px
    }
    // * Checkout BOX Abstände - 1. Abschnitt //
    h1.no-underline, h2.no-underline, .nav-tabs > li > a.no-underline, .tab-content > .tab-pane > .tab-heading > a.no-underline, h3.no-underline {
       margin-top: 50px;
    }
    // * Checkout BOX 2. Abschnitt //
    .checkout-processfunnel li {
         margin-top: 30px;
    }
    // * Checkout BOX 3. Abschnitt * //
    h1, h2, .nav-tabs > li > a, .tab-content > .tab-pane > .tab-heading > a, h3 {
           margin-top: 30px;
    }
    // * Artikelinfo BOX //
    .product-info .product-info-details {
        margin-top: 50px;
    }
    // * DROPDOWN MENÜ KATEGORIE * //
    .navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu > li > a  {
       border-bottom: 0px;
    //   font-weight: 500;
    }
    // * Überschrift linke KATEGORIE * //
    h1, h2, .nav-tabs > li > a, .tab-content > .tab-pane > .tab-heading > a, h3 {
       margin-bottom: 0px;
       margin-top: 0px;
       padding-bottom: 10px;
       padding-left: 0px;
       border-bottom: 3px solid #005ea8;
       backround: #ffffff;
    }
    .panel-default > .panel-heading {
        background-color: #ffffff;
    }
     
  10. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich meinte nicht unbedingt Dein eigenes css, sondern was Du im Style Editor unter "Header" bei den ganzen unterpunkten eingetragen hast.

    P.S. für so lange Texte gibt es Code-Boxen. Die findest Du unter dem kleinen "+" - Symbol