art-box in der template.css verschieben

  • Hallo,

    ich bin relativ unerfahren und habe meine Kenntnisse hauptsächlich durch probieren erlangt.
    Mein Problem:
    Ich habe ein mit Artisteer erstelltes Template. Die komplette Seite ist zentriert. Ich möchte die Seite aber nach links verschieben mit etwa 20px Abstand vom linken Rand.
    In der template.css Datei habe ich schon die Objekte gefunden, die ich bewegen muss. Die Box allerdings lässt sich nicht in einem Stück verschieben. Da sie Ecken abgerundet sind, sind links,rechts,oben,unten noch kleine Leisten zusätzlich dran.
    Wenn ich jetzt die margin auf 0 stelle, dann rückt alles brav nach links. Stelle ich die margin jedoch auf 20px, dann wird meine box um 20px schmaler. Die äußeren Leisten bleiben jedoch auf der unrsprünglichen Größe...
    Wo hakt es?

    /* Start Box */
    .art-box, .art-box-body {
    margin:0 auto;
    position:relative;
    }
    .art-box:before, .art-box:after, .art-box-body:before, .art-box-body:after {
    position:absolute;
    top:0;
    bottom:0;
    content:' ';
    background-repeat: no-repeat;
    line-height:0;
    }
    .art-box:before,.art-box-body:before{
    left:0;
    }
    .art-box:after,.art-box-body:after{
    right:0;
    }
    .art-box:before {
    overflow:hidden;
    background-position: bottom left;
    direction: ltr;
    z-index:-3;
    }
    .art-box:after {
    background-position: bottom right;
    z-index:-3;
    }
    .art-box-body:before, .art-box-body:after {
    background-repeat:repeat-y;
    }
    .art-box-body:before {
    background-position: top left;
    z-index:-3;
    }
    .art-box-body:after {
    background-position: top right;
    z-index:-3;
    }

    .art-box .art-box:before, .art-box .art-box:after, .art-box-body .art-box-body:before, .art-box-body .art-box-body:after {
    z-index:-2;
    }
    .art-box .art-box .art-box:before, .art-box .art-box .art-box:after, .art-box-body .art-box-body .art-box-body:before, .art-box-body .art-box-body .art-box-body:after {
    z-index:-1;
    }
    /* End Box */

    Vielen Dank für eure Hilfe!

  • So hab mal geschaut. Ohne in die Tiefen einzudringen noch eine Bewertung dieses Templates vorzunehmen wird das einfachste folgendes sein: Nach dem Container mit der ID art-main fügst du einen zusätzlichen Container z.b. id=page ein. Den schließst du erst ganz am Ende der Seite und formatierst in der CSS-Template-Datei wie folgt:

    Code
    #page{width:800px;margin-left:20px;}

    Das, auf jeder Seite eingefügt, sollte helfen. p.s. Einmal 'clearen' reicht im Algemeinen!!!

    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de