Hallo, ich habe bei meiner Website die beiden folgenden Probleme. Also erstmal bin ich noch Anfänger und gerade dabei meine Website ordentlich aufzubauen und zu strukturieren, also bitte keine bösen Wörter, falls die Antworten zu offensichtlich sind :)Wenn ich das Window kleiner mache verschiebt sich alles usw. und sieht nicht mehr schön aus, da die Seite ja auf meiner Bildschrimgröße angepasst ist. Gibt es eine Möglichkeit, dass die Seite immer perfekt für die dementsprechende Monitor Größe geeignet ist, ohne das sich beim vergrößern oder verkleinern alles verschiebt?Das zweite Problem basiert auf dem ersten. Wenn ich das ganze dann auf dem Handy öffnen möchte, ist wirklich alles verschoben... Gibt es da etwas was ich machen kann? Ich weiß das man mit @media screen{} einstellen kann, dass z.B. ein Bild ab einer bestimmten Pixel-Anzahl größer bzw. kleiner werden soll... Jedoch weiß ich ja nicht die Pixelgrößen von jedem Handy? Gibt es da eine einfachere alternative?Hoffe mir kann da jemand helfen, ansonsten auch gerne per Privat NachrichtDanke im Voraus Fabian

Responsive Design, das ist dein Problem. Einmal bei Google eingeben. Andere für dich relevante Stichpunkte sind Größen in Prozent statt Pixel, Flex und Grid in CSS.Beim responsive Design geht es in erster Linie nicht um feste Pixel Angaben. Die kannst du gleich wieder vergessen. Media solltest du auch nur benutzen, wenn du die wirklich brauchst, aber nicht, damit es Pixel genau passt - Siehe Punkt 1.

html seite soll auf eine größe bleiben?

Hallo,

ich habe bei meiner Website die beiden folgenden Probleme.

Also erstmal bin ich noch Anfänger und gerade dabei meine Website ordentlich aufzubauen und zu strukturieren, also bitte keine bösen Wörter, falls die Antworten zu offensichtlich sind :)

Wenn ich das Window kleiner mache verschiebt sich alles usw. und sieht nicht mehr schön aus, da die Seite ja auf meiner Bildschrimgröße angepasst ist. Gibt es eine Möglichkeit, dass die Seite immer perfekt für die dementsprechende Monitor Größe geeignet ist, ohne das sich beim vergrößern oder verkleinern alles verschiebt?
Das zweite Problem basiert auf dem ersten. Wenn ich das ganze dann auf dem Handy öffnen möchte, ist wirklich alles verschoben... Gibt es da etwas was ich machen kann? Ich weiß das man mit @media screen{} einstellen kann, dass z.B. ein Bild ab einer bestimmten Pixel-Anzahl größer bzw. kleiner werden soll... Jedoch weiß ich ja nicht die Pixelgrößen von jedem Handy? Gibt es da eine einfachere alternative?

Hoffe mir kann da jemand helfen, ansonsten auch gerne per Privat Nachricht

Danke im Voraus

Fabian

3 Antworten

NackterGerd

08.11.2022, 09:52

1. natürlich mit Responsable Design arbeiten.

Ohne Verschiebung geht aber nicht.

PC hat normalerweise z.b. Querformat und Handy Hochformat.

D.h. man schiebt Elemente deshalb absichtlich rum. Ansonsten wäre alles zu klein

Aber auch wichtig den Viewport einzustellen

2. POSITIONEN und GRÖßE in Pixel ist natürlich wenig sinnvoll.

Bilder z.b. Besser in % angeben.

Z.b. width: 33%

Damit wird das Bild immer 1/3 der Bildschirmbreite haben und muss nicht für jede Bildschirmgröße extra eingestellt werden

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Programmieren & Softwareentwicklung

27.09.2022, 07:15

Responsive Design, das ist dein Problem. Einmal bei Google eingeben. Andere für dich relevante Stichpunkte sind Größen in Prozent statt Pixel, Flex und Grid in CSS.
Beim responsive Design geht es in erster Linie nicht um feste Pixel Angaben. Die kannst du gleich wieder vergessen. Media solltest du auch nur benutzen, wenn du die wirklich brauchst, aber nicht, damit es Pixel genau passt - Siehe Punkt 1.

VOIDON

27.09.2022, 15:18

Kann ich ebenfalls so unterschreiben 👍

