Eigene Internetseite veröffentlichen

Du meinst reponsives Layout .bzw

@media (min-width: 700px) {
  #content {
    width: 700px;
  }
}

So kannst du ab bestimmtte Bildschirmgrössen auch das passende css anlegen.

zb hier https://jsfiddle.net/4jo58t7h/17/

Da kannst du schön dran sehen .Wenn man das Browser Fenster grösser oder kleiner machst ändert sich das Layout bzw die position

Hi,

zusätzlich im HTML Code bei den meta Einstellungen folgende Zeile nicht vergessen (wird gerne mal vergessen und ist ziemlich nützlich):

<meta name="viewport" content="width=device-width, initial-scale=1">

ja jenachdem ab welche grösse sich das ändern soll. Die meisten machen zb ab Handy grösse zb 200 pixel ,dann ab Tablet 500 Pixel und so weiter.So ungefär musst du das auch machen.Du kannst den Befehl so oft wie du willst nehmen.Nur drauf achten das die grössen sich nicht überlappen ,sonst könnte die css durcheinander kommt .

Für die bestimmten Bilschirmgröösen gibt es auch Vorlagen .

Dran denken.

@media screen and (max-width: 790px) {
// hier kommt die kommplette css rein für die angegebene grösse
}

@media screen and (max-width: 890px) {
// hier kommt die kommplette css rein für die angegebene grösse
}

// und so weiter

Hoffe du verstehst meine erklärung

Das sind zb Standart Vorgaben die ich so im Netz gefunden habe.

320 Pixel (iPhone Hochformat)
480 Pixel (iPhone Querformat)
768 Pixel (iPad Hochformat)
1024 Pixel (iPad Querformat)
Mit dieser Handvoll Breakpoints würde man nicht besonders weit kommen, schließlich gibt es noch die Displaygrößen oberhalb 1024 Pixel. Um hier ebenfalls für eine vernünftige Darstellung zu sorgen, brauchen wir also noch weitere Größen.

Zusätzlich:

600 Pixel (kleinere Tablets Hochformat)
1200 Pixel (Laptop)
1500 – 1600 Pixel (TV u. sehr große Displays)

Natürlich schreibt jeder was anderes,und es gibt noch grössere Werte als 1600 Pixel.Aber da musst du mal selber kucken was du so machst,

Menemey : Schau dir mal dein Menü an. Du hast ja auch Menüunterpunkte. Nun wenn du auf ein Menüoberpunkt gehst wie z.b. Photograf dann werden die Untermenüs angezeigt. Nun wenn ich versuche diese anzuwählen schließt sich das Untermenü wieder und wie du sehen kannst ist zwischen dem Photograf und Which Camera? eine kleine Lücke. Diese musst du bei allen Menüunterpunkten beheben. Sonst kommt man ja garnicht auf die Menüunterpunkte drauf.

Zitat von Menemey

Hallo Stef,

In die Menüpunkte muss man mit der Maus schneller rein also Versuch mal schneller mit der Maus zu den Menüpunkten zu gehen. Denn wenn man langsam in die Menüpunkte geht, funktioniert es nicht. Also schneller rein gehen Die kleine Lücke kann ich dann auch wegmachen

Das ist ja nicht sinn der sache ,das muss auch langsam gehen .Das sollte man ändern ,weil deine besucher wissen das ja nicht

poste mal dein ganzen Code.So kommen wir nicht weit.Weil ohne Code können wir nur raten. Und eine kurze erklärung wie es aussehen soll,währe natürlich hilfreich

basti1012 : den link hat Menemey in einem vorigen Kommentar doch schon vorgegeben. Da kann man den Code sehr schön erkennen.

Menemey : Du hast meinen Kommentar #23 in den Code kopiert. Das ist erst mal die Basis dafür, das Deine Seite überhaupt responsiv reagieren kann. Wenn ich das richtig sehe reagiert der Bildschirm Deiner HP auch responsiv. Schließlich hast Du center tag vorgegeben - also macht er das auch. Aber jetzt solltest Du die Kommentare von Bast #22 beachten und den Code als Rahmen eingeben! Natürlich nach Deinem Gusto. Das musst Du dann schon selbst machen.

Ich bin mir auch nicht klar über Deinen CSS Code. Die "Steuerung" ist bei Dir im html auch nicht als Steuerung so erkennbar (oder meinst Du damit den #Control? - dann verwende doch gleich den nav tag.

Schau doch mal in Axels:

https://www.html-seminar.de/css-layout-generator.htm

Vielleicht erleichtert Dir das ein wenig das Leben.

Just my 5 cents

Zitat von Menemey

Hallo,

ich habe, wie oben gezeigt, versucht, die Internetseite mit dem Code von oben für kleinere Bildschirme zu verkleinern aber es hat nicht funktioniert. Die Menüleiste und die Überschrift verschieben sich die ganze Zeit.

Also komischer weisse kann ichin der css und html nix vom @media sehen.Hast du den wieder raus genommen oder wie ? Egal ,ichversuchedir mal ein Beispiel zu machen

Hier habe mal beispiel gemacht . Könnte besser sein ,aber man sieht da eigentlich wie es funktioniert

https://jsfiddle.net/basti1012/e7s8ur30/2/

Nicht vergessen,Browser Fenster gross und klein machen um den Effekt zu sehen.

Gerade in den kleinen Fiddle Fenster.

Deswegen kann man es hier besser sehen

https://jsfiddle.net/basti1012/e7s8ur30/3/show/

Zitat von Menemey

Ich sah, dass man in JavaScript auch was schreiben soll. Ist das richtig?

Nee das ist eine reine Css sache . Der Javascript teil hat damit nix zu tun den habe ich vergessen zu löschen . SORRY