Magento Warenkorb verschieben und Banner responsive mit 100% breite darstellen
 

hallo zusammen!
ich baue gerade einen magento shop und habe noch zwei weitere fragen für die ich aber der übersichtshalber lieber diesen thread hier aufmache.

hier erstmal der aufbau der seite: http://latex-fashion.epizy.com/home.jpg

problem 1: ich möchte in dem vorgefertigten template den warenkorb (und wenn es geht auch die suche) direkt neben die navigationsleiste verschieben. nun scheint die navigation allerdings über die gesamte breite zu laufen. kann ich den warenkorb und ggf die suche da überhaupt "neben" schieben? wie könnte ich es anstellen? (referenz-seite für ggf codes: lalala)

problem 2:ich möchte banner 2 (s. generellen aufbau der seite) über die ganze breite laufen lassen. so breit wie der große slider oben. habe da schon einiges rumprobiert, jedoch scheint der banner irgendwie in der breite begrenzt zu sein. wie könnte ich ihn auf die gesammte breite bekommen und das am besten noch responsive? (referenz-seite für ggf codes: lalala)


sory, ich bin echt etwas am verzweifeln... :(

Zu 1:

Ja, du kannst die Navigation und die Suchleiste + warenkorb mit float nebeneinander bekommen. Die Navigation bekommt float: left und der Warenkorb bekommt float: right. Am besten für Warenkorb und Suchleiste einen gemeinsamen Wrapper benutzen, dieser bekommt dann float: right. Dann musst du noch ein wenig mit den Breiten rumspielen. Alternativ zu float geht auch Flexbox.

Zu 2:

Welchen Banner meinst du? Ein Screenshot reicht hier nicht aus.

hallo, danke für deine antwort!

ich habe die seite mal hochgeladen: lalala.hund.in (wird eine seite für latex-begleidung werden)

zu 1) leider funktioniert das floaten in meinem fall nicht. ich kann zwar die navigation nach rechts oder links verschieben, aber wenn ich den warenkorb floaten will passiert gar nichts... :( muss ich navi, suche und warenkorb irgendwie erst in EINEN container oder so verschieben, damit ich die nebeneinandersetzen kann?

zu 2) auf lalala.hund.in findest du den besagten banner (besehend aus 5 bildern), ist der direkt unter dem großen slider. er soll am ende über die gesamte breite gehen und responsive sein. es scheint mir, als wenn irgendwas den banner begrenzt. was kann ich da tun?

beste grüße und vielen dank für die hilfe! :)

Zu 1:

Sorry, ich hatte mir das HTML nicht so genau angeguckt. Mit dem derzeitigen Aufbau wird es eher nicht klappen. Kannst du das HTML beeinflussen? Am besten wäre es wenn du etwa folgenden Aufbau hättest (die Klassen sind nur ausgedacht):

Dann könntest du die Navigation und den Wrapper perfekt floaten.

Zu 2:

Achso, unter Banner verstehst du die 5 Bilder sozusagen?^^ Die sind in der Breite beschränkt, weil sich <div class="container"> herum befindet. Dieser hat eine Breite von 1200px. Soll der "Banner" über die ganze Bildschirmbreite gehen, dann musst du hier die Breite auf 100% setzen. Da container aber vermutlich eine häufig verwendete Klasse ist wäre es sinnvoll hier eine zweite Klasse hinzuzufügen.

erstmal VIELEN dank für deine antworten! leider bin ich grad aufm sprung, daher nur kurz...

zu 2) ich habe die entsprechende stelle im quellcode gefunden (magento ist da manchmal etwas kompliziert, weil alles irgendwie auf viele dateien aufgeteilt zu sein scheint) und die width auf 100% gesetzt. leider wurde dabei allerdings das navigationsmenü mitverschoben. das ist allerdings meiner auffassung nach in einem anderen container, oder liege ich da falsch? der "banner" geht nun aber über die gesamte fläche, das ist super! nun müsste ich nur noch das menü irgendwie wieder gerade rücken. (es ist jetzt so, dass der "home" button aus der seite, also über den rand hinweg ragt und nicht mehr zu sehen ist. hast du einen tip, wie ich weiter vorgehen könnte?

Doch, die Navigation befindet sich auch in einem <div class="container">. Das ist in deinem Fall ne häufige Klasse, die benutzt wird um die ganze Seite zu zentrieren und maximal 1200px breit zu machen. Wenn Bereiche wiederum über die ganze Seite gehen sollen, befinden sie sich NICHT in einem solchen Container.

Ich würde dafür sorgen dass du nicht alle .container ansprichst, sondern nur diesen einen. Du musst also entweder dem .container eine zusätzliche Klasse oder ID geben, die du ansprichst. Angenommen du nennst die neue Klasse "banner", dann verwendest du den Selektor .container.banner

Alternativ kannst du den Container über <div class="main-container col1-layout"> ansprechen, das wäre der äußere Wrapper. Also folgendes schreiben: