Elementy na stronie się rozjeżdzają

pytanie zadane 24 grudnia 2020 w HTML i CSS przez Szyszka Gaduła (3,490 p.)

Witam. Niedawno zachciało mi się zrobić stronkę do pisania w grupach. Frontendu za dużo się nie uczyłem, i teraz są widoczne tego efekty. Przy zmianie rozdzielczości na stronie swoją pozycje zmieniają wszelkie elementy. Dlaczego? Oto kod cshtml:

@model object
<!DOCTYPE HTML>
<html lang="pl">
<head>
    <title>ChatApp</title>
    <link href="~/css/Home.css" rel="stylesheet" media="all" />
</head>
<body>
    <script>
        var user = "@User.Identity.Name";
    </script>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/signalr/dist/browser/signalr.min.js"></script>
    <script src="~/js/Home.js"></script>
    <div id="groups">
        <ul id="groupList">
        </ul>
    </div>
    <div id="chat">
    </div>
    <div id="footer">
        Coś tam
    </div>
    <div id="writingMsg">
        <input type="text" placeholder="Wiadomość..." id="messageText" />
    </div>
</body>
</html>

A o to css:

body {
    margin: 0px;
    background-color: #383838;
}

div::-webkit-scrollbar {
    background-color: #bababa;
    width: 10px;
}

div::-webkit-scrollbar-thumb {
    background-color: #484a48;
    border: 1px solid #f5b11d;
}

#groups {
    color: white;
    width: 18vw;
    height: 95vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 2px solid #ad3b0a;
    border-top: 2px solid #ad3b0a;
    background-color: #262626;
    float: left;
}

#footer {
    color: white;
    width: 18vw;
    height: 5vh;
    border-right: 2px solid #ad3b0a;
    border-top: 2px solid #ad3b0a;
    background-color: #262626;
    text-align: center;
    font-size: 20px;
    float: left;
}

#groupList {
    list-style-type: none;
}

ul > li {
    padding: 10px;
}

#chat {
    background-color: #36393f;
    height: 95vh;
    width: 81vw;
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-top: 2px;
}

#writingMsg {
    background-color: #666666;
    height: 5vh;
    width: 81vw;
    float: left;
    border-top: 2px solid #ad3b0a;
}

Dzięki z góry!

2 odpowiedzi

odpowiedź 24 grudnia 2020 przez xnerwo Gaduła (3,270 p.)
wybrane 24 grudnia 2020 przez Szyszka

Najlepsza

Cześć,

może spróbuj użyć Flexbox lub Grid w CSS i ułóż sobie fajnie ładnie :)

Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

komentarz 24 grudnia 2020 przez Szyszka Gaduła (3,490 p.)

O, dzięki wielkie!

odpowiedź 25 grudnia 2020 przez VBService Ekspert (253,340 p.)
edycja 25 grudnia 2020 przez VBService

Może nie do końca w "temacie", ale dobrze żebyś umieścił w sekcji <head>

Meta charset UTF8 – polskie znaki

<meta charset="utf-8">

oraz Meta-tag viewport – kiedy i jak używać? np.:

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

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Elementy na stronie się rozjeżdzają - Forum Pasja Informatyki</title>
    <meta name="description" content="...">
    <meta name="keywords" content="...">

    . . .

    <link rel="stylesheet" href="... .css">
    <script src="... .js"></script>									
    <style>

      . . .

    </style>
  </head>
  <body>

    . . .

  </body>
</html>

zobacz też: css @media [ 1 ] [ 2 ] [ 3 ] , css @charset, viewport meta tag