Responsive-Design im Opera und Chrome fehlerhast!!

[Raphale]

Responsive-Design im Opera und Chrome fehlerhaft!!

Hi liebe Pixelstupsterfreunde !!

Ich habe folgendes Problem bei meinem Layout:

Wenn man meine Seite ()
kleiner Zieht passt sie sich an (media querries)!.Nun gibts aber ein Problem mit Chrome und Opera, wenn man die Auflösung für Tabletts (min-width: 768px) and (max-width: 959px) benutzt rutscht der Profishop Listeneintrag unter das suchfeld!! Kann mir da einer weiterhelfen??

sonst hatte ich nie Probleme mit Opera oder Chrome sondern nur den gehassten IE :lol: apropo !! Arbeitet ihr mit Html5? und gibts bei euch auch immer wieder padding- und positionierungsprobleme??? Wie Gelöst??

Hoffe ihr könnt mir helfen ! helfe auch gern zurück

MFG

Raphaele
(im 2 Monat Ausbildung zum Mediengestalter Digital und Print)

 

[Myhar]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Das Problem hast du doch in allen Browsern?
Die Ursache liegt einerseits am absolut positionierten Suchfeld, andererseits daran, dass es keinen Platz gibt, die Listen und Navigationspunkte nebeneinander anzuzeigen.
Wie soll es denn deinen Wünschen nach aussehen? Du wirst hier die Positionierung der Elemente anpassen müssen.

 

[marcmeierhof]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Da die Navigation dort etwas zu breit ist, müsste sie sich bei der Auflösung schon verändern. Ich hätte spontan an:

#mocon_li {
margin-right: 200px;
}

gedacht. (War aber nur ein Gedanke)
Sicher wäre das positionieren des Suchfeldes über der Navi in dem falle die optisch-ansprechendere Lösung.

 

[Raphale]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Hee danke für die schnellen Antworten!!

tatsache ist das Problem auch in den anderen Browsern !^^
Irgendwie zeigt er mir auf der Arbeit das immer anders an!!!! und ich habe KP warum, vl eine Idee ?? kann doch nicht an der Version des Browsers liegen oder??(die ist nämlich nicht unbedingt aktuell)

Zu Myhar:
Eigentlich sollte die Schrift und Abstand der Listenpunkte, in der Navigation verkleinert werden.. = wieder Platzgewinn bei kleinerer Auflösung. Somit sollte es doch eigentlich wieder passen, wie in den anderen Auflösungen auch (in einer reihe). Aber danke hatte nicht an die absolute positionierung gedacht ^^!

Zu marcmeierhof:

beim margin-right würde es doch die anderen Einträge der Liste verschieben oder nicht?! sollte schon immer gleiche Abstände haben und gleich aussehen wie in den anderen Auflösungen!
Aber das Suchfeld über die Navi zu packen ist ne gute Idee! muss ich mal umsetzen&angucken und Cheffe präsentieren ^^

vielen lieben Dank & freundlichst grüßt Raphaele!!!

PS:
Wie findet ihr die Seite eigentlich (wie kommt sie an bei euch) ??
bin leider erst seit 2monaten in der Ausbildung und an Html und Css lernen...habe eingewilligt unter der bedingung autodidaktisch zu Arbeiten !!^^ sogesehen habe ich jetzt nen geiles Büro&Pc und keinen der sich mit Html und Css auskennt hehe !!

 

[Raphale]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Hier war ich schon weiter mit der Seite:
aber da habe ich noch mit Webocton (editor) gearbeitet und der meinte einfach mal so meine css zu löschen !!!! seitdem hatte ich kein bock mehr auf das Template, da der Code so scheiße Strukturiert war nachdem ich ihn wieder überholt hatte.^^

Die neue responsive Site ist auch erst 4 Tage alt deswegen noch langeee nicht fertig^^! (nassmagnet.de/~seibtert/)
Und ich arbeite komplett alleine !!!

In Hoffnung auf Feedback

MFG
euer Raphaele

 

[Myhar]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Zu Myhar:
Eigentlich sollte die Schrift und Abstand der Listenpunkte, in der Navigation verkleinert werden.. = wieder Platzgewinn bei kleinerer Auflösung. Somit sollte es doch eigentlich wieder passen, wie in den anderen Auflösungen auch (in einer reihe). Aber danke hatte nicht an die absolute positionierung gedacht ^^!

Das bringt mich zu der Frage: Hast du schon einmal selber ein Tablet/Smartphone verwendet? Ich frage deshalb, weil du ja sagst, dass die kleine Auflösung primär dafür gedacht ist. Auch, wenn das für responsive Design egal ist, es muss einfach passen
Und wenn du die Navi etc. verkleinerst, wie soll ich sie dann noch mit meinen Fingern erwischen? Deshalb macht man die Klickflächen nie zu klein. Das empfiehlt sich auch für größere Auflösungen, schließlich sind Benutzer faule Menschen und wollen keine Zielübungen mit der Maus machen. Dafür gibt es Ego Shooter

 

[Raphale]

AW: Responsive-Design im Opera und Chrome fehlerhast!!

Das bringt mich zu der Frage: Hast du schon einmal selber ein Tablet/Smartphone verwendet? Ich frage deshalb, weil du ja sagst, dass die kleine Auflösung primär dafür gedacht ist. Auch, wenn das für responsive Design egal ist, es muss einfach passen
Und wenn du die Navi etc. verkleinerst, wie soll ich sie dann noch mit meinen Fingern erwischen? Deshalb macht man die Klickflächen nie zu klein. Das empfiehlt sich auch für größere Auflösungen, schließlich sind Benutzer faule Menschen und wollen keine Zielübungen mit der Maus machen. Dafür gibt es Ego Shooter

Nein die Schrift hatte ich dort um 2 Pixelverkleinert(navigationspunkte + padding und breite des Such-input-feldes!! Es ist dann nicht zu klein zum antippen sondern passt sich dem Gerät an (in dem fall dann Tabletts !!!!!max-width:960px)!! ) was nicht zu klein wäre, sonder das Layout optimal für Tablett angepasst. Der a tag zum anklciken wäre doch gleich groß geblieben!.

Aber das Problem habe ich anders gelöst in dem ich aus Profishop Maschienenbau + Logo / Logo+Shop Maschienenbau gemacht habe !