Layout Probleme

MissV · January 10, 2011, 2:51pm

Ich habe momentan zwei Layout Probleme

1.) Im Warenkorb gibt es diese zwei Buttons “Weiter shoppen” und “Weiter zum nächsten Schritt”

Hier möchte ich gerne “Weiter Shoppen” linksbündig und andersfarbig machen
"Weiter zum nächsten Schritt" sollte rechtsbündig bleiben
Beide Buttons sollten auf einer Höhe sein

Ich schaffs nicht, beide unterschiedlich zu layouten, er nimmt mir die Klassen nicht an

2.) Ich habe auf der Startseite im Shop Kategoriebilder
Nun möchte ich, dass der Abstand zwischen den Kategoriebildern und dem Footer ganz klein ist, ist er momentan auch
Das Problem ist aber, dass er dann auch sonst immer ganz klein ist, somit hängt die Kategorieseite, Warenkorb, etc zu weit unten

Wie kann ich das lösen, dass nun auf der Startseite weniger Abstand ist?

Hab nun schon Tage und Stunden herumprobiert und keine Lösung gefunden

Priester · January 10, 2011, 4:47pm

Link zum Shop wäre hilfreich.

MissV · January 10, 2011, 5:34pm

Link zum Shop: www.muso-koroni.com

Priester · January 10, 2011, 7:35pm

Also, wenn ich mit Firebug mir dass ansehe und margin left und right und top die Werte ändere schauts gut aus. CSS Zeile 368 mal überprüfen. Und dort kannst Du auch den Background-Color. ändern.

MissV · January 10, 2011, 8:03pm

Ich möchte aber ja beide Buttons andersfarbig haben

Abstand zwischen Content und Footer sollte ja überall mehr sein abgesehen auf der Startseite

rubbercut · January 10, 2011, 8:10pm

Warenkorb:

HTML

<div class="bar prevxxx">
          <input type="hidden" name="stoken" value="1DAE78FF"><input type="hidden" name="force_sid" value="14531a416b7d849594d2b150745b1ed8">
<input type="hidden" name="lang" value="0">
          <input type="hidden" name="cl" value="basket">

          <input type="hidden" name="fnc" value="backtoshop">
          <div class="xxx">
              <input type="submit" value="Weiter shoppen" class="left">
          </div>
      </div>
    </form>
  <div class="bar prevnext bottom">
        
    
        <form action="http://www.muso-koroni.com/index.php?" method="post">
      <div>
          <input type="hidden" name="stoken" value="1DAE78FF"><input type="hidden" name="force_sid" value="14531a416b7d849594d2b150745b1ed8">

<input type="hidden" name="lang" value="0">
          <input type="hidden" name="cl" value="user">
          <div class="right arrowright">
              <input id="test_BasketNextStepBottom" type="submit" value="Weiter zum nächsten Schritt">
          </div>
      </div>
    </form>
    
  </div>

CSS:

#body div.bar.prevxxx {margin:0;padding:0;height:27px; float: left; width: 200px;}

Formatierung einfügen (oxid.css ab Z. 366), fertig

MissV · January 11, 2011, 10:09am

@rubbercut: Deine Lösung funktioniert leider nicht
Es werden dann 3 Buttons angezeigt und 2 davon ganz plain!

Hier nochmal der original HTML Code:

 <div class="bar prevnext bottom">
    [{if $oView->showBackToShop()}]
    <form action="[{ $oViewConf->getSslSelfLink() }]" method="post">
      <div>
          [{ $oViewConf->getHiddenSid() }]
          <input type="hidden" name="cl" value="basket">
          <input type="hidden" name="fnc" value="backtoshop">
          <div class="left arrowdown">
              <input type="submit" value="[{ oxmultilang ident="BASKET_CONTINUESHOPPING" }]">
          </div>
      </div>
    </form>
    [{/if}]

CSS:

