zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Magento Warenkorb verschieben und Banner responsive mit 100% breite darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.01.2017, 20:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard 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...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.01.2017, 14:21
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.01.2017, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2017, 09:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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):

Code:
<div class="nav-container"></div>
<div class="wrapper-fuer-suche-und-warenkorb">
    <div class="suche"></div>
    <div class="warenkorb"></div>
</div>
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.01.2017, 22:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2017
Beiträge: 8
cytochrom befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 31.01.2017, 09:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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:

Code:
.main-container .container {
    width: 100%;
}
Mit Zitat antworten
Antwort

Stichwörter
banner, css, magento, navigation, responsive

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 15:40 Uhr.