Ajax Suggest für die Suche

[mizzy]

Hallo,

nach einer kleinen Suchphase konnte ich den Fehler lokalisieren.

in der searchSuggest.php habe ich aufgrund einer kleinen Schönheitskorrektur folgende Veränderung vorgenommen

Zeile 82 wurde von

Code: PHP  [Auswählen]

echo '<div style="float:left;">'.$product_array['products_name'] . '</div><div style="text-align:right;">&nb..;' . $product_array['categories_name'] . "</div>\n";

geändert in:

Code: PHP  [Auswählen]

echo '<div class="suggest_products_name">'.$product_array['products_name'] . '</div><div class="suggest_categories_name">'.$product_array['categories_name']."</div>\n";

Vor dem $product_array fehlt der Freizeichencode &nb..; (kann ich nicht posten), dies war der Auslöser dafür mit dem &nb..; Klappt es nun wieder

Vielleicht hilft es ja jemand weiter, falls mal das selbe Problem besteht.

Beste Grüße und noch einen schönen Sonntag

Micha

[Tomcraft]

Komisch, hatte diese Probleme nicht... Du hattest aber nachträglich an der Datei gefummelt und dabei ist was kaputt gegangen?

[mizzy]

Hallo,

ja genau wie geschrieben, wegen ner Schönheitskorrektur hab ich rumgefriemelt  
Solang wie man den Fehler dann findet ist ja alles i.O.

Also war kein Fehler vom hier im Thread beschriebenen, das habe ich schon selbst
verzapft  

V.G. Micha

[speedy]

Guten Abend,

ich habe das Hersteller Dropdown direkt links neben das Search Search Suggest Feld gesetzt. Jetzt ist mir aufgefallen, dass ich dann nichts mehr ins Suchfeld eintippen kann. Man kann das Feld gar nicht "greifen", als wenn es ein Bild wäre.
Komischerweise tritt das Problem nur im Firefox auf, aber nicht im IE8 und nicht im Opera.
Wenn ich die boxes.css testweise lösche, ist das Problem auch weg.

Was könnte am diesem CSS falsch sein ?

Code: CSS  [Auswählen]

  #box_hersteller {
        position: absolute;
        top: 218px;
        right: 225px;
        width: 500px;
        color: #000000;
  }
  /* Dropdown für Herstellerbox */
  .manuDropdown {
    width: 100%;
  }
  /* Suche */
  #box_suche {
        width: 190px;
        padding: 6px 0 5px 0;
        float: right;
        background: #DFE3E2;
        text-align: right;
        padding-right: 7px;
  }
 

Vielen Dank

speedy

[guensi]

Deine Herstellerbox hat eine Breite von 500px. Damit überdeckt sie alles was rechts davon kommt. Setz den Wert mal auf das für dich notwendige Maß herunter, ggfs. solltest du auch mal posten, wie du das eingebunden hast. Denn es scheint dass du da mit z-Index arbeitest, ansonsten würde dir diese Anweisung das gesamte Layout zerlegen.

[speedy]

Danke für den Tipp guensi.

Das Einbinden der zwei Boxen ist aber keine Zauberei, nur in der index.html das hier eingefügt:

Code: PHP  [Auswählen]

{$box_MANUFACTURERS}{$box_SEARCH}

Mit z-index arbeite ich nicht, das CSS von oben ist exakt alles was ich habe, die zwei Boxen betreffend.

Hatte da bei ner anderen Seite gespitzelt, weil ich nicht wusste wie man die Position frei bestimmen kann mit CSS.

Habs jetzt so abgeändert und funktioniert jetzt, aber so ganz schlau werd ich aus dem CSS ned, was positionieren angeht.

Code: CSS  [Auswählen]

  #box_hersteller {
        position: absolute;
        top: 218px;
        right: 525px;
        width: 200px;
        color: #000000;
  }
 

Hab nur so meine Zweifel, ob das in jeder Auflösung damit klappt.

[guensi]

Joh, klar das hatte ich vorhin übersehen, du hast da ne position absolute drin. Eine Herstellerbox mit 500px Breite deckt normal locker den halben Bildschirm ab. Und solange sie nicht einen z-index hat, sollte sie sich diesen Platz eigentlich auch erzwingen. Eine Angabe in Pixel ist fix, damit sollte die Auflösung kein Problem darstellen. 1 Pixel ist 1 Pixel, daran ändert die Auflösung nix.