#body div.bar.prevnext {margin:0;padding:0;height:27px; float: right; width: 200px;}
#body div.bar.prevnext input {color: #fff;font-size:13px; background: #008484; -moz-box-shadow: 1px 1px 1px #000; -webkit-box-shadow: 1px 1px 1px #000; box-shadow: 1px 1px 1px #000; cursor:pointer; font-family:Titillium Text;padding:6px 30px;margin:0;line-height: 1.1em;border:none;}
#body div.bar.prevnext.bottom {margin-bottom:15px;}

rubbercut · January 11, 2011, 11:56am

…http://premiereline.de/muso.html. So sollte es doch aussehen, oder?..

MissV · January 11, 2011, 12:01pm

ja so ungefähr
der linke button sollte andersfarbig und mehr nach rechts sein, aber das sollte nicht das problem sein

mit deinem code war aber der ursprüngliche “weiter zum nächsten schritt” button noch da PLUS die zwei neuen buttons , die aber plain!

code habe ich genau von dir reinkopiert

rubbercut · January 11, 2011, 12:10pm

…der andere Button muss vor

<div class="bar prevnext bottom">

…

tvtotal · January 11, 2011, 12:12pm

Jepp, das seh sogar ich.

MissV · January 11, 2011, 12:43pm

Schön, dass ihr das seht, trotzdem funktionierts nicht!!

MissV · January 11, 2011, 12:50pm

mein Fehler, anscheinend gehört ja dieser ganze Code zu den zwei Buttons

 <div class="bar prevnext bottom">
    [{if $oView->showBackToShop()}]
    <form action="[{ $oViewConf->getSslSelfLink() }]" method="post">
      <div>
          [{ $oViewConf->getHiddenSid() }]
          <input type="hidden" name="cl" value="basket">
          <input type="hidden" name="fnc" value="backtoshop">
          <div class="left arrowdown">
              <input type="submit" value="[{ oxmultilang ident="BASKET_CONTINUESHOPPING" }]">
          </div>
      </div>
    </form>
    [{/if}]
  


    [{if $oView->isLowOrderPrice() }]
      <div class="minorderprice">[{ oxmultilang ident="BASKET_MINORDERPRICE" }] [{ $oView->getMinOrderPrice() }] [{ $currency->sign }]</div>
    [{else}]
    <form action="[{ $oViewConf->getSslSelfLink() }]" method="post">
      <div>
          [{ $oViewConf->getHiddenSid() }]
          <input type="hidden" name="cl" value="user">
          <div class="right arrowright">
              <input id="test_BasketNextStepBottom" type="submit" value="[{ oxmultilang ident="BASKET_NEXTSTEP" }]">
          </div>
      </div>
    </form>
    [{/if}]

  </div>

tvtotal · January 11, 2011, 1:30pm

Und jetzt scheint <div class=“bar prevnext bottom”> ganz zu fehlen.

MissV · January 11, 2011, 1:46pm

das ist der ORIGINAL-Code, da ich bis dato noch keine funktionierende Lösung gefunden habe

MissV · January 13, 2011, 10:12am

Brauche noch immer Hilfe

tvtotal · January 13, 2011, 10:33am

Wieso das? Obige Lösung funktioniert doch, wie zu sehen war.

MissV · January 13, 2011, 10:38am

Die verlinkte Lösung hat aber nur optisch gepasst, nicht funktionell

Die obige Lösung hat kaum noch was mit dem Originalcode zu tun
Weder mehrsprachig, noch ist die funktion “minorderprice” inkludiert

Die Buttons haben ausserdem nicht funktioniert

ChristophH · January 13, 2011, 10:39am

Mhh, ich habe in Firebug, dem “Weiter shoppen” button einfach die Anweisungen.

position: absolute; left: 200px; verpasst und die anderen css-Klassen entfernt. Fertig.

MissV · January 13, 2011, 10:49am

Welche Klasse sollte das sein?

left arrowdown & right arrowright gibt es nämlich gar nicht in den .css dateien

Das Problem liegt ja eher für mich darin, dass “div.bar.prevnext” beide buttons umfasst
wie bereits im Anfangspost erwähnt würde ich ja auch beide buttons ganz gern andersfarbig machen, “Weitershoppen” in Grau und “Weiter zum nächsten Schritt” kann so bleiben wie er ist