Die Webseite wird aufgrund falscher CSS falsch in verschiedenen Auflösungen angezeigt
Ich habe einige Probleme mit einer meiner Webseiten, hauptsächlich auf mobilen Geräten, aber es betrifft auch Desktop-Geräte, Ich wäre bereit, ein Kopfgeld (wie und wann stackoverflow mir erlaubt) an wen auch immer zu vergeben mit diesen Problemen
Ich lerne immer noch css, html, php ... etc, also bitte bare mit mir, wenn ich irgendwelche Fehler in meinem Code gemacht habe, aber bitte fühlen Sie sich frei, mir bessere / andere Wege zu geben, Dinge wie jedes kleine zu tun ein bisschen Hilfe wird mir sicher ein oder zwei Dinge beibringen:)
HTML: Ссылка
CSS: Ссылка
JSFiddle: Ссылка
-
Problem 1 - Linke / rechte Bildlaufschaltflächen
- Momentan sind meine linken und rechten Bildlaufschaltflächen in HTML mit
onmouseoverundonmouseoutgemacht. Ich möchte sie in css-basierte "Buttons" konvertieren können
- Momentan sind meine linken und rechten Bildlaufschaltflächen in HTML mit
-
Problem 2 - Dynamische Auflösung (en)
- Die Kopf- und Fußzeilen sind nicht dynamisch mit unterschiedlichen Auflösungen. Ich habe beispielsweise die Seite erstellt, die auf einem 1680x1050-Monitor entworfen wurde und wie folgt aussieht: Desktop 1680x1050 verkleinert jedoch das Fenster: Desktop Small Window
- Bei einem Nexus 4-Mobiltelefon mit Standardzoom sieht es aus wie folgt: Mobiler Originalzoom
- Auf einem Nexus 4-Mobiltelefon, das so weit wie möglich ausgezoomt wurde, sieht es so aus: Mobile Max Distance
- Auf einem Nexus 4 wird herausgezoomt und nach unten gescrollt (so dass die URL-Leiste des Browsers verschwindet). Es sieht folgendermaßen aus: Ohne herausgezoomt URL-Leiste (die Fußzeile der eigentlichen Webseite verschwindet)
- Bei einem Nexus 4, das herausgezoomt wurde und nur von unten scrollt (so dass die URL-Leiste des Browsers sichtbar ist), sieht es so aus: Mit der URL-Leiste herausgezoomt (die Fußzeile wird zurückgegeben) .
- Das Platzhalterbild und die Pfeile sollten sich in der Mitte der Fußzeile und der Kopfzeilen befinden und entsprechend der Bildschirmauflösung verkleinert werden.
- Der Standard-Zoom für mobile Geräte (wenn möglich) muss verringert werden, damit sie mehr sehen und kleiner werden (falls möglich), wenn sie Mobile Original Zoom sollten die
Up to Top,Down to Key, Platzhalterlogos verschwinden ... - Bitte sehen Sie sich die Bilder unten in diesem Beitrag an
Für die mobilen Geräte habe ich unten nur Tests versucht, aber keine funktionierte ...
%Vor%BEARBEITEN 14/11/2013 @ 01: 58GMT
Auf einem 1920x1080-Bildschirm sieht es in Ordnung aus, obwohl es eine große Lücke zwischen dem Text und dem Platzhalterbild gibt, wie unten zu sehen ist:
Auf einem 1680x1050 Bildschirm sieht es ungefähr aus, wie es sich merken soll wo "Semi" sich befindet und vergleicht es mit dem 1920x1080 Bild von oben.
Auf einem 600x600-Bildschirm sieht es wie folgt aus: Es gibt eine große Lücke zwischen dem Platzhalter und dem linken Pfeil, aber auf dem rechten Pfeil gibt es keine Lücke und tatsächlich ist es überlaufen, wie auch für den Text zu weit nach rechts.
5 Antworten
Okay, ich habe versucht, den ganzen irrelevanten Code für diese Lösung herauszufiltern.
Siehe die Lösung hier .
In den meisten Fällen empfiehlt es sich, die relative Positionierung zu verwenden, um Elemente absolut innerhalb eines anderen Elements anzuordnen. In deinem Fall, mit drei verschiedenen Strings, die in ein 300x80-Fenster passen, ist es ein bisschen überfüllt. Ich habe versucht, die Dinge in eine logische Position zu bringen, um sie zu demonstrieren.
Indem Sie einen Container in das footimage div mit der relativen Position platzieren, können Sie jedes Element innerhalb des footimage divs absolut relativ auf das footimage div setzen und nicht auf die gesamte Seite.
Zum Beispiel, was Sie hatten:
%Vor% Platziert das div der Klasse footmid an einer Position 50% der Seitenhöhe vom oberen Seitenrand und 50% der Seitenbreite von der linken Seite:
Dies funktioniert, wenn jeder Benutzer, der Ihre Seite besucht, dieselbe Auflösung hat, jedoch Probleme verursacht, wenn dies nicht der Fall ist. Offensichtlich ist dies keine perfekte Welt, daher werden verschiedene Auflösungen Ihre Seite besuchen.
Was Sie tun können, ist die relative Positionierung!
Im Grunde sage ich CSS, dass 50% vom oberen und linken Rand des Fensters verschoben werden sollen, indem man 50% von oben und links vom nächsten Elternelement mit der relativen Positionierung bewegt:
Sie können die Attribute bottom , left und right von meiner Geige ändern, um die% -Position zu verschieben. co_de% Elemente innerhalb des relativen Elements footmid , das die gleiche Größe und die gleiche Position wie .footimageContainer hat.
Denken Sie daran, dass Sie, wenn Sie Pseudo-Elemente verwenden, das Attribut angeben müssen, das sich sowohl in den nativen als auch in den: hover-Regeln ändert.
%Vor%Wenn Sie weitere Fragen zu den Pfeilen haben, lassen Sie es mich wissen und ich werde meine Antwort überarbeiten.
Geben Sie
ein %Vor%und vergiss nicht,
hinzuzufügen %Vor%Hoffe das hilft :-)
Ich sehe einen Rahmen um Ihre Links, entfernen Sie von Ihren Links:
%Vor% für die erste Ausgabe kannst du es mit CSS machen, entferne einfach <img> tag in <a> tag wie folgt:
Erstellen Sie Bild Schaltflächen wie folgt:
Setzen Sie den Hintergrund auf <a> tag wie folgt:
zweites Problem, ich denke, wenn Sie position:absolute; von #header .headimage und #footer .footimage entfernen, wird es in Ordnung sein.
und wenn Sie headmid und footmid und footmidtwo zentrieren möchten, haben Sie zwei Möglichkeiten,
Zuerst: setze feste Breite auf sie und benutze CSS wie folgt:
%Vor%Zweitens: Wenn Sie eine dynamische Breite benötigen, können Sie dieses CSS und JQuery verwenden:
CSS:
%Vor%JQuery:
%Vor%Anstatt die absolute Positionierung zu verwenden, können Sie einfach das Text-Align Center verwenden und Bilder und Text werden automatisch zentriert.
Wenn Sie einen Offset von der Mitte wünschen, versuchen Sie die Position: relativ, und oben, links, rechts usw. und er bewegt sich relativ zu seiner zentralen Position.
Elemente, die angezeigt werden: Inline; oder Anzeige: Inline-Block; wird gemäß der text-align-Eigenschaft der Eltern ausgerichtet, in diesem Fall text-align: center.
%Vor%Wie in Punkt 2 beschrieben, könnte ich mich irren, aber wenn ich das Bild durch die Struktur der Seite targetiere d. h.
%Vor%Der Stil würde nicht funktionieren. Aber wenn Sie Klassen zu den Bildern hinzufügen, wird der Stil funktionieren; der Fall könnte sein, dass es einige nicht abgeschlossene divs oder Elemente gibt, die mit der Architektur unordentlich sind.
%Vor%JsFiddle hier - Ссылка
Tags und Links javascript html jquery css css3