Neu Suche, Warenkorb nach links verschieben

[saschaklammer]

Hallo,

wie bekomme ich das Logo weiter runter und die Suche/Anmelden/Warenkorb weiter nach rechts?

Ich finde es einfach nicht 🙁

Vielen DAnk

 

[karabey]

Das kommt davon weil dein Logo zu breit ist. Entweder dein Logo verkleinern oder die Klassen im Header anpassen. Mit einem Link wäre es einfacher

 

[Raumbuchstaben]

Das kommt davon weil dein Logo zu breit ist. Entweder dein Logo verkleinern oder die Klassen im Header anpassen. Mit einem Link wäre es einfacher

http://tierfelle.de/

 

[saschaklammer]

http://dittert.ropc.de/ lautet die Testdomain.

 

[twe]

Wenn du das EVO-Template hast, in der Datei

layout/header_shop_nav.tpl

mit Hilfe eines Child-Templates, folgendes ändern:

<ul class="header-shop-nav nav navbar-nav force-float horizontal pull-right">
...

</ul>

pull-right entfernen, dann sind Suche und Warenkorb links. Du kannst hier die Klassen auch ersetzen und in der CSS anpassen.

 

[karabey]

Du hast schon Fehler mit den Klassen. Der maximale Wert liegt bei 12 und hat eine breite von 100%, also col-xs-12, col-sm-12, col-md-12, col-lg-12.

col-*-12 = 100%
col-*-1= 8.3333%

Wenn dein Logo die ganze Breite nehmen soll, dann ändere den Eintrag wie folgt

<div class="col-xs-50 col-sm-30 col-md-45" id="logo">
<a href="http://dittert.ropc.de" title="">
<img src="bilder/intern/shoplogo/logo-dittert2.jpg" width="1000" height="113" alt="" class="img-responsive">
</a>
</div>

auf

<div class="col-xs-12" id="logo">
<a href="http://dittert.ropc.de" title="">
<img src="bilder/intern/shoplogo/logo-dittert2.jpg" width="1000" height="113" alt="" class="img-responsive center-block">
</a>
</div>

Hier muss noch korrigiert werden da diese Klassen gar nicht existieren:

<div class="col-xs-25 col-sm-15 col-md-20" id="shop-nav">.......</div>

 

[saschaklammer]

vielen Dank! was ich nicht ganz verstehe bzw. jetzt ändern muss, damit nur die warenkorb und anmelden anzeige rechts ist. hatte bei basket gesucht...

 

[karabey]

Du kannst hier nur col-xs-12 lassen weil "xs" deutet das auch bei dem kleinsten Browser Größe, also Mobil, eine breite von 100% ist.

<div class="col-xs-12 col-sm-12 col-md-12" id="logo">.....

Bei der Suche hast du mal "col-xs-8" verwendet

<div class="col-xs-8 col-sm-10 col-md-8" id="shop-nav">....

das wäre mindestens besser

<div class="col-xs-12 col-sm-10 col-md-8" id="shop-nav">....

Hier wirst du eine breite bei Mobile (0-468px [xs]) 8 x 8,3333%, bei eine Tablet (468-768px [sm]) 10 x 8,3333% etc... haben.. Teste es mal am Handy.

Lese dich ein wenig hier ein: http://getbootstrap.com/css/#grid-media-queries

Sieh dir das Bild an wie du es realisieren kannst. Da ist ein wenig Arbeit um die Suche links und Anmelden/Warenkorb rechts zu halten.

 

[saschaklammer]

Danke!!! Auch für die Geduld. Ihr bekommt bestimmt die Krise wenn ihr so Fragen lesen müsst 😀

 

[saschaklammer]

@karabey: wie untersuchst du die Seite? Wenn ich Element untersuchen klicke, dann bekomme ich bei weiten nicht so viele Informationen.

VG

 

[saschaklammer]

was ich auch nicht verstehe, wenn ich das Bild größer gemacht habe und ich möchte den Warenkorb etc. rechts haben, dann setze ich doch wieder pull-right ein oder? Allerdings wird das ganze dann nur zentriert bei mir.
Vielen Dank

http://dittert.ropc.de/

 

[karabey]

Hey Sascha,

Bei Chrome sollte rechts klick und dann untersuchen und bei Firefox muss du den FireBug Plugin installieren. Hast du inzwischen schon auf Bootstrap Seite http://getbootstrap.com/ gelesen wie die Klassen so funktionieren?

Du musst verstehen wie Grid in Bootstrap funktioniert und dann kannst du dementsprechend alles schlichten. http://getbootstrap.com/css/#grid-media-queries