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

Odstepy między sekcjami HTML CSS

0 głosów
99 wizyt
pytanie zadane 21 stycznia w Rozwój zawodowy, nauka, szkoła, praca przez Deeright Początkujący (300 p.)
zmienione kategorie 21 stycznia przez Deeright

Mam kolejny problem, jak jest header z napisem "Scroll Down" to czemu odstęp od krawędzi strony jest taki duży? Chciałbym aby nie było żadnego odstepu. Kiedy w kodzie zamienie menu z headerem to menu ładnie przystaje do krawędzi. Druga sprawa, czemu między menu a headerem oraz resztą tekstu jest też taka przerwa ?
Wszędzie jest margin 0 więc nie do końca rozumiem...

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
  font-size: 28px;
  margin: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.header{
  margin: 0px;
  padding: 0px;
  text-align: center;
  background-color:  #dbdbdb;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>
</html>

 

komentarz 21 stycznia przez Arkadiusz Waluk Ekspert (250,610 p.)
Kod na forum wstawiamy w bloczek kodu, po raz drugi tego nie zrobiłeś: https://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy Wybieramy też poprawną kategorię, "Nasze projekty" - jak jest w opisie - służy do publikacji gotowych projektów, nie pytań o kod. Dodatkowo gdy ktoś napisze odpowiedź rozwiązującą Twój problem wypada ją zaznaczyć jako najlepszą (zielony "tick" obok danej odpowiedzi) - dzięki temu pytanie widnieje jako rozwiązane, a przyszli szukający mogą łatwo znaleźć odpowiedź.
1
komentarz 21 stycznia przez Deeright Początkujący (300 p.)
Dzięki, poprawiłem się :)

1 odpowiedź

+1 głos
odpowiedź 21 stycznia przez Vickul Stary wyjadacz (12,630 p.)
wybrane 21 stycznia przez Deeright
 
Najlepsza

Witaj. 

Dobrą praktyką jest resetowanie domyślnych styli css przeglądarki. Na początku arkusza styli dodaj sobie 

* {
 margin: 0;
padding: 0;
box-sizing: border-box;
}

 

komentarz 21 stycznia przez Deeright Początkujący (300 p.)
O, pomogło dzięki!
Dla zainteresowanych dodam, że można ręcznie też zrobić to w sposób iż ustawić margin w <p> i w <h1> na 0 (metoda prób i błędów)

Podobne pytania

0 głosów
2 odpowiedzi 251 wizyt
0 głosów
2 odpowiedzi 192 wizyt
pytanie zadane 28 marca 2017 w HTML i CSS przez pokrywa1 Użytkownik (990 p.)
0 głosów
1 odpowiedź 1,462 wizyt
pytanie zadane 20 lipca 2015 w HTML i CSS przez LogicznyMat Użytkownik (980 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

67,186 zapytań

114,135 odpowiedzi

241,913 komentarzy

46,173 pasjonatów

Przeglądających: 295
Pasjonatów: 9 Gości: 286

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...