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

pytanie zadane 22 stycznia 2018 w HTML i CSS przez 11jolek11 Nowicjusz (130 p.)
edycja 22 stycznia 2018 przez 11jolek11

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

komentarz 22 stycznia 2018 przez Benek Szeryf (90,870 p.)

Nieprecyzyjna nazwa tematu.

komentarz 22 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

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

4 odpowiedzi

odpowiedź 22 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

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

zły doctype:

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.

odpowiedź 22 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

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.

odpowiedź 22 stycznia 2018 przez Wiciorny Ekspert (269,710 p.)

odpowiedź 22 stycznia 2018 przez Shadow69 Użytkownik (950 p.)
edycja 13 marca 2018 przez event15

ja bym zrobił to flexboxem

w css spróbuj

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

sądze że bedzie to lepsze rozwiązanie

komentarz 22 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Też bym to zrobił flexboxem

Podobne pytania

+1 głos

1 odpowiedź 203 wizyt

HTML code reveiw. Czy dobrze rozumiem metodyke BEM ?

pytanie zadane 12 maja 2019 w HTML i CSS przez Aleksander Początkujący (360 p.)

+2 głosów

1 odpowiedź 774 wizyt

Nie rozumiem dlaczego to nie działa! Nie mogę połączyć html z css

pytanie zadane 2 września 2016 w HTML i CSS przez ProgramistaMaciek Początkujący (250 p.)

+1 głos

1 odpowiedź 248 wizyt

Css hover mi nie działa

pytanie zadane 23 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

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

Zaloguj lub zarejestruj się, aby skomentować.

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

4 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci