Webseite an "kleinere" B ildschirme anpassen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

Es gibt Neuigkeiten! Ab sofort könnt ihr dem Donators Club auf Lebenszeit beitreten.
Weitere Infos im Thema Donator's Club ab heute wieder verfügbar!

  • Webseite an "kleinere" B ildschirme anpassen

    Hallo community,

    ich hab schon etweas an meiner Webseite rumgefummelt... ich hab sie auch mal hochgeladen unter: wiedemann.000webhostapp.com/
    undzwar, sobald ein kleinerer Bildschirm oder man mit dem Handy auf die Seite geht, dann verschieben sich die Buttons? was muss ich machen um dies richtig anzupassen?

    Das ist mein CSS code


    Quellcode

    1. body {
    2. padding:0;
    3. margin:0;
    4. background:white;
    5. height: 100%;
    6. }
    7. header {
    8. padding:0;
    9. margin:0 auto;
    10. width: 100%;
    11. height: 300px;
    12. background-image: url("bilder/header.png");
    13. background-repeat: no-repeat;
    14. }
    15. header ul {
    16. float:right;
    17. margin-right: 150px;
    18. margin:0;
    19. padding:0;
    20. }
    21. header li {
    22. list-style:none;
    23. display:inline-block;
    24. background:#ABC712;
    25. transition: all 800ms;
    26. padding:5px;
    27. }
    28. header ul li:hover{
    29. background:white;
    30. color:#ABC712;
    31. text-shadow: white;
    32. }
    33. .menubar {
    34. margin: 0 auto;
    35. margin-top:-60px;
    36. margin-right:150px;
    37. width: auto;
    38. height: 30px;
    39. padding: 10px;
    40. float:right;
    41. color:white;
    42. font-family:Verdana;
    43. font-size:18pt;
    44. }
    45. a {
    46. transition: all 500ms;
    47. text-decoration: none;
    48. color:white;
    49. }
    50. a:hover{
    51. color:#ABC712;
    52. }
    53. .top{
    54. margin: 0 auto;
    55. width:40%;
    56. left: 30%;
    57. top:20%;
    58. background:#ABC712;
    59. }
    60. .logo {
    61. position: relative;
    62. width: 198px;
    63. height: 85px;
    64. top: 15px;
    65. left: 50px;
    66. /*border: 1px solid red;*/
    67. }
    68. .logo:hover{
    69. opacity: 0.7;
    70. transition: all 300ms;
    71. }
    72. .menu {
    73. width: 70%;
    74. height: 115px;
    75. margin-left: auto;
    76. margin-right: auto;
    77. margin-top: 50px;
    78. background:#ABC712;
    79. /*border: 1px solid red;*/
    80. }
    81. .text1{
    82. margin: 0 auto;
    83. background:#ABC712;
    84. font-family:Verdana;
    85. top:1%;
    86. padding: 3px;
    87. }
    Alles anzeigen
    MfG

    Moritz
    BESUCHT MICH UNTER WWW.COUNTY-ISLANDS.COM
  • Wie Maximilian sagt kannst du das über Media Querys machen. Ich würde dir aber ans Herz legen dich mal die ein oder andere Stunde hinzusetzen und dich mal mit der Thematik Framework auseinander zu setzen. Ein gutes und weit verbreitetes ist z.B. Bootstrap Das erleichtert sehr viel. Du musst zwar trozdem noch anpassungen machen aber es Hilft sehr

    Suche Scripter für gemeinsames Reallife Script

  • Xazor schrieb:

    Hör auf mit dem Mist mit Bootstrap.

    Am besten immer ein eigenes erstelllen..
    Also die Aussage ist ja mal mehr als Panne.
    Es gibt keinen vernünftigen Grund beim Gestalten einer HTML-Seite auf Bibliotheken wie Bootstrap, Foundation oder MaterializeCSS
    zu verzichten. Die nehmen dir alle nur absolut unnötige Artbeit ab. Wenn man die grundsätzliche Struktur der Bibliothek einmal verstanden hat
    geht das Ganze wesentlich flotter von der Hand, als wenn man das ganze versucht selbst mit Media-Querys umzusetzen und sollte dir die
    Gestaltung von Bootstrap, etc. nicht gefallen hält dich auch keiner davon ab, das Ganze auch noch nachträglich anzupassen (Gibt ja nicht umsonst genug Templates, die das Design von Grund auf neu gestalten).
    Der einzige Grund, der mir gerade einfällt sich dagegen zu entscheiden der mir aktuell einfällt wären die im Stylesheet vorhandenen Komponenten, die man möglicherweise gar nicht nutzt.
    Aber die paar ms, die das Laden des Stylesheets da länger dauern, sind heutzutage n Witz.
    Mit freundlichen Grüßen

    Headscracher | Tobi :thumbsup:
  • Xazor schrieb:

    Hör auf mit dem Mist mit Bootstrap.

    Am besten immer ein eigenes erstelllen..
    Wenn du hier schon so ne große F*********** hast dann zeig uns doch mal deins, oder bist du so ein
    lellek der hier rum eiert ?


    Headscracher schrieb:

    Der einzige Grund, der mir gerade einfällt sich dagegen zu entscheiden der mir aktuell einfällt wären die im Stylesheet vorhandenen Komponenten, die man möglicherweise gar nicht nutzt.
    Dafür gibt es auch ne Lösung. Persönliche verwende ich bei Bootstrap 4 nur das Grid System ohne Styling, da ich dies auch lieber mir selber erstelle als Überschreibe, macht jedoch auch nur sinn wenn du dich gegen Konkurrenz schlagen musst bei Google (Pagespeed etc.). Jedoch sollte man auch hier AMP benutzen für ein noch besseres Ranking.

    BTT:
    Mit Bootstrap wirst du deine Arbeit deutlich verschnellern, bei guter Strukturführung hast du kaum nach Arbeit für deine Mobile Ansicht, lediglich paar Schriftgrößen, Bildergrößen und eventuell Abständen.

    Falls du nicht viel Erfahrung hast würde ich dir Bootstrap 3.3.7 empfehlen damit du mit dem Grid etwas klar kommst, jedoch kannst du sofort zu Bootstrap 4 greifen, dort wird Flex verwendet, was neuer und Moderner ist, vor allem für Responsive. Im Grunde ist es jedoch egal ob du 3.3.7 nimmst oder 4.0
    RIP Fancy
    ___________________________

    Marshmellow schrieb:

    Gut zu wissen, dass ich 'n Spast bin

  • Je nach dem, mit was du jetzt angefangen hast solltest du das jetzt auch anders angehen.
    Wenn du jetzt mit den media queries angefangen hast kannst du grundsätzlich mal mit einfachen CSS Mitteln und am besten deinem
    Browser devtool einfach mal ein wenig testen, wie die Seite auf die unterschiedlichen Größen reagiert und kannst dann mal ausprobieren, wie
    du das ganze mit CSS wieder ausbessern kannst. Alles wichtige dazu lässt sich eigentlich auf selfhtml.

    Was das lernen von einem CSS Framework angeht wird es da schon schwieriger, da ich persönlich, wenn ich mich in was neues einarbeite
    mit Schriftlichem besser klar komme. Wie das Angebot auf Youtube aussieht kann ich nicht sagen, aber hier ist mal ein Einsteigertutorial,
    mit Youtube-Video und Notizen, was recht aktuell ist und erstmal ganz gut aussah - lernprogrammieren.de
    Solltest du dich damit etwas mehr beschäftigen wollen, kann ich dir allerdings auch nur empfehlen, dir ein E-Book oder gleich ein richtiges aktuelles
    Buch zu holen. Damit habe ich zumindest ziemlich positive Erfahrungen gemacht. Du solltest halt immer darauf achten, dass das Material aktuell ist.
    Im Fall von Bootstrap bietet es sich an, gleich nach Bootstrap 4 zu suchen.
    Mit freundlichen Grüßen

    Headscracher | Tobi :thumbsup:
  • Xazor schrieb:

    Hör auf mit dem Mist mit Bootstrap.

    Am besten immer ein eigenes erstelllen..
    Da hast du vollkommen recht Warum auf mehrere schlaue Menschen setzen die es sich zur aufgabe gemacht haben ein Framework zu entwickeln. Welches über Jahre hinweg verbessert und perfektioniert wurde.

    Da einfach mal was schnelles hinklatschen ist natürlich die bessere variante

    M_McGarrett schrieb:

    Ich hab mich damit jetzt etwas befasst... aber ich blick da kein meter durch.. hab mir ein yt video angeschaut, hab dann erst bemerkt das das 4 Jahre her ist....
    ICh komme damit irgendwie nicht ganz klar
    Ich kann dir morgen mal etwas helfen wenn du willst ich schick dir mal ne PN

    Suche Scripter für gemeinsames Reallife Script


  • Maximilian schrieb:

    Xazor schrieb:

    Hör auf mit dem Mist mit Bootstrap.

    Am besten immer ein eigenes erstelllen..
    Prinzipiell habe ich nichts gegen deine Aussage einzuwenden allerdings:Ist es evtl. für ihn die einfachste Arbeitsweise (auch wenn es ein komplexes Framework ist)
    Bootstrap ist auf jeden Fall kein Mist, vollkommen unnötig diese Aussage. Neben den Media Querys, die bereits genannt wurden, solltest du dich mal über ein Grid-Layout schlau machen.