FaTech

27.09.2022, 15:20

@VOIDON

_________________ , ________________________________________

Ort, Datum Unterschrift

VOIDON

27.09.2022, 15:33

@FaTech

Metaversum, 34.22.4057, ||||||| ||| ||| |||||| |||||||

VOIDON

27.09.2022, 15:34

@FaTech

Du meinst wohl Barcodes, Unterschriften kenne ich nicht

NackterGerd

27.09.2022, 03:07

Kann das Sein dass du kein Grid verwendest?

Mit Grid legst du genau fest wo was angezeigt wird und beim Kleineren Display gezielt verschoben wird.

Z.b. ein Layout mit 4 Spalten passt gut auf PC

Beim Tablet macht man dann nur 2 Spalten und beim Handy eben nur 1 Spalte.

Nichts sieht komisch aus und verschiebt sich automatisch irgendwo hin wie bei Flex z.b.

Siehe:

https://www.w3schools.com/css/css_grid.asp

Oder

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung

xFabianoxD

Fragesteller

27.09.2022, 03:09

Perfekt danke, ne tatsächlich noch nie was davon gehört…. werd ich mir mal anschauen danke! 👍🏻

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zur Frage

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

...zur Frage

Geld für Website?

Ich mache grade eine Website für den Laden von im, ich wollte jetzt wissen ob es gut rüber kommt wenn ich frage ob ich vielleicht dafür bezahlt werde?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Wie mache ich mein Figma Prototyp zu einer echten funktionierenden Webseite ohne Programmierkenntnisse?

Ich wollte gerne eine Webseite machen. Ich kenne mich mit Figma und Adobe Programmen gut aus und möchte sie selbst gestalten ohne „irgendeinige Vorlage webseite builders“ zu verwenden. Wie kann ich dies machen ohne Programmierkenntnisse zu haben? Ich möchte eine Art Portfolio Webseite machen mit einem Kontaktformular?

Nachdem ich meinen Klickdummy in Figma gemacht habe, was die echte Webseite sehr nah kommt, welche sind die nächsten Schritte?

Wie kann ich das Kontaktformular zu richtigen Eingabefeldern machen, die auch zu mir abgeschickt werden können?

Und wo sollte ich mir eine Domain kaufen? Was gibt es da zu berücksichtigen?

Gibt es irgendwie ein Programm oder Plugin, das ich verwenden kann, ohne etwas programmieren zu müssen. Wenn nicht, welche Programmiersprache könnte ich schnell lernen und dies da umsetzen?

...zur Frage

CSS, mehrere Transitions?

Hallo, wie kann ich, wenn ich einen Button habe, auf dem ich die Opacity in der Pseudoklasse Hover in einer Transition von 2ms ändern möchte, die Opacity von der Pseudoklasse Active in einer anderen Transitionzeit ändern? Wenn ich transition: opacity 2ms schreibe, wird das sowohl für hover als auch active angewendet, aber ich möchte jeweils unterschiedliche Transitionzeiten haben. Also auf active z.B. 1ms. Ich kann die Transition auch nicht in die jeweilige Pseudoklasse schreiben, da die Transition aufhört, sobald man beispielsweise vom Button runterhovert.

...zur Frage

Webdesign Kaltakquise?

Wie macht man am besten Kaktakquise als Webdesigner. Habt ihr Tipps für mich und ist E-Mailakquise auch effektiv oder nur per Telefon

...zur Frage

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...zur Frage

Termine buchen in Elementor?

Hallo,

ich möchte gerne über meine Seite ein Termin Buchungsformular laufen haben, das aussieht wie auf dem Bild. Mit Plugins hatte ich bis jetzt noch nicht die Möglichkeiten, die ich gerne hätte.

Der Funnel sollte einfach nur aus dem Kalender für den Wunschtermin und einem zweiten Schritt für die Datenübermittlung (Name, Email, Telefonnummer) bestehen. Hat da jemand einen hilfreichen Tipp? Oder könnte ich das sogar selbst bauen mit Elementor?

Danke!!!!

...zur Frage

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zur Frage

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zur Frage

Mit JavaScript Alter ausrechnen?

Ist es möglich über JavaScript, wenn man das Geburstsdatum eintippt, dass das Alter ausgerechnet wird?

Es soll dann neben stehen: 41 Jahre und 100 Tage

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen