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

question-closed Brak formatowania CSS

Object Storage Arubacloud
0 głosów
258 wizyt
pytanie zadane 8 lipca 2019 w HTML i CSS przez FilOON Użytkownik (680 p.)
zamknięte 8 lipca 2019 przez FilOON

Witam, strona zachowuje się tak jakby w ogóle nie czytało CSS'a. Sprawdzałem kombinacją CTRL + U w przeglądarce i plik jest podpięty. Czyściłem dane przeglądarki i nic. Dodam że nie działa na żadnej przeglądarce. Kod jest taki jak poniżej:

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      
    <title>*** ***</title>
      
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />

	<link href="style.css" rel="stylesheet" type="text/css" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext" rel="stylesheet">
 
    <!--============================
    Add script for SMOTH LINK SCROLL
    ================================!-->
    <script src="jquery-3.4.1.min.js"></script>
     
    <script>
    $(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function() {
 
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
 
        // Store hash
        const hash = this.hash;
 
        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top-75
        }, 800, function(){
    
            // Add hash (#) to URL when done scrolling (default click behavior)
            <!-- window.location.hash = hash; -->
        });
        } // End if
    });
    });
    </script>
     
</head>
  
<body>
      
    <div id="container">
        <div id="wrapper"> <!--Add DIV #wrapper!-->
            <div class="nav">
                <ul>
                    <li><a id="link1" href="#omnie">O MNIE</a></li> <!--Add #omnie!-->
                    <li><a id="link2" href="#portfolio">PORTFOLIO</a></li> <!--Add #omnie!-->
                    <li><a id="link3" href="#cennik">CENNIK</a></li> <!--Add #cennik!-->
                    <li><a id="link4" href="#kontakt">KONTAKT</a></li> <!--Add #kontakt!-->
                </ul>
            </div>
        </div>
    <div id="content">
      
        <h1 id="omnie">O mnie</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
        <h1 id="portfolio">Portfolio</h1>
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="cennik">Cennik</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. .</p>
        <h1 id="kontakt">Kontakt</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
    </div>
      
          
        <div id="footer">
        ********* 2019 © Wszelkie prawa zastrzeżone
        </div>
      
    </div>
 
    <script>
    $(document).ready(function() {
    const NavY = $('.nav').offset().top;
       
    const stickyNav = function(){
    const ScrollY = $(window).scrollTop();
            
    if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }
    };
       
    stickyNav();
       
    $(window).scroll(function() {
        stickyNav();
    });
    });
    </script>
</body>
</html>

CSS:

body
{
    background-color: #999999;
    color: #000000;
    margin: 0 !important;
    font-family: 'Roboto', sans-serif;
}
 
#container
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
  
#content
{
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
}
  
#footer
{
    width: 100%;
    padding: 10px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
}
  
#wrapper /*New ID*/
{
   height: 50px;
}
 
.nav /*Few changes*/
{
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    text-align: center;
    font-weight: bold;
    -o-transition:box-shadow 1s;
    -moz-transition:box-shadow 1s;
    -webkit-transition:box-shadow 1s;
    transition:box-shadow 1s;
}
.sticky /*Few changes*/
{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow:0px 0px 3px 2px #666;
}
  
ul
{
   padding: 0;
   margin: 0;
   list-style-type: none;
   font-size: 18px;
   height: px;
   line-height: 50px;
   display: inline-block;
}
  
ul a
{
    color: #000000;
    text-decoration: none;
    display: block;
    transition-duration: 0.3s;
}
  
ul > li
{
    float: left;
    width: 150px;
    height: 50px;
}
 
ul > li a:hover
{
    color: #990099;
    background-color: ;
}

Strona wygląda następująco:

Czy mógłby ktoś przeanalizować kod i powiedzieć co jest grane, czy może coś się gryzie i przez to formatowanie nie działa, a może jakieś głupie przeoczenie? Z góry dzięki za pomoc;)

komentarz zamknięcia: Znalezione rozwiązanie

5 odpowiedzi

0 głosów
odpowiedź 8 lipca 2019 przez cz3ran Stary wyjadacz (13,380 p.)
Przeklejając Twój kod wszystko wydaje się działać. Sprawdził bym na Twoim miejscu czy dobrze podałeś ścieżkę do pliku css (spróboj './style.css', jeżeli plik css leży w tym samym folderze co index.html).
0 głosów
odpowiedź 8 lipca 2019 przez RADOSLAW_97 Nowicjusz (200 p.)
U mnie też ten kod DZIAŁA
0 głosów
odpowiedź 8 lipca 2019 przez Daichi Obywatel (1,250 p.)
Zobacz czy masz włączone rozszerzenia. Może zdarzyło się, że nie masz i nazwałeś plik style.css a komputer go widzi jako style.css.css.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Sprawdzałem już nie raz, z rozszerzeniami wszystko gra.
0 głosów
odpowiedź 8 lipca 2019 przez mati2762 Mądrala (5,510 p.)
CTRL + F5 lub w incognito spróbuj.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Niestety to nic nie daje, dalej to samo;/
0 głosów
odpowiedź 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Usunąłem zawartość pliku style.css i wkleiłem jakieś randomowe formatowanie sekcji body z internetu, o dziwo zadziałało, więc dokleiłem resztę pliku którą miałem wcześniej i niestety reszta strony się nie zmieniła, widoczne są tylko zmiany które robię w body w css. Nie rozumiem.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Przekopiowałem kod który ostatnio wklejałem w innym wątku na forum z innym problemem, zaczęło działać. Jak? Nie wiem. Temat zamykam.

Podobne pytania

0 głosów
0 odpowiedzi 94 wizyt
0 głosów
1 odpowiedź 202 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez onepek Nowicjusz (120 p.)
0 głosów
1 odpowiedź 687 wizyt
pytanie zadane 4 grudnia 2018 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

92,759 zapytań

141,679 odpowiedzi

320,443 komentarzy

62,102 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

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!

...