Nie rozumiem! Potpiąłem CSS i nie działa

Question

Mam problem, którego nie mogę rozwiązać i którego nie rozumiem. Polega on na tym, że chciałbym aby napisy ułożyły się w jednej linii:

one      two       three       four

... napisałem poniższy kod HTML...

<DOCTYPE HTML5>
<html lang="pl-PL">
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="1trol , trol, ">
  <meta name="description" content="trol">
  <meta name="author" content="11jolek11">
  <link  rel="stylesheet" type="text/css" href="C:\xampp\htdocs\my_page\beta\sheetCSS.css"></link>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <nav>
   <div id="nav">
    <div class="navbar">one</div>
    <div class="navbar">two</div>
    <div class="navbar">three</div>
    <div class="navbar">four</div>
  </div>
  </nav>
  <article>
  </article>
</body>
</html>

... oraz CSS

@charset "UTF-8";

#nav{
  max-width: 100%;
  max-height: 2cm;
}
.navbar{
  float: left;
  display: inline;
  padding-left: 2cm;
  }

rezultat jest inny niż oczekiwałem:

one

two

three

four

dlatego otworzyłem  konsole WWW i sprawdziłem jakie CSS są podpięte i nie znalazłem swojego podpiętego CSS-a (arkusz nazwałem sheetCSS.css)

 

 

 

 

 

 

 

 

 

 

Nie wiem gdzie zrobiłem błąd ani jak rozwiązać ten problem proszę o pomoc!!!

Jeśli ma to jakieś znaczenie to używam Firefoxa i edytora Atom

Comments

Nieprecyzyjna nazwa tematu.

---

@11jolek11, Tak na marginesie: pisze się "podpiąłem" :p

Answer 1

Tak rzeźbisz, że sam nie wiesz co się dzieje. Po kolei:

zły doctype:

<DOCTYPE HTML5>

powinno być

<!DOCTYPE html>

<span style="background-color:#0000ff"> <link  rel="stylesheet" type="text/css" href="C:\xampp\htdocs\my_page</span><span style="color:#800000"><span style="background-color:#0000ff">\beta\sheetCSS.css"></span></span><span style="background-color:#0000ff"></link></span>

Co to jest? Jestem ciekaw co autor tego kodu miał na myśli

Oczywiście zewnętrzne arkusze stylów podpina się w ten sposób:

<link rel="stylesheet" href="sciezka/do/pliku.css">

Po tym fragmencie:

<link rel="stylesheet" href="<a href="https://fonts.googleapis.com/icon?family=Material+Icons" >"="" rel="nofollow" target="_blank" original-title="" title="">https://fonts.googleapis.com/icon?family=Material+Icons"></a>

wnioskuję, że próbowałeś załączyć zewnętrzne fonty z Google'a. Najgorsze jest to, że zaciągając cokolwiek z zewnętrznych CDN, chyba każdy z serwerów podaje gotowy kod do podpięcia, nawet kopiuje się samodzielnie do schowka.

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

viewporta możesz wywalić. Nie wiesz jak podpiąć CSS, to tym bardziej nie zrobisz strony responsywnej. Ten tag jest zbędny.

<nav>
   <div id="nav">
    <div class="navbar">one</div>
    <div class="navbar">two</div>
    <div class="navbar">three</div>
    <div class="navbar">four</div>
  </div>
  </nav>

div z id nav jest zbędny. W ostateczności możesz nadać id na <nav> i efekt będzie ten sam. Natomiast nawigację, od strony semantycznej lepiej jest zrobić za pomocą listy, więc powyższy kod można by przepisać na to:

<nav>
     <ul>
         <li><a href="#">one</a></li>
         <li><a href="#">two</a></li>
         <li><a href="#">three</a></li>
         <li><a href="#">four</a></li>
     </ul>
 </nav>

Kod jest czystszy, a do tego czytniki będzie go lepiej interpretować.

Tutaj masz gotowy kod, który wyświetli Ci nawigację w sposób liniowy:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>refactor</title>
  <style>
    nav ul li {
      display:inline;
    }
  </style>
</head>
<body>
<nav>
     <ul>
         <li><a href="#"></a>one</li>
         <li><a href="#"></a>two</li>
         <li><a href="#"></a>three</li>
         <li><a href="#"></a>four</li>
     </ul>
 </nav>
</body>
</html>

Wszystko dało się zrobić za pomocą JEDNEJ właściwości CSS.

Popracuj nad semantyką, bo ogólnie jest tragedia.

Answer 2

Ale masz burdel w kodzie.

<span style="background-color:#0000ff"> <link  rel="stylesheets" type="text/css" href="C:\xampp\htdocs\my_page</span><span style="color:#800000"><span style="background-color:#0000ff">\beta\sheetCSS.css"></span></span><span style="background-color:#0000ff"></link></span>

Co to jest za potwór w sekcji head? Nie używaj stylów wewnątrz html. Pisz wszystko w arkuszu. Nie styluj po id i upewnij się, że wszystkie znaczniki masz pozamykane w odpowiednim miejscu. Podejrzanie wygląda coś takiego:

<article>
  </div>
  </article>

Div o id nav nie jest do niczego potrzebny sam element nav powinien wystarczyć. Weź to uporządkuj bo to jest maniana.

Answer 3

A gdzie dodajesz niby CSS do HTML? Bo nie widzę załączenia- arkusza stylów 

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

Musisz to zalinkować, a nie dodawać span. 

Answer 4

ja bym zrobił to flexboxem

w css spróbuj
 

#nav{
   display: flex;
   flex-wrap: nowrap;
}

sądze że bedzie to lepsze rozwiązanie

Comments

Też bym to zrobił flexboxem