Was das Positionieren betrifft, das ist ne Wissenschaft für sich. Der Schlüssel ist position absolute.

Die Folge ist klar:
Mit dieser Anweisung nimmst du das Element aus dem Fluss - hmm wie erkläre ich das jetzt verständlich?

Am besten mal bei den Basics anfangen:
Alle Elemente einer Webseite liegen auf einer Ebene und eines folgt dem nächsten. Inlineelemente liegen nebeneinander, Blockelemente erzwingen eine neue Zeile. Alle inline-Elemente fliessen innerhalb der zur Verfügung stehenden Breite = Breite die für die Seite (meist im body geregelt) oder für das Element innerhalb dessen sie positioniert sind angegeben ist (entweder direkt im html oder im css), und brechen wenn die Breite überschritten wird um und werden damit unter dem vorhergehenden Element angezeigt.

Position absolute führt dazu, dass der normale Fluss ignoriert wird, also dieses Element gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat, positioniert wird.

Deshalb liegt deine Hersteller Box ausserhalb des Flusses und ist 500px breit und überdeckt damit alles was nachher kommt. (vermute mal die searchbox ist auch absolut positioniert und liegt auch noch darunter)  

Hoffe mal das ist einigermassen verständlich erklärt, wenn nicht solltest du dich bei selfhtml mal einlesen, denn das ist ein echt komplexes Thema.

[speedy]

Hallo guensi,

vielen Dank für die ausführliche Erläuterung.

Glaub so wird as nix, wenn die Hersteller Box schon über 500 Pixel breit ist, dann könnte es evtl. bei 1024x768 das Layout zerreißen.
Ich selbst arbeite mit 1680x1050, deshalb passt es bei mir möglicherwiese nur aus Zufall.

Bei Search Box hab ich nix mit position: absolute. Eigentlich gar nix mit position, siehe CSS oben. K.a. warum das geht, hab das irgendwann nach einem Beispiel nachgebaut

Glaub mit absolut wird das nix, wenn ich das richtig verstehe, denn bei 1024x768 müsste ich von rechts weniger weit den Abstand in Pixel zur Positionierung haben als bei 1680x1050.

[guensi]

Na na nicht gleich die Flinte ins Korn schmeissen - die 500px bei der HerstellerBox - wo immer die her sind - sind sowieso Müll. Die Breite kann die Box niemals haben.

Mit der Auflösung hat das nix zu tun - 1 Pixel ist ein Pixel - das sagte ich ja schon. Das Layout kann es dir deshalb nicht zerreissen, weil position absolute das Layout schlicht ignoriert und das Element genau da positioniert wo das angegeben ist. Aber alle darum liegenden Elemente nehmen halt darauf auch keine Rücksicht. Damit könnte - je nach Inhalt - deine Herstellerbox auch schon mal was überlagern, was darunter liegt.

Vielleicht solltest du das position absolute mal testweise einfach rausnehmen und sehen ob es dann funktioniert. (die Breite also width solltest du dann dem tatsächlich benötigten Raum anpassen)

Edit:
die Angaben zur absoluten Positionierung - also top und right solltest du gleich mit raus schmeissen.

[guensi]

Glaub mit absolut wird das nix, wenn ich das richtig verstehe, denn bei 1024x768 müsste ich von rechts weniger weit den Abstand in Pixel zur Positionierung haben als bei 1680x1050.

Zu diesem Problem nochmal separat - das hat nix mit deiner Auflösung zu tun, die Positionierung betrifft nur das Element innerhalb dessen sie positioniert ist. Die Bildschirmauflösung ist dabei völlig schnuppe. Es sei denn deine Seite hätte im Body keine fixe Breite, was ohnehin ein fataler Fehler wäre. Denn dann würde dein Shop auf jeder Auflösung grade mal so hingebastelt wie es die Auflösung grade her gibt.

[speedy]

Zu diesem Problem nochmal separat - das hat nix mit deiner Auflösung zu tun, die Positionierung betrifft nur das Element innerhalb dessen sie positioniert ist. Die Bildschirmauflösung ist dabei völlig schnuppe. Es sei denn deine Seite hätte im Body keine fixe Breite, was ohnehin ein fataler Fehler wäre. Denn dann würde dein Shop auf jeder Auflösung grade mal so hingebastelt wie es die Auflösung grade her gibt.

