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

CSS mały problem ze scrollbarem

VPS Starter Arubacloud
0 głosów
86 wizyt
pytanie zadane 31 stycznia 2018 w HTML i CSS przez TheFunny Gaduła (3,420 p.)

Witam,

piszę na próbę wstępną wersje strony. Zależy mi, aby budziła ona skojarzenia z oknem w Windows95. 

Chcę też dodać własny scrollbar, jednak mam z nim mały problem. Nie wiem jak dodać go do dokumentu tak, aby działał jak chcę :). Na razie udało mi się umieścić go na swoim miejscu (tj. pod górną belką), jednak nie można za jego pomocą przewijać strony.

Z góry dziękuję za pomoc

 

HTML

<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=VT323&amp;subset=latin-ext" rel="stylesheet">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lab.</title>
</head>
<body>
    <div class="bottom-border">
        <p>C:\Laboratorium_Informatyczne_ZSE-E_Radomsko\lab.exe</p>
        <div class="buttons">
            <div class="other-buttons">
                <img src="butwin.png" alt="win95 buttons">
            </div>
            <div class="x-button">
                <img src="x.png" alt="win95 button">
            </div>
        </div>
    </div>
    <div class="scroll">
        <div class="container">
            <header>
                <div class="logo">
                    <h1>Lab.</h1>
                    <span>v. 0.2</span>
                </div>
                <span class="thing">ZSE-E Radomsko</span>
            </header>
            <nav>
                <ul>
                    <a href="#"><li>glówna</li></a>
                    <a href="#"><li>newsy</li></a>
                    <a href="#"><li>projekty</li></a>
                    <a href="#"><li>o nas</li></a>
                </ul>
            </nav>
            <main>
                <div class="news">
                    <article>
                        <h1>Gwiazda smerci juz dziala</h1>
                        <p>Po wielu testach wreszcie udalo sie nam uruchomic samowystarczalna gwiazde smierci. Za szkody
                            jakie w wyniku testów poniesli Marsjanie przepraszamy ...</p>
                        <a href="#">czytaj dalej >></a>
                    </article>
                    <article>
                        <h1>Stacja pogodowa ciagle w budowie</h1>
                        <p>Przez inne projekty ucierpialo tepo pracy nad stajca pogodowa, ale projekt ciagle zyje! Oto
                            ostanio wykonane elementy ...</p>
                        <a href="#">czytaj dalej >></a>
                    </article>
                    <article>
                        <h1>Teleskop w bodowie</h1>
                        <p>Wlasnie dotarly do nas czesci do nowego teleskopu kosmicznego, to pozwoli ruszyc nam z
                            pojektem ...</p>
                        <a href="#">czytaj dalej >></a>
                    </article>
                    <article>
                        <h1>Mamy recepture CocaColi</h1>
                        <p>Po latach eksperymentów udalo sie nam uzyskac recepture na CocaCole! Chemicznie nie rozni sięw
                            niczym od oryginlanego napoju, sprzedamy tanio zainteresowanemu koncernowi spozywczemu ...</p>
                        <a href="#">czytaj dalej >></a>
                    </article>
                </div>
                <div class="prj">

                </div>
            </main>
        </div>
    </div>
</body>
</html>

 

 

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.4em;
    vertical-align: baseline;
    text-decoration: none;
    outline: 0;
    box-sizing: border-box;
}

@font-face {
    font-family:"Windows Command Prompt Regular";
    src:url("windows_command_prompt.eot?") format("eot"),
    url("windows_command_prompt.woff") format("woff"),
    url("windows_command_prompt.ttf") format("truetype"),
    url("windows_command_prompt.svg#Windows-Command-Prompt") format("svg");
    font-weight:normal;
    font-style:normal;
}

body {
    background: #00787F;
    font-family: "Windows Command Prompt Regular", monospace;
    color: #FDFDFD;
    font-size: 30px;
    letter-spacing: 2px;
    border: groove 5px #BFB8BF;
    overflow: hidden;
}

.scroll {
    overflow: scroll;
    border-right-width: 10px;
    border-left-width: 10px;
    scrollbar-face-color: #C3C7CB;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #868A8E;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #C3C7CB;
}

.bottom-border {
    width: 100%;
    height: 40px;
    display: flex;
    background: #00007F;
    border-bottom: groove 5px #BFB8BF;
    align-items: center;
    justify-content: space-between;
}

.bottom-border p {
    padding-left: 10px;
}

.bottom-border .buttons {
    display: flex;
    cursor: pointer;
}

.bottom-border .buttons .other-buttons {
    padding-right: 2px;
}

.bottom-border .buttons .x-buttons {
    padding-right: 5px;
}

.bottom-border .other-buttons {
    height: 29px;
    width: 58px;
}

.bottom-border .x-button {
    height: 29px;
    width: 29px;
}

.bottom-border .other-buttons img{
    height: 100%;
    width: 100%;
}

.bottom-border .x-button img {
    height: 100%;
    width: 100%;
}

.container {
    background: #002BB2;
    width: 1300px;
    min-height: 1000px;
    margin: 50px auto;
    border: 6px double #FDFDFD;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: double 6px #FDFDFD;
}

header span {
    color: #E6746B;
}

header .thing {
    padding: 30px;
}

header .logo {
    color: #9BF373;
}

header .logo h1 {
    display: inline;
    font-size: 3em;
    padding: 30px;
}

header .logo span {
    font-size: 1.5em;
    margin-left: -25px;
}

nav {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: double 6px #FDFDFD;
}

nav ul {
    display: flex;
    text-align: center;
}

nav ul li {
    list-style-type: none;
    padding: 10px 0;
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background: #FDF877;
}

nav ul li a {
    color: #002BB2;;
}

nav ul li:hover {
    background: #9BF8FB;
}

main {
    display: flex;
}

.news article {
    min-height: 300px;
    border-bottom: double 4px #FDFDFD;
    margin: 20px;
}

.news article:last-child {
    border: none;
}

.news article h1 {
    font-size: 2em;
}

.news article p {
    font-size: .9em;
}

.news article a {
    font-size: 1em;
    color: #FDF877;
}

 

 

Strona: https://drive.google.com/open?id=1813JZGmPrpe3tTxs3nI9_uvHp1KJ3be5

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 151 wizyt
pytanie zadane 19 sierpnia 2017 w HTML i CSS przez edwardo Nowicjusz (140 p.)
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 10 lipca 2018 w HTML i CSS przez Jan Machelski Nowicjusz (200 p.)
0 głosów
0 odpowiedzi 104 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...