• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Elementy na stronie się rozjeżdzają

Object Storage Arubacloud
+1 głos
675 wizyt
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

+3 głosów
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!
0 głosów
odpowiedź 25 grudnia 2020 przez VBService Ekspert (254,490 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 @charsetviewport meta tag

Podobne pytania

0 głosów
2 odpowiedzi 1,850 wizyt
0 głosów
2 odpowiedzi 676 wizyt
0 głosów
1 odpowiedź 168 wizyt
pytanie zadane 11 marca 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

92,654 zapytań

141,543 odpowiedzi

319,954 komentarzy

62,022 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...