• 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
69 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 (247,570 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,650 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 242 wizyt
0 głosów
2 odpowiedzi 179 wizyt
pytanie zadane 28 marca 2017 w HTML i CSS przez pokrywa1 Użytkownik (990 p.)
0 głosów
1 odpowiedź 1,316 wizyt
pytanie zadane 20 lipca 2015 w HTML i CSS przez LogicznyMat Użytkownik (980 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

64,048 zapytań

110,437 odpowiedzi

231,288 komentarzy

47,817 pasjonatów

Przeglądających: 196
Pasjonatów: 7 Gości: 189

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.

...