Ich dachte erst, man muss bei

Code: CSS  [Auswählen]

position: absolute; right: 525px;

quasi den Abstand in Pixel vom rechten Bildschirmrand angeben. Der wäre dann je nach Auflösung anders.
Doch da der Shop wie hier das Forum mittig zentriert ist, ist die Breite fix, nur der Rand links und rechts in dem nichts ist varriert je nach Auflösung.

Ich glaub durch mein float:right muss ich quasi umdenken, das position: absolute; right: 525px; zählt dann quasi von links. Aber nicht links Bildschirmrand, sondern links ab Shoprand.

Hab das jetzt so gemacht:

Code: CSS  [Auswählen]

  #box_hersteller {
        background: #DFE3E2;
        color: #000000;
        float: left;
        padding: 6px 0px 5px 0px;
        width: 190px;
  }
  /* Dropdown für Herstellerbox */
  .manuDropdown {
    width: 100%;
  }
  /* Suche */
  #box_suche {
        background: #DFE3E2;
        color: #000000;
        float: left;
        padding: 6px 0px 5px 0px;
        width: 160px;
  }
 

Problem ist jetzt nur noch der Button der Suche ganz rechts am Shoprand, der bricht in die zweite Zeile um.
Mache ich die width von box_suche breiter, dann bricht es nicht mehr in die zweite Zeile um, aber der Button für die Suche verschwindet irgendwo im Rand, weil die box_hersteller nicht nach links rutscht.

[guensi]

Na da haste die ganze Bandbreite der Positionierungsprobleme grade mal gefunden.

Um es auf die Spitze zu treiben - position absolute ist nur insoweit absolut, als es sich auf das Element bezieht innerhalb dessen es platziert wird. Der Bildschirmrand ist nur selten - bis nie der Bezugspunkt. Den Bezugspunkt definierst du ja in dem Element, in welchem dein zu positionierendes Element liegen soll. Dann noch float dazu, da wird es dann richtig lustig.

Du könntest mal folgendes versuchen, statt float left  das float right versuchen und das sowohl bei der Suche als bei der Herstellerbox. Dann ist die Reihenfolge entscheidend, in der das Float aufgerufen wird, für die Platzierung wo was hinkommt. Das zuerst aufgerufene sollte rechts aussen stehen, das danach daneben.

[Tomcraft]

Irgendwie ist CSS auch nicht so ganz mein Freund.
Meist mehr Kampf, als dass ich danach wüsste, wieso es jetzt gerade funktioniert hat. *gg*
Naja, ganz so schlimm ist es ja nicht, gibt ja bekannte Hilfsmittel.

[speedy]

hihi, Torsten - musste grad schmunzeln, ist bei mir auch so.
Nach einigem hin und her klappt´s dann meist irgendwie.

Konnte mein Problem jetzt lösen.
Float: right habe ich aber gelassen, da die Boxen ansonsten die Position tauschen.

Habe die Hersteller-Box und die Suche bei mir in der Breadcrumb Zeile untergebracht und die war nen Tick zu breit, das war alles. Die Hersteller und Suchen Box konnten deshalb nicht weiter nach links, waren "eingequetscht". Der Shop selbst ist ja nur ~980px breit und da war einfach Schicht im Schacht.

Also wenns wer brauchen kann, hier nochmal das CSS:

Code: CSS  [Auswählen]

#navtrail {
        width: 590px;
        padding: 10px 0 9px 0;
        float: left;
        background: #DFE3E2;
        padding-left: 7px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
}
  #box_hersteller {
        background: #DFE3E2;
        color: #000000;
        float: left;
        padding: 6px 0px 5px 0px;
        width: 190px;
  }
  /* Dropdown für Herstellerbox */
  .manuDropdown {
    width: 100%;
  }
  /* Suche */
  #box_suche {
        background: #DFE3E2;
        color: #000000;
        float: left;
        padding: 6px 10px 5px 0px;
        width: 190px;
  }
 

Vielen Dank für die Tipps guensi, hat mich dann in die richtige Richtung geschuppst

[Tomcraft]

Wundert mich übrigens, dass du dafür nicht ein eigenes Thema eröffnet hast?! Hat ja nicht mehr viel zu tun mit dem Ursprungsthema.